nico
20 Feb 2022
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);
No Comments to show
© 2023 Copyrights reserved for web-brackets.com