user image

nico
Published in : 2022-02-20

Mui Datagrid: How to make search nodes only starting from one node which we clicked

React js

Hello I need to make search from one selected node we clicked so we are not lost with all the found matching nodes.
The search should only match the children of the selected node.

I have managed to implement the search but it search all the tree.

I also managed to select one node but I don't know how to tell the searchFocusIndex to focus on the node.

But I am not sure how to make the search start only from the selected nodeā€¦

Thanks

import React, { Component } from 'react';
import { connect } from "react-redux";
import * as repositoryActions from '../../actions/repositoryActions';

import SortableTree from 'react-sortable-tree';
import { Input } from 'semantic-ui-react';
import 'react-sortable-tree/style.css';

// --------------------------------------------------------------------------------------------------------------------



export class BookingTree extends Component {

    constructor(props) {
        super(props);


        this.state = {
            searchString: '',
            searchFocusIndex: 0,
            nodeClicked: false,
            treeData: props.data.treeData,

        };

        
    }

    //-->
    handleNodeClick = (node) => {
        this.setState({
            nodeClicked: node
        });
    };

    render() {
        const { searchString, searchFocusIndex, nodeClicked } = this.state;

       
        return (
            <div>
                <div style={{ height: 800, width: '100%' }}>

                    <Input size='mini' placeholder='Search' value={searchString}
                        onChange={event => this.setState({ searchString: event.target.value })} />

                    <SortableTree
                        onlyExpandSearchedNodes={true}
                        searchQuery={searchString}
                        searchFocusOffset={searchFocusIndex}
                        canDrag={false}
                        treeData={
                            this.state.treeData
                        }
                        // best practice : use a fonction to update the state
                        onChange=
                        {
                            treeData =>
                                this.setState(
                                    (state, props) => {
                                        return { treeData };
                                    }
                                )
                        }
                        generateNodeProps={(rowInfo) => {
                            const { node } = rowInfo;
                            return {                               
                                onClick: () => {
                                    this.handleNodeClick(node);
                                },
                                style:
                                    node === this.state.nodeClicked
                                        ? {
                                            border: "3px solid red"
                                        }
                                        : {}
                            };
                        }}
                    />
                </div >

               
            </div>
        );


    }
}

//--> Map Redux State (not to confuse with component state !) to component Props
function mapStateToProps(state) {

    return {
        data: state.data,
        loading: state.loading
    };
}

function mapDispatchToProps(dispatch) {



    return {
        onGetData: (url, props) => {
          
            dispatch(repositoryActions.getData(url, props));
        }

    }
}



export default connect(mapStateToProps, mapDispatchToProps)(BookingTree);

Comments

There is no comments yet

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

React Component setState doesn't update my property
Publish date: 2022-03-29 | Comments: 2

Tag: React js

Reload browser window using Reactjs?
Publish date: 2022-02-08 | Comments: 4

Tag: React js

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

[solved] useEffect is repeating the request Reactjs
Publish date: 2022-04-07 | Comments: 2

Tag: React js

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Publish date: 2022-04-02 | Comments: 2

Tag: React js