Commit b4fd0e05 authored by jim chen's avatar jim chen

Perfect fix # 744

parent 99f9e59b
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { Table, Button, Input, message, Popconfirm, Divider } from 'antd'; import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
import styles from './style.less'; import styles from './style.less';
...@@ -10,6 +8,7 @@ export default class TableForm extends PureComponent { ...@@ -10,6 +8,7 @@ export default class TableForm extends PureComponent {
this.state = { this.state = {
data: props.value, data: props.value,
loading: false,
}; };
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
...@@ -35,9 +34,7 @@ export default class TableForm extends PureComponent { ...@@ -35,9 +34,7 @@ export default class TableForm extends PureComponent {
} }
}); });
} }
@Bind() toggleEditable=(e, key) => {
@Debounce(400)
toggleEditable(e, key) {
e.preventDefault(); e.preventDefault();
const newData = this.state.data.map(item => ({ ...item })); const newData = this.state.data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData); const target = this.getRowByKey(key, newData);
...@@ -83,6 +80,9 @@ export default class TableForm extends PureComponent { ...@@ -83,6 +80,9 @@ export default class TableForm extends PureComponent {
} }
saveRow(e, key) { saveRow(e, key) {
e.persist(); e.persist();
this.setState({
loading: true,
});
// save field when blur input // save field when blur input
setTimeout(() => { setTimeout(() => {
if (document.activeElement.tagName === 'INPUT' && if (document.activeElement.tagName === 'INPUT' &&
...@@ -102,7 +102,10 @@ export default class TableForm extends PureComponent { ...@@ -102,7 +102,10 @@ export default class TableForm extends PureComponent {
delete target.isNew; delete target.isNew;
this.toggleEditable(e, key); this.toggleEditable(e, key);
this.props.onChange(this.state.data); this.props.onChange(this.state.data);
}, 10); this.setState({
loading: false,
});
}, 500);
} }
cancel(e, key) { cancel(e, key) {
this.clickedCancel = true; this.clickedCancel = true;
...@@ -179,6 +182,9 @@ export default class TableForm extends PureComponent { ...@@ -179,6 +182,9 @@ export default class TableForm extends PureComponent {
title: 'ζ“δ½œ', title: 'ζ“δ½œ',
key: 'action', key: 'action',
render: (text, record) => { render: (text, record) => {
if (!!record.editable && this.state.loading) {
return null;
}
if (record.editable) { if (record.editable) {
if (record.isNew) { if (record.isNew) {
return ( return (
...@@ -214,6 +220,7 @@ export default class TableForm extends PureComponent { ...@@ -214,6 +220,7 @@ export default class TableForm extends PureComponent {
return ( return (
<div> <div>
<Table <Table
loading={this.state.loading}
columns={columns} columns={columns}
dataSource={this.state.data} dataSource={this.state.data}
pagination={false} pagination={false}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment