Highlight the selected node ? about react-sortable-tree HOT 12 CLOSED

Can you try applying an onClick prop to your nodes using the generateNodeProps setting?
I haven't done anything like this myself, but you would probably maintain a list of the selected node(s) in your own component's state, update it using onClick or onMouseDown, and change the appearance by adding a className in that same generateNodeProps callback.

from react-sortable-tree.

Doing a bit of issue cleanup. Let me know if anything's changed.

from react-sortable-tree.

Using Version: 1.5.3

I am trying to do the same thing. Setting the className in the onClick function does not seem to add selected-node class to the DOM.

Am I doing it wrong?

export class MyComponent extends Component {
// ....
// ....

    nodeClicked = (event, rowInfo) => {
        if (event.target.className.includes('collapseButton') ||
            event.target.className.includes('expandButton')) {
            // ignore the event
        } else {
            const treeData = changeNodeAtPath({
                treeData: this.state.treeData,
                path: rowInfo.path,
                newNode: {...rowInfo.node, className: 'selected-node'}, // <--- here
                getNodeKey: ({ treeIndex }) => (treeIndex),
                ignoreCollapsed: true
            });
            this.setState({treeData, selectedNode: rowInfo.node});
        }
    };

    render() {
        let tree = (<div>Loading ...</div>);

        if(this.state.IsDataReady) {
            tree = <SortableTree
                treeData={this.state.treeData}
                canDrag={false}
                isVirtualized={false}
                onChange={treeData => {this.setState({ treeData })}}
                generateNodeProps={rowInfo => {
                    return {
                        onClick: event => this.nodeClicked(event, rowInfo)
                    }
                }}
            />
        }

        return (
            <div>
                {tree}
            </div>
        );
    }
}

export default MyComponent;

from react-sortable-tree.

@rhazegh I would recommend you use a more unique identifier than the treeIndex in getNodeKey. Something like getNodeKey: ({ node }) => node.id (be sure to assign it to the tree's getNodeKey prop). With a unique ID, you could store the selected id in your component's state, and when calling generateNodeProps you check if the last part of path matches the selected id, and return the style or className accordingly.

By the way, the issue in your code is that setting className directly to a node does not translate to className getting set on the DOM node. title, subtitle, expanded and children are the only attributes of nodes that get directly accessed by the code. The rest you have to pass on yourself, with callbacks, etc.

from react-sortable-tree.

@fritz-c Thank you. It works now 😃

BTW, great component! Really like it 👍

// ...

                generateNodeProps={rowInfo => {
                    let nodeProps =  { onClick: event => this.nodeClicked(event, rowInfo) };
                    if (this.state.selectedNodeId === rowInfo.node.id) {
                        nodeProps.className = 'selected-node';
                    }
                    return nodeProps;
                }}
// ...

from react-sortable-tree.

@rhazegh could you explain your code? I've been trying to get this to work as well and tried to follow along but ran into errors. Thank you!

from react-sortable-tree.

@charue808 friz-c has provided excellent explanations and my code is based on his suggestions. Which part of it do you need help with?

from react-sortable-tree.

@rhazegh Yeah, actually his explanation made some sense. I guess I don't understand how your code snippet works..since I got fatal errors with using "let" the way you did... but it makes sense since i think it is a callback.

from react-sortable-tree.

@charue808 let and const are used in ES6. You need to use babel to transpile to ES5. https://babeljs.io

from react-sortable-tree.

Correct, that's not the issue. So before your reply i got it to work, with lint errors but it worked.

However the issue is when I follow your example I can't render buttons. So i'm not sure if I need to include rendering buttons into the return of nodeProps...or something else.

from react-sortable-tree.

@charue808 I am afraid I don’t understand your problem.

I suggest you open a new issue and put your code with extra details in there. Someone might be able to help you.

from react-sortable-tree.

For future reference, the updated nodeClicked handler was missing...

Full example:

  nodeClicked = (event, rowInfo) => {
    if (event.target.className.includes('collapseButton') ||
        event.target.className.includes('expandButton')) {
        // ignore the event
    } else {
        this.setState({selectedNodeId: rowInfo.node.id});
    }
};

and

                generateNodeProps={rowInfo => {
                    let nodeProps =  { onClick: event => this.nodeClicked(event, rowInfo) };
                    if (this.state.selectedNodeId === rowInfo.node.id) {
                        nodeProps.className = 'selected-node';
                    }
                    return nodeProps;
                }}

from react-sortable-tree.