Material-UI auto select component for tree data structures.
npm install mui-tree-select-v6
class Node {
constructor(value, parent = null, children = null) {
this.value = value;
this.parent = parent;
this.children = children;
}
}
`
1. Implement a getChildren method to tell Tree Select how to retrieve child nodes.
`
const rootNodes = [...] // Array of Nodes;
const getChildren = (node) => node === null ? rootNodes : node.children;
`
2. Implement a getParent method to tell Tree Select how to retrieve parent nodes.
`
const getParent = (node) => node.parent;
`
3. Implement a renderInput method required by Autocomplete.
`
const renderInput = (params) => ;
`
4. Pass to the MUI Tree Select.
`
return getChildren={getChildren}
getParent={getParent}
renderInput={renderInput}
/>;
`
Full documentation can be found here.
Notes
$3
This package wraps the MUI Autocomplete component. Many of props from this component are passed from TreeSelect.
$3
freeSolo values are wrapped in the class FreeSoloNode to provided a reference to the parent node under which the free solo value was created.
FreeSoloNode extends the native String object. This disallows "es5" as a target based on the way the typescript transpiler converts class semantics to function`.