import CheckboxTree from 'react-checkbox-tree';

const nodes = [{
    value: 'node-1',
    title: 'Parent Node 1',
    children: [{
        value: 'node-1-1',
        title: 'Leaf Node 1-1',
    }, {
        value: 'node-1-2',
        title: 'Leaf Node 1-2'
    }],
}];

class Widget extends React.Component {
    constructor() {
        super();

        this.state = {
            checked: [],
            expanded: [],
        };

        this.onCheck = this.onCheck.bind(this);
        this.onExpand = this.onExpand.bind(this);
    }

    onCheck(checked) {
        this.setState({ checked });
    }

    onExpand(expanded) {
        this.setState({ expanded });
    }

    render() {
        const { checked, expanded } = this.state;

        return (
            <Tree
                name="tree_nodes"
                nodes={nodes}
                checked={checked}
                expanded={expanded}
                onCheck={this.onCheck}
                onExpand={this.onExpand}
            />
        );
    }
}