import { Row, Col, Select, Table, Input, Popconfirm, Button, Form } from 'antd';
import * as React from 'react'
const FormItem = Form.Item;
const EditableContext = React.createContext({});
const EditableRow = ({ form, index, ...props }: any) => (
);
const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
public state = {
editing: false ,
}
public editable: any;
public input: any;
public cell: any;
public form: any;
public componentDidMount() {
console.log( this .props.editable);
if (this .props.editable) {
document.addEventListener( 'click', this .handleClickOutside, true );
}
}
public componentWillUnmount() {
if (this .props.editable) {
document.removeEventListener( 'click', this .handleClickOutside, true );
}
}
public toggleEdit = () => {
const editing = !this .state.editing;
this .setState({ editing }, () => {
if (editing) {
this .input.focus();
}
});
}
public handleClickOutside = (e: any) => {
const { editing } = this .state;
if (editing && this .cell !== e.target && !this .cell.contains(e.target)) {
this .save();
}
}
public save = () => {
const { record, handleSave }: any = this .props;
this .form.validateFields((error: any, values: any) => {
if (error) {
return ;
}
this .toggleEdit();
handleSave({ ...record, ...values });
});
}
public render() {
const { editing } = this .state;
const {
editable,
dataIndex,
title,
record,
index,
handleSave,
...restProps
}: any = this .props;
console.log( this .props);
return (
(this .cell = node)} {...restProps}>
{editable ? (
{(form) => {
this .form = form;
return (
editing ? (
{ this .form.getFieldDecorator(dataIndex, {
rules: [{
required: true ,
message: `${title} is required.`,
}],
initialValue: record[dataIndex],
})(
<Input
ref ={node => (this .input = node)}
onPressEnter ={this .save}
/>
)}
) : (
<div
className ="editable-cell-value-wrap"
style ={{ paddingRight: 24 }}
onClick ={this .toggleEdit}
>
{restProps.children}
)
);
}}
) : restProps.children}
);
}
}
export class InputContentConfigurator extends React.Component {
public dataSource: any;
public columns: any;
public constructor(props: any) {
super(props);
this .state = {
dataSource: [{
key: 0,
name: 'Edward King 0',
checkrules: '32',
defaultValue: 'null',
}, {
key: 1,
name: 'Edward King 1',
checkrules: '32',
defaultValue: 'null',
}],
count: 2,
};
this .columns = [{
title: 'name',
dataIndex: 'name',
width: '30%',
editable: true ,
}, {
title: 'checkrules',
dataIndex: 'checkrules',
editable: true ,
}, {
title: 'defaultValue',
dataIndex: 'defaultValue',
editable: true ,
}
, {
title: 'operation',
dataIndex: 'operation',
render: (text: any, record: any) => {
return (
this .state.dataSource.length >= 1
? (
this .handleDelete(record.key)}>
Delete
) : null
);
},
}
];
}
public handleDelete = (key: any) => {
console.log( this .props);
const { dataSource }: any = { ...this .state };
this .setState({ dataSource: dataSource.filter((item: any) => item.key !== key) });
}
public handleAdd = () => {
const { count, dataSource }: any = { ...this .state };
const newData = {
key: count,
name: count,
checkrules: '请输入',
defaultValue: '请输入',
};
this .setState({
dataSource: [...dataSource, newData],
count: count + 1,
});
}
public handleSave = (row: any) => {
const newData = [...this .state.dataSource];
const index = newData.findIndex((item: any) => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
this .setState({ dataSource: newData });
}
public render() {
const { dataSource }: any = { ...this .state };
const components = {
body: {
row: EditableFormRow,
cell: EditableCell,
},
};
const columns = this .columns.map((col: any) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: any) => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave: this .handleSave,
}),
};
});
return (
Input content configurator
true}>
List
String
true}>
<Input
placeholder ="请输入对象的名字"
/>
this.handleAdd} type="primary" >
Add a row
<Table
components ={components}
dataSource={dataSource}
columns ={columns}
/>
);
}
}
