Merge branch 'master' of github.com:tinper-bee/bee-table

demo/demolist/Demo0501.js

@@ -365,6 +365,13 @@ let dataSource = [
 class Demo0501 extends Component {
   constructor(props, context) {
     super(props);
+    this.state = {
+      dataSource: dataSource,
+      editingRowsMap: {},
+      currentIndex: null,
+      errorEditFlag: false
+    };
+
     this.columns = [
       {
         title: "员工编号",
@@ -421,13 +428,6 @@ class Demo0501 extends Component {
       }
     ];
 
-    this.state = {
-      dataSource: dataSource,
-      editingRowsMap: {},
-      currentIndex: null,
-      errorEditFlag: false
-    };
-
     this.originData = {};
   }
 
@@ -449,6 +449,15 @@ class Demo0501 extends Component {
     this.setState({ editingRowsMap, dataSource });
   };
 
+  delete = index => () => {
+    if (index === null) return;
+    let { dataSource } = this.state;
+    dataSource.splice(index,1);
+    this.setState({
+      dataSource:dataSource
+    });
+  }
+
   commitChange = index => () => {
     if (this.state.errorEditFlag) return;
     let editingRowsMap = { ...this.state.editingRowsMap };
@@ -492,6 +501,9 @@ class Demo0501 extends Component {
         <Button colors="dark" onClick={this.edit(currentIndex)}>
           编辑
         </Button>
+        <Button colors="dark" onClick={this.delete(currentIndex)}>
+          删除
+        </Button>
       </div>
     );
   };

demo/demolist/Demo1201.js

@@ -11,28 +11,11 @@ import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";
 
 const columns = [
-  {
+  { title: "员工编号", dataIndex: "a", key: "a", width: 150 },
-    title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
-    fixed:'left',
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "block",
-            width: "80px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
   { title: "员工姓名", dataIndex: "b", key: "b", width:200 },
   { title: "性别", dataIndex: "c", key: "c", width: 500 },
   { title: "部门", dataIndex: "d", key: "d", width: 100 },
-  { title: "职级", dataIndex: "e", key: "e", width: 100,fixed:'right'}
+  { title: "职级", dataIndex: "e", key: "e", width: 100 }
 ];
 
 const data = [

dist/demo.css

@@ -143,25 +143,22 @@
     cursor: pointer;
     display: inline-block;
     margin-right: 0px;
-    width: 16px;
+    width: 14px;
-    height: 16px;
+    height: 14px;
     text-align: center;
     line-height: 14px;
-    border: 1px solid rgb(193, 199, 208);
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    background: #fff;
     margin-right: 10px; }
+    .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
+      font-size: 12px;
+      padding: 0; }
   .u-table-row-spaced, .u-table-expanded-row-spaced {
     visibility: hidden; }
   .u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
     content: "."; }
-  .u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
-    content: "-"; }
-  .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
-    content: "+"; }
   .u-table-row.selected {
     background: #FFF7E7; }
   .u-table tr.u-table-expanded-row {

docs/api.md

@@ -122,21 +122,22 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
 
 ### multiSelect 多选功能
 
-#### multiSelect:API
+#### API
 
 Data 数组参数：
 
 | 参数                  | 说明                         | 类型       | 默认值      |
 | ------------------- | -------------------------- | -------- | -------- |
-| _checked         | 设置是否选中当前数据（设置在data数组中）           |  boolean      | true/false       |
+| _checked         | 设置是否选中当前数据           |  boolean      | true/false       |
-| _disabled   | 设置是否禁用当前数据（设置在data数组中）     |  boolean      | true/false     
+| _disabled   | 设置是否禁用当前数据     |  boolean      | true/false     |
 
 Table 组件参数：
-| 参数                  | 说明                         | 类型       | 默认值      |
-| ------------------- | -------------------------- | -------- | -------- |   
-| getSelectedDataFunc | 返回当前选中的数据数组（设置在Table组件上）                | Function | 无        |
 
-#### multiSelect:使用
+| 参数     | 说明         | 类型       | 默认值  |
+| ------ | ---------- | -------- | ---- |
+| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无    |
+
+#### 使用
 
 ```js
 import multiSelect from "tinper-bee/lib/multiSelect.js";
@@ -148,7 +149,7 @@ const MultiSelectTable = multiSelect(Table, Checkbox);
 
 ### sort 排序功能
 
-#### sort:API
+#### API
 
 column 数组参数：
 
@@ -157,7 +158,7 @@ column 数组参数：
 | sorter | 排序函数，可以自定义 | Function | 无    |
 | sorterClick | 排序钩子函数| Function | (coloum,type)    |
 
-#### sort:使用
+#### 使用
 
 ```js
 import sort from "tinper-bee/lib/sort.js";
@@ -169,7 +170,7 @@ const SortTable = sort(Table, Icon);
 
 ### sum 合计功能
 
-#### sum:API
+#### API
 
 column 数组参数：
  
@@ -177,7 +178,7 @@ column 数组参数：
 | ------ | ---------- | -------- | ---- |
 | sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
 
-#### sum:使用
+#### 使用
 
 ```js
 import sum from "tinper-bee/lib/sum.js";
@@ -189,7 +190,7 @@ const SumTable = sum(Table);
 
 ### dragColumn 拖拽列功能
 
-#### dragColumn:API
+#### API
 
 Table 组件参数：
 
@@ -200,7 +201,7 @@ Table 组件参数：
 | onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
 | onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
 
-#### dragColumn:使用
+#### 使用
 
 ```js
 import dragColumn from "tinper-bee/lib/dragColumn.js";
@@ -212,11 +213,11 @@ const DragColumnTable = dragColumn(Table);
 
 ### filterColumn 过滤功能
 
-#### filterColumn:API
+#### API
 
 无
 
-#### filterColumn:使用
+#### 使用
 
 ```js
 import filterColumn from "tinper-bee/lib/filterColumn.js";
@@ -241,12 +242,12 @@ import renderInput from "tinper-bee/lib/InputRender.js";
 
 输入框类型render
 
-#### InputRender:依赖的组件
+#### 依赖的组件
 
 该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。
 
 
-#### InputRender:配置
+#### 配置
 
 | 参数                | 说明                                       | 类型         | 默认值    |
 | ----------------- | ---------------------------------------- | ---------- | ------ |
@@ -265,7 +266,7 @@ import renderInput from "tinper-bee/lib/InputRender.js";
 | htmlType          | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string     | -      |
 | reg               | 校验正则，注：设置 htmlType 后 reg 无效              | regExp     | -      |
 
-#### InputRender:使用
+#### 使用
 
 ```js
 import renderInput from "tinper-bee/lib/InputRender.js";
@@ -278,12 +279,12 @@ const InputRender = renderInput(Form, FormControl, Icon);
 
 日期类型render
 
-#### DateRender:依赖的组件
+#### 依赖的组件
 
 该render依赖于`moment`, `Datepicker`, `Icon`
 
 
-#### DateRender:配置
+#### 配置
 
 | 参数                | 说明                                       | 类型         | 默认值    |
 | ----------------- | ---------------------------------------- | ---------- | ------ |
@@ -308,11 +309,11 @@ const DateRender = renderDate(Datepicker, Icon);
 
 下拉框类型render
 
-#### SelectRender:依赖的组件
+#### 依赖的组件
 该render依赖于`Icon`,`Select`
 
 
-#### SelectRender:配置
+#### 配置
 
 | 参数             | 说明                                       | 类型      | 默认值   |
 | -------------- | ---------------------------------------- | ------- | ----- |
@@ -335,12 +336,12 @@ const SelectRender = renderSelect(Select, Icon);
 
 复选框类型render
 
-#### CheckboxRender:依赖的组件
+#### 依赖的组件
 
 该render依赖于`Icon`,`Checkbox`
 
 
-#### CheckboxRender:配置
+#### 配置
 
 | 参数             | 说明                                       | 类型      | 默认值   |
 | -------------- | ---------------------------------------- | ------- | ----- |
@@ -351,7 +352,7 @@ const SelectRender = renderSelect(Select, Icon);
 
 注:其他参数参见Checkbox组件参数配置
 
-#### CheckboxRender:使用
+#### 使用
 
 ```js
 import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";

docs/menu.json

@@ -79,47 +79,18 @@
     "API": {
         "Table": "",
         "Column": "",
-        "高阶函数": "",
+        "高阶函数": {
-        "multiSelect 多选功能": {
+            "multiSelect 多选功能": "",
-            "multiSelect:API":"",
+            "sort 排序功能": "",
-            "multiSelect:使用":""
+            "sum 合计功能": "",
+            "dragColumn 拖拽列功能": "",
+            "filterColumn 过滤功能": ""
         },
-        "sort 排序功能": {
+        "rendertype":{
-            "sort:API":"",
+            "InputRender": "",
-            "sort:使用":""
+            "DateRender": "",
-        },
+            "SelectRender": "",
-        "sum 合计功能": {
+            "CheckboxRender": ""
-            "sum:API":"",
-            "sum:使用":""
-        },
-        "dragColumn 拖拽列功能": {
-            "dragColumn:API":"",
-            "dragColumn:使用":""
-        },
-        "filterColumn 过滤功能": {
-            "filterColumn:API":"",
-            "filterColumn:使用":""
-        },
-        "rendertype":"",
-        "InputRender": {
-            "InputRender:依赖的组件":"",
-            "InputRender:配置":"",
-            "InputRender:使用":""
-        },
-        "DateRender": {
-            "DateRender:依赖的组件":"",
-            "DateRender:配置":"",
-            "DateRender:使用":""
-        },
-        "SelectRender": {
-            "SelectRender:依赖的组件":"",
-            "SelectRender:配置":"",
-            "SelectRender:使用":""
-        },
-        "CheckboxRender": {
-            "CheckboxRender:依赖的组件":"",
-            "CheckboxRender:配置":"",
-            "CheckboxRender:使用":""
         },
         "快捷键API":""
     },

src/ExpandIcon.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
+import Icon from 'bee-icon';
 
 const propTypes = {
     record: PropTypes.object,
@@ -23,8 +24,9 @@ class ExpandIcon extends Component{
     if (expandable && !isHiddenExpandIcon) {
       const expandClassName = expanded ? 'expanded' : 'collapsed';
       return (
-        <span
+        <Icon
           className={`${clsPrefix}-expand-icon ${clsPrefix}-${expandClassName}`}
+          type={expanded ? 'uf-triangle-down' : 'uf-triangle-right'}
           onClick={(e) => onExpand(!expanded, record, e)}
         />
       );

src/Table.scss

@@ -267,14 +267,16 @@ $icon-color:#505F79;
       cursor: pointer;
       display: inline-block;
       margin-right: 0px;
-      width: 16px;
+      width: 14px;
-      height: 16px;
+      height: 14px;
       text-align: center;
       line-height: 14px;
-      border: 1px solid $table-border-color;
       user-select: none;
-      background: #fff;
       margin-right: 10px;
+      &.uf{
+        font-size: 12px;
+        padding: 0;
+      }
     }
     &-spaced {
       visibility: hidden;
@@ -282,14 +284,6 @@ $icon-color:#505F79;
     &-spaced:after {
       content: ".";
     }
-
-    &-expanded:after {
-      content: "-";
-    }
-
-    &-collapsed:after {
-      content: "+";
-    }
   }
   &-row{
     &.selected{

src/TableRow.js

@@ -200,6 +200,8 @@ class TableRow extends Component{
      _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
     _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
     
+    _table_trs = _table_trs?_table_trs:contentTable.querySelector('.u-table table tbody');
+
     this.synchronizeTrStyle(_table_trs,currentIndex,type);
     if(_table_fixed_left_trs){
       this.synchronizeTrStyle(_table_fixed_left_trs,currentIndex,type);