import Button from '../../button';
import Field from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '../../table';
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.getValues = () => {
            const values = this.field.getValues();
            console.log(values);
        };
        this.input = (value, index) => (React.createElement(Input, Object.assign({}, this.field.init(`name.${index}.input`))));
        this.op = (value, index) => {
            return (React.createElement("span", null,
                React.createElement(Button, { type: "primary", onClick: this.addItem.bind(this, index + 1) }, "add"),
                React.createElement(Button, { warning: true, onClick: this.removeItem.bind(this, index), style: { marginLeft: 4 } }, "delete")));
        };
        this.idx = 3;
        this.field = new Field(this, {
            parseName: true,
            values: {
                name: [0, 1, 2, 3].map(i => {
                    return { id: i, input: i };
                }),
            },
        });
    }
    addItem(index) {
        ++this.idx;
        this.field.addArrayValue('name', index, { id: this.idx, input: this.idx });
    }
    removeItem(index) {
        this.field.deleteArrayValue('name', index);
    }
    render() {
        const dataSource = this.field.getValue('name');
        return (React.createElement("div", null,
            React.createElement(Table, { dataSource: dataSource },
                React.createElement(Table.Column, { title: "id", dataIndex: "id" }),
                React.createElement(Table.Column, { title: "input", dataIndex: "id", cell: this.input }),
                React.createElement(Table.Column, { title: "operation", cell: this.op, width: 150 })),
            React.createElement("pre", { style: { marginTop: 8 } }, JSON.stringify(dataSource, null, 2))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('field-demo-8'));
