socialtables / react-infinity-menu Goto Github PK
View Code? Open in Web Editor NEWA react component that displays an unlimited deep menu
License: Apache License 2.0
A react component that displays an unlimited deep menu
License: Apache License 2.0
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?
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.