socialtables / react-infinity-menu Goto Github PK

Hey there,

I really like what you've built here. I am currently using this to create a tree-view of data for an internal application. I am trying to pass "input" as my headerContent, which renders but i'm not sure how to get the search functionality going for this.

This is my render function right now:
render () { return ( <InfinityMenu tree={this.state.tree} headerContent={"input"} headerProps={{className: 'form-control'}} onNodeMouseClick={this.onNodeMouseClick.bind(this)} onLeafMouseClick={this.onLeafMouseClick}/*optional*/ onLeafMouseDown={this.onLeafMouseDown}/*optional*/ onLeafMouseUp={this.onLeafMouseUp}/*optional*/ /> ); }

Thanks in advance for taking a look!

In My code css file not import plz help me!

I have added a Tooltip to one of the children components (https://github.com/romainberger/react-portal-tooltip) and after the tooltip is displayed and I tried to collapse or open one of the parent nodes I get this:

Uncaught TypeError: _react2.default.unmountComponentAtNode is not a function

You can see exactly what happens here:
http://www.giphy.com/gifs/l3q2BwUPU2tjvMY36

should be able to only import what's needed, also seems like _.some and _.filter not neccesary, can use native methods

For now, I just manually use document's getElement method to get the input element and assigned the attribute myself

Background:

Leaf is using customized component, and in customized component, onClick = { onClick } just do exactly like the doc. (Everything is normal for Node component even if I use customComponent for nodes. )

And in InfinityMenu, this prop is set :

onLeafMouseClick={this.onLeafMouseClick.bind(this)},

However,

onLeafMouseClick(event, leaf) {
  console.log(leaf); // it is a string which is the leaf's data-reactid, not leaf object, but everything works well if I don't use customzied component
}

Is that a bug I guess ?

There is a simple way to emphasize (bold..) the pressed element ?

thanks

i got error view config not found for name input

What would it take?

• rename references to floor elements/objects/etc...
• probably remove immutable
• read me
• demo page.
• transpile less to a css build.

anything else I might be missing cc @tiansijie

First of all, awesome component! I'm customizing this component to show a leaf as "selected" when it is clicked. I do this by setting an "onClick" function to the leaf which goes and updates the leaf with a customComponent. This work just fine when the component is not in searching mode. When it is in searching mode, my function updates the particular leaf with the customComponent but the changes are not reflected until I clear out my search. I'm not sure how to force the component to update even when it's in searching mode.

Thanks!

Would love a way to set a limit for the maximum number of leaves that should be rendered initially. With the ability to 'load more' or something, nothing fancy haha. Not sure if something like that fits into the scope here but i thought it would be a nice add, really helps if you have a lot of child nodes. Not sure how or if i could tap into doing something like this.

...i guess i could do something with the data i feed into react-infinity-menu through props... but that seems to defeat the purpose.

Any thoughts?

hi,

i am trying to set custom "onClick" function to custom component on first menu level. (He has no parent and no child)

tree: [ { name: Translation.t('sideMenu.sendRecommendation'), id: 0, isOpen: true, customComponent: SideMenuNode, onLeafMouseClick :this.onClick, link: 'forms/recommendation' },]

when i add to this tree object a children:[] (empty array) there is a way to pass onclick function via props?
i check the code and i think there isnt.

when i pass this tree object as leaf at main level he failed when try to search his parent.

from your code:

/*the leaves*/ if (!curr.children) { var keyPathArray = keyPath.split("."); var parentPath = Object.assign([], keyPathArray).splice(0, keyPathArray.length - 2); var parentNode = (0, _get3.default)(this.props.tree, parentPath); var filteredChildren = parentNode.children.some(function (child) { return child.isSearchDisplay === true; }) ? parentNode.children.filter(function (child) { return child.isSearchDisplay === true; }) : parentNode.children; var itemKey = "infinity-menu-leaf-" + curr.id; var visIds = filteredChildren.map(function (e) { return e.id; });

failed here:

var parentNode = (0, _get3.default)(this.props.tree, parentPath); var filteredChildren = parentNode.children.some(function (child)

there is any option to do it?

Hi, I am currently using this component for a project I am working on and I loved it.

Is there any way to add an animation when the submenu opens, collapse animation perhaps?

Thanks in advance.

Passing any react component instances in the tree results in a "Too much recursion" error on Firefox. Similar error on Google Chrome.

        this.state = {
            tree: [
                {
                    name: "controls",
                    id: 0,
                    isOpen: false,
                    customComponent: ControlManage,
                    children: [],
                    controlItems: controlItems
                } ....

This seems to be a problem of the deep-copy library. I tried switching to deepcopy however it seems to somehow change the state of InfinityMenu.

In the render method of InfinityMenu.

assert(this.state == {searching: {...}}
const tree = deepcopy(this.props.tree);
assert(this.state == {}}

When I enter a numeric value in the search box, the tree filters and shows correct results but when I erase the search input(numeric value) from search box then it's not showing the original tree instead it's still showing filtered results. Interestingly it's working as expected with alphabets.

Initially, I was using version 3.0.1 later I upgraded to version 3.2.0 but the issue still exists.

Any help greatly appreciated.

When using the search function in the tree in IE11, I get an error

return e.name.toLowerCase().includes(t.toLowerCase())
Object doesn't support property or method 'includes'

.includes() should be changed to .indexOf() > 0.

I tried to update package to newest version V3.2.0 via NPM, but npm said there is no matched version of 3.2.0, and currently, newest version is V3.1.0. (02/23/2017)