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

class App extends React.Component {
    state = { items: tree, expand: [], select: [], check: [] };
    render() {
        const { expand, select, check } = this.state;
        return (
            <TreeView
                data={processTreeViewItems(this.state.items, { expand, select, check })}
                expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
                onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
                onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
            />
        );
    }
    onExpandChange = (event) => {
        let expand = this.state.expand.slice();
        const index = expand.indexOf(event.itemHierarchicalIndex);
        index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
        this.setState({ expand });
    }
}

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'
}];

ReactDOM.render(<App />, document.querySelector('my-app'));

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.