merge

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) {
+class StringEditCell extends Component {
-  const { onChange, throwError } = WarpCompProps;
+  constructor(props, context) {
-  if (field.value === "") return throwError && throwError(true);
+    super(props);
-  throwError && throwError(false);
+    this.state = {
-  onChange && onChange(field.value);
+      value: props.value
-}
+    };
+  }
 
-const StringEditCell = Form.createForm({
+  componentWillReceiveProps(nextProps) {
-  onValuesChange: handleFormValueChange
+    if (!nextProps.editable) {
-})(PureStringEditCell);
+      this.setState({ value: nextProps.value });
+    }
+  }
 
-function PureStringEditCell(props) {
+  handleChange = value => {
-  const { getFieldProps, getFieldError } = props.form;
+    const { onChange, throwError } = this.props;
-  const { value, editable, required } = props;
+    if (value === "") {
-  let cls = "editable-cell-input-wrapper";
+      throwError && throwError(true);
-  if (required) cls += " required";
+    } else {
-  if (getFieldError("value")) cls += " verify-cell";
+      throwError && throwError(false);
-  return editable ? (
+    }
-    <div className="editable-cell">
+    this.setState({ value });
-      <div className={cls}>
+    onChange && onChange(value);
-        <FormControl
+  };
-          {...getFieldProps("value", {
+
-            initialValue: value,
+  render() {
-            validateTrigger: "onBlur",
+    const { editable, required, colName } = this.props;
-            rules: [
+    const { value } = this.state;
-              {
+    let cls = "editable-cell-input-wrapper";
-                required: true,
+    if (required) cls += " required";
-                message: (
+    if (value === "") cls += " verify-cell";
-                  <Tooltip
+    return editable ? (
-                    inverse
+      <div className="editable-cell">
-                    className="u-editable-table-tp"
+        <div className={cls}>
-                    placement="bottom"
+          <FormControl value={value} onChange={this.handleChange} />
-                    overlay={
+          <span className="error">
-                      <div className="tp-content">
+            {value === "" ? (
-                        {"请输入" + props.colName}
+              <Tooltip
-                      </div>
+                inverse
-                    }
+                className="u-editable-table-tp"
-                  >
+                placement="bottom"
-                    <Icon className="uf-exc-t required-icon" />
+                overlay={<div className="tp-content">{"请输入" + colName}</div>}
-                  </Tooltip>
+              >
-                )
+                <Icon className="uf-exc-t required-icon" />
-              }
+              </Tooltip>
-            ]
+            ) : null}
-          })}
+          </span>
-        />
+        </div>
-        <span className="error">{getFieldError("value")}</span>
       </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">
+        <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}
@@ -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];
+    delete this.dataBuffer[index];
-    this.setState({ editingRowsMap, dataSource });
+    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];
+    this.dataBuffer[index][key] = value;
-    dataSource[index][key] = value;
-    this.setState({ dataSource });
   };
 
   throwError = isError => {
@@ -501,9 +531,6 @@ class Demo0501 extends Component {
         <Button colors="dark" onClick={this.edit(currentIndex)}>
           编辑
         </Button>
-        <Button colors="dark" onClick={this.delete(currentIndex)}>
-          删除
-        </Button>
       </div>
     );
   };

demo/demolist/Demo0503.js

@@ -362,18 +362,18 @@ class EditModal extends Component {
       <Modal
         show={show}
         onHide={onHide}
-        style={{ width: 700 }}
+        style={{ width: 800 }}
         className="demo0503-m-b"
       >
         <Modal.Header closeButton>
           <Modal.Title>编辑行</Modal.Title>
         </Modal.Header>
-        <Modal.Body >
+        <Modal.Body>
-          <Row style={{ width: 660, margin: "0 auto" }}>
+          <Row style={{ width: 770, margin: "0 auto" }}>
             {
               columns.map((item, index) => {
                 return (
-                  <Col sm={6} md={6} lg={6} style={{ padding: 0 }} key={index}>
+                  <Col sm={6} md={6} lg={6} style={{ padding: "0 0 0 10px" }} key={index}>
                     <FormGroup>
                       <Label>{item.title}</Label>
                       {this.renderElm[item.key] &&
@@ -396,7 +396,7 @@ class EditModal extends Component {
             }
           </Row>
         </Modal.Body>
-        <Modal.Footer style={{textAlign: "center"}}>
+        <Modal.Footer style={{textAlign: "right"}}>
           <Button
             colors="dark"
             className="btn-abort"

demo/demolist/Demo0503.scss

@@ -9,6 +9,10 @@
     }
   }
 
+  .u-modal .u-modal-body {
+    padding: 16px 0;
+  }
+
   .u-form-group {
     overflow: hidden;
   }
@@ -17,17 +21,17 @@
     font-size: 12px;
   }
 
-  .u-modal-title {
-    text-align: center;
-  }
-
   .editable-cell {
     display: block;
     float: left;
-    width: 220px;
+    width: 265px;
     padding-right: 25px;
   }
 
+  .ref-input-wrap {
+    width: 240px !important;
+  }
+
   .u-label {
     display: block;
     float: left;
@@ -47,7 +51,7 @@
       top: 9px;
       left: -9px;
       color: red;
-      font-size: 18px;
+      font-size: 14px;
     }
   }
 

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];
+    const newData = this.dataBuffer.map(item => {
-    dataSource.forEach(item => item.isEdited = {});
+      return Object.assign({}, item, { isEdited: {} });
-    this.setState({ isEditingAll: false });
+    });
+    this.setState({ isEditingAll: false, dataSource: newData });
   };
 
   onCellChange = (index, key) => value => {
-    let dataSource = [...this.state.dataSource];
+    this.dataBuffer[index][key] = value;
-    dataSource[index][key] = value;
+    this.dataBuffer[index].isEdited[key] = true;
-    dataSource[index].isEdited[key] = true;
-    this.setState({ dataSource }, () => console.table(this.originData));
   };
 
   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>
     );
   }

dist/demo.css

@@ -925,21 +925,24 @@
   .demo0503-m-b button.btn-abort:hover {
     background-color: #eff0f3 !important; }
 
+.demo0503-m-b .u-modal .u-modal-body {
+  padding: 16px 0; }
+
 .demo0503-m-b .u-form-group {
   overflow: hidden; }
 
 .demo0503-m-b .u-form-control {
   font-size: 12px; }
 
-.demo0503-m-b .u-modal-title {
-  text-align: center; }
-
 .demo0503-m-b .editable-cell {
   display: block;
   float: left;
-  width: 220px;
+  width: 265px;
   padding-right: 25px; }
 
+.demo0503-m-b .ref-input-wrap {
+  width: 240px !important; }
+
 .demo0503-m-b .u-label {
   display: block;
   float: left;
@@ -957,7 +960,7 @@
   top: 9px;
   left: -9px;
   color: red;
-  font-size: 18px; }
+  font-size: 14px; }
 
 .demo0503-m-b .required-icon {
   position: absolute;