processTreeViewItems

Premium

A helper function which applies the specified operation descriptors to the data.

• Expanding and collapsing items
• Selecting and deselecting items
• Checking and unchecking items

jsx

const App = () => {
    const [items] = React.useState(tree);
    const [expand, setExpand] = React.useState([]);
    const [select, setSelect] = React.useState([]);
    const [check, setCheck] = React.useState([]);

    const onExpandChange = (event) => {
        let newExpand = expand.slice();
        const index = newExpand.indexOf(event.itemHierarchicalIndex);
        index === -1 ? newExpand.push(event.itemHierarchicalIndex) : newExpand.splice(index, 1);
        setExpand(newExpand);
    }

    return (
        <TreeView
            data={processTreeViewItems(items, { expand, select, check })}
            expandIcons={true} onExpandChange={onExpandChange} checkboxes={true}
            onCheckChange={event => setCheck([ event.itemHierarchicalIndex ])}
            onItemClick={event => setSelect([ event.itemHierarchicalIndex ])}
        />
    );
}

const tree = [{
    text: 'Item1',
    items: [
        { text: 'Item1.1' },
        { text: 'Item1.2' },
        { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
}, {
    text: 'Item2', disabled: true,
    items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
}, {
    text: 'Item3'
}];

Parameters

data

undefined | "null" | any[]

The data that will be processed.

operations

TreeViewOperationDescriptors

The operation descriptors that will be applied to the data.

Returns

any[]

- The processed copy of the input data.