TreeView - SearchTreeView
The <SearchTreeView /> component is a <TreeView /> with a filtering text input. Matching tree nodes are highlighted to show the matching text in a user-friendly way.
The searching is performed on the text inside node.label - so, for <SearchTreeView /> components, the node.label values in the dataSource should be Strings.
<SearchTreeView /> builds a filter function based on the searchValue. This function is used to filter nodes based on their node.label values. .
To start using the <SearchTreeView /> component, you need to import it from @zippytech/react-toolkit/TreeView/SearchTreeView. Since this is a customized <TreeView />, you also need to import the TreeView CSS file from @zippytech/react-toolkit/TreeView/index.css.
<SearchTreeView /> is also be used as a named import from @zippytech/react-toolkit/TreeView.
// either direct import
import SearchTreeView from '@zippytech/react-toolkit/TreeView/SearchTreeView'

// or named import from TreeView
import { SearchTreeView } from '@zippytech/react-toolkit/TreeView'

// also make sure you import the TreeView css file
import '@zippytech/react-toolkit/TreeView/index.css'
<SearchTreeView /> accepts all TreeView props, and also exposes the following extra props and methods:
  • searchText : String - controlled search text.
  • defaultSearchText : String - initial search text state, uncontrolled version of searchText.
  • onSearchValueChange : Fn(newSearchText: String) - called when searchText changes.
  • getTreeViewInstance : Fn(): TreeView - method that returns the <TreeView/> instance.
  • renderNodeText(domProps, nodeProps) will be called as usual, but the nodeProps argument will also have a matchText: Array property to denote the match. This array will have a shape similar to the following: [ 'Ri', { match: 'ch' }, 'ard ', { match: 'Ch' }, 'arleston']., so an array with tokens, either strings, or objects with a match property.
The <input /> inside the <SearchTreeView /> can also be configured via the renderInput(inputProps, treeProps) prop.