Having trouble with search about react-infinity-menu HOT 11 CLOSED

Thanks for your question. We just found a bug in our code and get fixed.

For your question, the headerContent you need to pass in is something like this.

class Header extends React.Component {
    render() {
        return <input onClick={this.props.startSearching} value={this.props.searchInput}
        onChange={this.props.setSearchInput}/>;
    }
}

We provided the default filter method for searching.

from react-infinity-menu.

Ahhh I see. Okay I will give that a shot. I guess in the same vein, how does one pass a customComponent? For example, in the json from my server, I set my customComponent field for a nod to be "NodeWrapper" (as a string), but that doesn't seem to be reflected in the DOM. Thanks again!

from react-infinity-menu.

I am not sure I understand your question. But if just for passing in an customComponent. you can do something like this

<InfinityMenu tree={this.state.tree} headerContent={Header}/>

from react-infinity-menu.

I'm sorry, I worded that poorly. I'm talking about this case:

[
    {
        name: "menu1", /*require*/
        id: 1, /*require*/
        isOpen: true, /*require*/
        customComponent: YOUR_OWN_COMPONENT_FOR_MENU,
        children: [
            {
                name: "submenu1",
                id: 1,
                isOpen: true,
                customComponent: YOUR_OWN_COMPONENT_FOR_SUB_MENU,
                children: [
                    {
                        name: "item1-1",
                        id: 1
                    },
                    {
                        name: "item1-2",
                        id: 2
                    }
                ]
            },
            {
                name: "submenu2",
                id: 2,
                isOpen: true,
                customComponent: YOUR_OWN_COMPONENT_FOR_SUB_MENU,
                children: [
                    {
                        name: "item2-1",
                        id: 1
                    }
                ]
            }
        ]
    },
    {
        name: "menu2", /*require*/
        id: 2, /*require*/
        isOpen: true, /*require*/
        customComponent: YOUR_OWN_COMPONENT_FOR_MENU,
        children: [
            {
                name: "item3-1",
                id: 1
            }
        ]
    }
];

This is in the README and I have designed my payload from the server to look like that, but i'm just not sure how to make the customComponent portion work. I hope that i've clarified the question a little more. Thanks.

from react-infinity-menu.

I see. Ah, no worries.
So for the customComponent is an react component that let you to customize the menu. Inside this customComponent, you can access different properties of current node. Here is an simple example that you can pass in as an customComponent

class Node extends React.Component {
    render() {
        return (
            <div key={this.props.key} onClick={this.props.onClick}>
                <label>{this.props.name}</label>
            </div>
        );
    }
}

from react-infinity-menu.

Hmmm but how do you define that component in the data structure?

from react-infinity-menu.

oh you will usually define this outside of the tree data structure and pass in as an variable.

class Node extends React.Component {
    render() {
      .......
    }
}

tree = [
   {
       name: "menu1",
        id: 1,
        isOpen: true,
        customComponent: Node
   }
];

from react-infinity-menu.

Alright that makes sense, I think I can work with that. Do you also have any recommendations on improving performance of the search mechanism for large data sets? Thanks.

from react-infinity-menu.

Glad to see you found this lib useful @jamesoh :)

from react-infinity-menu.

@jamesoh For large data sets, we may need some pre handling the data before we create the menu. and when we do the searching we can use the pre-set data. Currently, we are searching the whole tree by using recursive method which is pretty slow for large data.

We will also refactor the search input a little bit since right now it's not very intuitive to use

from react-infinity-menu.

@johnelliott yea, i'm really enjoying the ability to customize the menu

@tiansijie I see, i'll try building something on my end to handle that for now. I'll contribute if i can get my solution generic enough for this library

Thanks for all the help guys!

from react-infinity-menu.