行编辑half done

demo/demolist/Demo501.js

@@ -5,7 +5,7 @@
  *
  */
 import React, { Component } from "react";
-import { Table } from "tinper-bee";
+import Table from "../../src";
 import { Icon, Select, Tooltip } from "tinper-bee";
 const Option = Select.Option;
 
@@ -58,6 +58,7 @@ class StringEditCell extends Component {
             {value === "" ? (
               <Tooltip
                 inverse
+                className="tp-501"
                 placement="bottom"
                 overlay={
                   <div className="help-tip">
@@ -136,11 +137,11 @@ class SelectEditCell extends Component {
 }
 
 const dataSource = [
-  { name: "全能法戒", quality: "远古传奇", level: 70.11 },
-  { name: "绝命", quality: "太古传奇", level: 70 },
-  { name: "蚀刻符印", quality: "太古传奇", level: 70 },
-  { name: "虹光", quality: "传奇", level: 70 },
-  { name: "复仇者护腕", quality: "传奇", level: 70 }
+  { name: "全能法戒", quality: "远古传奇", level: 70, key: "1" },
+  { name: "绝命", quality: "太古传奇", level: 70, key: "2" },
+  { name: "蚀刻符印", quality: "太古传奇", level: 70, key: "3" },
+  { name: "虹光", quality: "传奇", level: 70, key: "4" },
+  { name: "复仇者护腕", quality: "传奇", level: 70, key: "5" }
 ];
 
 class Demo501 extends Component {

demo/demolist/Demo501.scss

@@ -4,6 +4,7 @@
       border: 1px dashed #A5ADBA;
     }
   }
+
   .require {
     position: absolute;
     top: 2px;
@@ -11,12 +12,17 @@
     font-size: 20px;
   }
 }
+
 .help-tip {
   color: #F44336;
 }
+
+.tp-501 {
   .tooltip-arrow {
     border-bottom-color: #F44336 !important;
   }
+
   .tooltip-inner {
     border-color: #F44336 !important;
   }
+}

demo/demolist/Demo502.js

@@ -5,8 +5,8 @@
  *
  */
 import React, { Component } from "react";
-import { Table } from "tinper-bee";
-import { Icon, FormControl } from "tinper-bee";
+import Table from "../../src";
+import { Button, FormControl } from "tinper-bee";
 
 class EditableCell extends Component {
   constructor(props, context) {
@@ -42,37 +42,27 @@ class EditableCell extends Component {
   }
 }
 
-const dataSource = [
-  { name: "全能法戒", quality: "远古传奇", level: 70 },
-  { name: "绝命", quality: "太古传奇", level: 70 },
-  { name: "蚀刻符印", quality: "太古传奇", level: 70 },
-  { name: "虹光", quality: "传奇", level: 70 },
-  { name: "复仇者护腕", quality: "传奇", level: 70 }
+let dataSource = [
+  { name: "全能法戒", quality: "远古传奇", level: 70, key: "1" },
+  { name: "绝命", quality: "太古传奇", level: 70, key: "2" },
+  { name: "蚀刻符印", quality: "太古传奇", level: 70, key: "3" },
+  { name: "虹光", quality: "传奇", level: 70, key: "4" },
+  { name: "复仇者护腕", quality: "传奇", level: 70, key: "5" }
 ];
 
+for (let i = 5; i < 10; i++) {
+  dataSource.push({
+    name: "复仇者护腕",
+    quality: "传奇",
+    level: 70,
+    key: i + 1 + ""
+  });
+}
+
 class Demo502 extends Component {
   constructor(props, context) {
     super(props);
     this.columns = [
-      {
-        key: "row_edit",
-        width: "45px",
-        render: (text, record, index) => {
-          return this.state.editingRows.indexOf(index) > -1 ? (
-            <Icon
-              type="uf-correct"
-              className="editable-row-icon-check"
-              onClick={this.commitChange(index)}
-            />
-          ) : (
-            <Icon
-              type="uf-pencil"
-              className="editable-row-icon"
-              onClick={this.edit(index)}
-            />
-          );
-        }
-      },
       {
         title: "装备名称",
         dataIndex: "name",
@@ -101,6 +91,7 @@ class Demo502 extends Component {
         title: "需求等级",
         dataIndex: "level",
         key: "level",
+        width: 100,
         render: (text, record, index) => (
           <EditableCell
             editable={this.state.editingRows.indexOf(index) > -1}
@@ -108,6 +99,10 @@ class Demo502 extends Component {
             onChange={this.onCellChange(index, "level")}
           />
         )
+      },
+      {
+        key: "placeholder",
+        dataIndex: "undefined"
       }
     ];
 
@@ -117,15 +112,38 @@ class Demo502 extends Component {
     };
 
     this.dataBuffer = {};
+    this.currentIndex = null;
+    this.currentRecord = null;
+    this.__OPTS_BTN_GROUP__ = null;
+  }
+
+  createBtn = (text, props, event) => {
+    let btn = document.createElement("button");
+    btn.innerText = text;
+    for (let pKey in props) {
+      btn.setAttribute(pKey, props[pKey]);
+    }
+    for (let eKey in event) {
+      btn.addEventListener(eKey, event[eKey]);
+    }
+    return btn
   }
 
   edit = index => () => {
+    if (index === null) return;
     let editingRows = [...this.state.editingRows];
     editingRows.push(index);
     this.dataBuffer[index] = Object.assign({}, dataSource[index]);
     this.setState({ editingRows });
   };
 
+  abortEdit = () => {
+    let editingRows = [...this.state.editingRows];
+    editingRows.splice(index, 1);
+    delete this.dataBuffer[index];
+    this.setState({ editingRows });
+  };
+
   commitChange = index => () => {
     let editingRows = [...this.state.editingRows];
     let dataSource = [...this.state.dataSource];
@@ -144,7 +162,12 @@ class Demo502 extends Component {
     const columns = this.columns;
     return (
       <div className="demo502">
-        <Table data={dataSource} columns={columns} />
+        <Table
+          data={dataSource}
+          columns={columns}
+          onRowHover={this.handleRowHover}
+          hoverContent={this.renderRowHover}
+        />
       </div>
     );
   }

demo/demolist/Demo502.scss

@@ -1,15 +1,15 @@
 .demo502 {
-  .u-table-row-hover {
-      .editable-row-icon,
-      .editable-row-icon-check {
-          display: block !important;
-      }
-  }
   .u-table-row {
     height: 58px;
-      .editable-row-icon,
-      .editable-row-icon-check {
-          display: none;
+  }
+  .u-row-hover {
+    .opt-btns {
+      button {
+        border-radius: 5px;
+        &:first-child {
+          margin-right: 10px;
+        }
+      }
     }
   }
 }

demo/demolist/Demo503.js

@@ -43,11 +43,11 @@ class EditableCell extends Component {
 }
 
 const dataSource = [
-  { name: "全能法戒", quality: "远古传奇", level: 70 },
-  { name: "绝命", quality: "太古传奇", level: 70 },
-  { name: "蚀刻符印", quality: "太古传奇", level: 70 },
-  { name: "虹光", quality: "传奇", level: 70 },
-  { name: "复仇者护腕", quality: "传奇", level: 70 }
+  { name: "全能法戒", quality: "远古传奇", level: 70, key: "1" },
+  { name: "绝命", quality: "太古传奇", level: 70, key: "2" },
+  { name: "蚀刻符印", quality: "太古传奇", level: 70, key: "3" },
+  { name: "虹光", quality: "传奇", level: 70, key: "4" },
+  { name: "复仇者护腕", quality: "传奇", level: 70, key: "5" }
 ];
 
 class Demo503 extends Component {

dist/demo.css

@@ -9904,21 +9904,19 @@ ul {
 .help-tip {
   color: #F44336; }
 
-.tooltip-arrow {
+.tp-501 .tooltip-arrow {
   border-bottom-color: #F44336 !important; }
 
-.tooltip-inner {
+.tp-501 .tooltip-inner {
   border-color: #F44336 !important; }
 
-.demo502 .u-table-row-hover .editable-row-icon,
-.demo502 .u-table-row-hover .editable-row-icon-check {
-  display: block !important; }
-
 .demo502 .u-table-row {
   height: 58px; }
-  .demo502 .u-table-row .editable-row-icon,
-  .demo502 .u-table-row .editable-row-icon-check {
-    display: none; }
+
+.demo502 .u-row-hover .opt-btns button {
+  border-radius: 5px; }
+  .demo502 .u-row-hover .opt-btns button:first-child {
+    margin-right: 10px; }
 
 th .drop-menu .uf {
   font-size: 12px;

src/Table.js

@@ -1207,6 +1207,7 @@ class Table extends Component {
     if (props.size) {
       className += ` ${clsPrefix}-${props.size}`;
     }
+    console.log("update");
 
     return (
       <div className={className} style={props.style} ref={el => this.contentTable = el}