var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import ReactDOM from 'react-dom';
import Transfer from '..';
import { Button, Tree } from '../..';
const TreeNode = Tree.Node;
const treeDataSource = [
    {
        label: 'Form',
        key: '2',
        value: '2',
        children: [
            {
                label: 'Input',
                key: '4',
                value: '4',
            },
            {
                label: 'Field',
                key: '7',
                value: '7',
            },
            {
                label: 'Select',
                key: '5',
                value: '5',
            },
        ],
    },
    {
        label: 'Display',
        key: '3',
        value: '3',
        children: [
            {
                label: 'Table',
                key: '6',
                value: '6',
            },
        ],
    },
    {
        label: 'Data',
        key: '8',
        value: '8',
    },
];
const transferDataSource = [];
function flatten(list = []) {
    list.forEach(item => {
        transferDataSource.push(item);
        flatten(item.children);
    });
}
flatten(treeDataSource);
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            selected: [],
        };
    }
    handleChange(value) {
        this.setState({ selected: value });
    }
    getTreeDataSource(dataSource = [], value) {
        return dataSource.map((_a) => {
            var { children } = _a, props = __rest(_a, ["children"]);
            return (React.createElement(TreeNode, Object.assign({}, props, { disabled: props.disabled || value.includes(props.value), key: props.value }), this.getTreeDataSource(children, value)));
        });
    }
    render() {
        const { selected } = this.state;
        return (React.createElement(Transfer, { dataSource: transferDataSource, listStyle: { width: '200px', height: '192px' }, onChange: this.handleChange, titles: [
                React.createElement(Button, { key: "left", type: "primary" }, "Source"),
                'Target',
            ] }, ({ position, onChange, value }) => {
            if (position === 'left') {
                return (React.createElement(Tree, { checkable: true, editable: true, style: { padding: '10px' }, checkedKeys: value, onCheck: (keys, extra) => {
                        const newValues = extra.checkedNodes.map(item => item.props.value);
                        onChange(position, newValues);
                    } }, this.getTreeDataSource(treeDataSource, selected)));
            }
        }));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.createElement('transfer-demo-7'));
