import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '..';
const result = [
    {
        id: '001',
        time: 1951,
        title: { name: 'The Old Man and the Sea' },
    },
    {
        id: '002',
        time: 1925,
        title: { name: 'the great gatsby' },
    },
    {
        id: '003',
        time: 1719,
        title: { name: 'The adventures of Robinson Crusoe' },
    },
];
class EditablePane extends React.Component {
    constructor(props) {
        super(props);
        this.onKeyDown = e => {
            const { keyCode } = e;
            if (keyCode > 36 && keyCode < 41) {
                e.stopPropagation();
            }
        };
        this.onBlur = e => {
            this.setState({
                editable: false,
                cellTitle: e.target.value,
            });
        };
        this.onDblClick = () => {
            this.setState({
                editable: true,
            });
        };
        this.state = {
            cellTitle: props.defaultTitle,
            editable: false,
        };
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.defaultTitle !== this.state.cellTitle) {
            this.setState({
                cellTitle: nextProps.defaultTitle,
            });
        }
    }
    // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight
    render() {
        const { cellTitle, editable } = this.state;
        if (editable) {
            return (React.createElement(Input, { autoFocus: true, defaultValue: cellTitle, onKeyDown: this.onKeyDown, onBlur: this.onBlur }));
        }
        return React.createElement("span", { onDoubleClick: this.onDblClick }, cellTitle);
    }
}
class Demo extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            dataSource: result,
            id: '',
        };
        this.renderCell = value => {
            return React.createElement(EditablePane, { defaultTitle: value });
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement(Table, { dataSource: this.state.dataSource },
                React.createElement(Table.Column, { title: "Id", dataIndex: "id" }),
                React.createElement(Table.Column, { title: "Title", dataIndex: "title.name", cell: this.renderCell }),
                React.createElement(Table.Column, { title: "Time", dataIndex: "time" }))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('table-demo-25'));
