Merge branch 'lcj-demo-50x'

demo/demolist/Demo0501.js

@@ -5,82 +5,96 @@
  * @description 可以对行进行编辑的表格
  * demo0501
  */
-import React, { Component, PureComponent } from "react";
+import React, { Component } from "react";
 import Table from "../../src";
 import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
 const Option = Select.Option;
 import { RefTreeWithInput } from "ref-tree";
 
-function handleFormValueChange(WarpCompProps, field, allFields) {
-  const { onChange, throwError } = WarpCompProps;
-  if (field.value === "") return throwError && throwError(true);
-  throwError && throwError(false);
-  onChange && onChange(field.value);
-}
+class StringEditCell extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      value: props.value
+    };
+  }
 
-const StringEditCell = Form.createForm({
-  onValuesChange: handleFormValueChange
-})(PureStringEditCell);
+  componentWillReceiveProps(nextProps) {
+    if (!nextProps.editable) {
+      this.setState({ value: nextProps.value });
+    }
+  }
 
-function PureStringEditCell(props) {
-  const { getFieldProps, getFieldError } = props.form;
-  const { value, editable, required } = props;
-  let cls = "editable-cell-input-wrapper";
-  if (required) cls += " required";
-  if (getFieldError("value")) cls += " verify-cell";
-  return editable ? (
-    <div className="editable-cell">
-      <div className={cls}>
-        <FormControl
-          {...getFieldProps("value", {
-            initialValue: value,
-            validateTrigger: "onBlur",
-            rules: [
-              {
-                required: true,
-                message: (
-                  <Tooltip
-                    inverse
-                    className="u-editable-table-tp"
-                    placement="bottom"
-                    overlay={
-                      <div className="tp-content">
-                        {"请输入" + props.colName}
-                      </div>
-                    }
-                  >
-                    <Icon className="uf-exc-t required-icon" />
-                  </Tooltip>
-                )
-              }
-            ]
-          })}
-        />
-        <span className="error">{getFieldError("value")}</span>
+  handleChange = value => {
+    const { onChange, throwError } = this.props;
+    if (value === "") {
+      throwError && throwError(true);
+    } else {
+      throwError && throwError(false);
+    }
+    this.setState({ value });
+    onChange && onChange(value);
+  };
+
+  render() {
+    const { editable, required, colName } = this.props;
+    const { value } = this.state;
+    let cls = "editable-cell-input-wrapper";
+    if (required) cls += " required";
+    if (value === "") cls += " verify-cell";
+    return editable ? (
+      <div className="editable-cell">
+        <div className={cls}>
+          <FormControl value={value} onChange={this.handleChange} />
+          <span className="error">
+            {value === "" ? (
+              <Tooltip
+                inverse
+                className="u-editable-table-tp"
+                placement="bottom"
+                overlay={<div className="tp-content">{"请输入" + colName}</div>}
+              >
+                <Icon className="uf-exc-t required-icon" />
+              </Tooltip>
+            ) : null}
+          </span>
+        </div>
       </div>
-    </div>
-  ) : (
-    value || " "
-  );
+    ) : (
+      value || " "
+    );
+  }
 }
 
 const SELECT_SOURCE = ["男", "女"];
 
-class SelectEditCell extends PureComponent {
+class SelectEditCell extends Component {
   constructor(props, context) {
     super(props);
+    this.state = {
+      value: props.value
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!nextProps.editable) {
+      this.setState({ value: nextProps.value });
+    }
   }
 
   handleSelect = value => {
+    this.setState({ value });
     this.props.onChange && this.props.onChange(value);
   };
 
   render() {
-    const { value, editable } = this.props;
+    const { editable } = this.props;
+    const { value } = this.state;
+    let cls = "editable-cell-input-wrapper";
     return editable ? (
       <div className="editable-cell">
-        <div className="editable-cell-input-wrapper">
-          <Select value={this.props.value} onSelect={this.handleSelect}>
+        <div className={cls}>
+          <Select value={value} onSelect={this.handleSelect}>
             {SELECT_SOURCE.map((item, index) => (
               <Option key={index} value={item}>
                 {item}
@@ -252,18 +266,29 @@ const option = {
 };
 
 const RefEditCell = Form.createForm()(
-  class RefComponentWarpper extends PureComponent {
+  class RefComponentWarpper extends Component {
     constructor(props, context) {
       super(props);
+      this.state = {
+        value: props.value
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (!nextProps.editable) {
+        this.setState({ value: nextProps.value });
+      }
     }
 
     handleSelect = values => {
+      this.setState({ value: values[0] });
       this.props.onChange && this.props.onChange(values[0]);
     };
 
     render() {
       const { getFieldProps, getFieldError } = this.props.form;
-      const { value, editable, required } = this.props;
+      const { editable, required } = this.props;
+      const { value } = this.state;
       let cls = "editable-cell-input-wrapper";
       if (required) cls += " required";
       if (getFieldError("refValue")) cls += " verify-cell";
@@ -428,7 +453,14 @@ class Demo0501 extends Component {
       }
     ];
 
-    this.originData = {};
+    this.state = {
+      dataSource: dataSource,
+      editingRowsMap: {},
+      currentIndex: null,
+      errorEditFlag: false
+    };
+
+    this.dataBuffer = {};
   }
 
   edit = index => () => {
@@ -436,17 +468,15 @@ class Demo0501 extends Component {
     let editingRowsMap = { ...this.state.editingRowsMap };
     editingRowsMap[index] = index.toString();
     // 最好使用深复制
-    this.originData[index] = { ...this.state.dataSource[index] };
+    this.dataBuffer[index] = { ...this.state.dataSource[index] };
     this.setState({ editingRowsMap });
   };
 
   abortEdit = index => () => {
     let editingRowsMap = { ...this.state.editingRowsMap };
-    let dataSource = [...this.state.dataSource];
-    dataSource[index] = this.originData[index];
     delete editingRowsMap[index];
-    delete this.originData[index];
-    this.setState({ editingRowsMap, dataSource });
+    delete this.dataBuffer[index];
+    this.setState({ editingRowsMap });
   };
 
   delete = index => () => {
@@ -462,13 +492,13 @@ class Demo0501 extends Component {
     if (this.state.errorEditFlag) return;
     let editingRowsMap = { ...this.state.editingRowsMap };
     delete editingRowsMap[index];
-    this.setState({ editingRowsMap });
+    let dataSource = [...this.state.dataSource];
+    dataSource[index] = { ...this.dataBuffer[index] };
+    this.setState({ editingRowsMap,  dataSource });
   };
 
   onCellChange = (index, key) => value => {
-    let dataSource = [...this.state.dataSource];
-    dataSource[index][key] = value;
-    this.setState({ dataSource });
+    this.dataBuffer[index][key] = value;
   };
 
   throwError = isError => {

demo/demolist/Demo0505.js

@@ -5,15 +5,24 @@
  * @description 以行内编辑形式对全表数据进行编辑
  * demo0505
  */
-import React, { Component, PureComponent } from "react";
+import React, { Component } from "react";
 import Table from "../../src";
 import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
 const Option = Select.Option;
 import { RefTreeWithInput } from "ref-tree";
 
-class StringEditCell extends PureComponent {
+class StringEditCell extends Component {
   constructor(props, context) {
     super(props);
+    this.state = {
+      value: props.value
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!nextProps.editable) {
+      this.setState({ value: nextProps.value });
+    }
   }
 
   handleChange = value => {
@@ -23,11 +32,13 @@ class StringEditCell extends PureComponent {
     } else {
       throwError && throwError(false);
     }
+    this.setState({ value });
     onChange && onChange(value);
   };
 
   render() {
-    const { value, editable, required, colName, isEdited } = this.props;
+    const { editable, required, colName, isEdited } = this.props;
+    const { value } = this.state;
     let cls = "editable-cell-input-wrapper";
     if (required) cls += " required";
     if (value === "") cls += " verify-cell";
@@ -58,23 +69,34 @@ class StringEditCell extends PureComponent {
 
 const SELECT_SOURCE = ["男", "女"];
 
-class SelectEditCell extends PureComponent {
+class SelectEditCell extends Component {
   constructor(props, context) {
     super(props);
+    this.state = {
+      value: props.value
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!nextProps.editable) {
+      this.setState({ value: nextProps.value });
+    }
   }
 
   handleSelect = value => {
+    this.setState({ value });
     this.props.onChange && this.props.onChange(value);
   };
 
   render() {
-    const { value, editable, isEdited } = this.props;
+    const { editable, isEdited } = this.props;
+    const { value } = this.state;
     let cls = "editable-cell-input-wrapper";
     if (isEdited) cls += " edited";
     return editable ? (
       <div className="editable-cell">
         <div className={cls}>
-          <Select value={this.props.value} onSelect={this.handleSelect}>
+          <Select value={value} onSelect={this.handleSelect}>
             {SELECT_SOURCE.map((item, index) => (
               <Option key={index} value={item}>
                 {item}
@@ -246,18 +268,29 @@ const option = {
 };
 
 const RefEditCell = Form.createForm()(
-  class RefComponentWarpper extends PureComponent {
+  class RefComponentWarpper extends Component {
     constructor(props, context) {
       super(props);
+      this.state = {
+        value: props.value
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (!nextProps.editable) {
+        this.setState({ value: nextProps.value });
+      }
     }
 
     handleSelect = values => {
+      this.setState({ value: values[0] });
       this.props.onChange && this.props.onChange(values[0]);
     };
 
     render() {
       const { getFieldProps, getFieldError } = this.props.form;
-      const { value, editable, required, isEdited } = this.props;
+      const { editable, required, isEdited } = this.props;
+      const { value } = this.state;
       let cls = "editable-cell-input-wrapper";
       if (required) cls += " required";
       if (getFieldError("refValue")) cls += " verify-cell";
@@ -420,7 +453,7 @@ class Demo0505 extends Component {
     ];
 
     // 用于记录数据是否被修改
-    dataSource.forEach(item => item.isEdited = {});
+    dataSource.forEach(item => (item.isEdited = {}));
     this.state = {
       dataSource: dataSource,
       isEditingAll: false,
@@ -429,36 +462,38 @@ class Demo0505 extends Component {
     };
 
     // 用于记录编辑前数据
-    this.originData = [];
+    this.dataBuffer = [];
   }
 
   edit = () => {
-    this.originData = [];
+    this.dataBuffer = [];
     // 最好使用深复制
-    this.state.dataSource.forEach(item => this.originData.push({ ...item }));
+    this.state.dataSource.forEach((item, index) => {
+      this.dataBuffer.push({ ...item });
+    });
     this.setState({ isEditingAll: true });
   };
 
   abortEdit = () => {
-    this.originData.forEach(item => item.isEdited = {});
+    let originData = [...this.state.dataSource];
+    originData.forEach(item => (item.isEdited = {}));
     this.setState({
       isEditingAll: false,
-      dataSource: [...this.originData]
+      dataSource: originData
     });
   };
 
   commitChange = () => {
     if (this.state.errorEditFlag) return;
-    let dataSource = [...this.state.dataSource];
-    dataSource.forEach(item => item.isEdited = {});
-    this.setState({ isEditingAll: false });
+    const newData = this.dataBuffer.map(item => {
+      return Object.assign({}, item, { isEdited: {} });
+    });
+    this.setState({ isEditingAll: false, dataSource: newData });
   };
 
   onCellChange = (index, key) => value => {
-    let dataSource = [...this.state.dataSource];
-    dataSource[index][key] = value;
-    dataSource[index].isEdited[key] = true;
-    this.setState({ dataSource }, () => console.table(this.originData));
+    this.dataBuffer[index][key] = value;
+    this.dataBuffer[index].isEdited[key] = true;
   };
 
   throwError = isError => {
@@ -466,11 +501,6 @@ class Demo0505 extends Component {
       this.setState({ errorEditFlag: isError });
   };
 
-  setEditedRowClass = (record, index, indent) => {
-    if (Object.keys(record.isEdited).length > 0) return "u-row-select";
-    return "";
-  }
-
   render() {
     const { dataSource, isEditingAll } = this.state;
     const columns = this.columns;
@@ -496,7 +526,7 @@ class Demo0505 extends Component {
             </Button>
           )}
         </div>
-        <Table data={dataSource} columns={columns} height={40} rowClassName={this.setEditedRowClass} />
+        <Table data={dataSource} columns={columns} height={40} />
       </div>
     );
   }