import Box from '../../box';
import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '..';
const dataSource = () => {
    const result = [];
    for (let i = 0; i < 5; i++) {
        result.push({
            title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,
            id: 100306660940 + i,
            time: 2000 + i,
        });
    }
    return result;
}, render = (value, index, record) => {
    return React.createElement("a", null,
        "Remove(",
        record.id,
        ")");
};
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            dataSource: dataSource(),
            className: '',
            align: 'left',
        };
    }
    toggleZebra() {
        this.setState({
            isZebra: !this.state.isZebra,
        });
    }
    toggleBorder() {
        this.setState({
            hasBorder: !this.state.hasBorder,
        });
    }
    makeBeauty() {
        this.setState({
            className: 'beauty',
        });
    }
    makeAlign() {
        this.setState({
            align: 'right',
        });
    }
    render() {
        return (React.createElement("span", null,
            React.createElement(Box, { direction: "row", spacing: 20 },
                React.createElement(Button, { onClick: this.toggleZebra.bind(this) }, " Toggle zebra "),
                React.createElement(Button, { onClick: this.toggleBorder.bind(this) }, " Toggle border"),
                React.createElement(Button, { onClick: this.makeBeauty.bind(this) },
                    ' ',
                    "Make second column beauty",
                    ' '),
                React.createElement(Button, { onClick: this.makeAlign.bind(this) },
                    ' ',
                    "Make first column align right",
                    ' ')),
            React.createElement("br", null),
            React.createElement(Table, { dataSource: this.state.dataSource, isZebra: this.state.isZebra, hasBorder: this.state.hasBorder },
                React.createElement(Table.Column, { title: "Id", dataIndex: "id", alignHeader: "center" }),
                React.createElement(Table.Column, { title: "Title", dataIndex: "title", align: this.state.align, className: this.state.className }),
                React.createElement(Table.Column, { title: "Time", dataIndex: "time" }),
                React.createElement(Table.Column, { cell: render, width: 200 }))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('table-demo-19'));
