@autobest-ui/components 1.1.1 → 1.2.0

package/lib/table/index.js

@@ -15,11 +15,9 @@ var _utils = require("@autobest-ui/utils");
 
 var _loadingContainer = _interopRequireDefault(require("../loading-container"));
 
-var _checkbox = _interopRequireDefault(require("../checkbox"));
+var _HeaderRow = _interopRequireDefault(require("./header/HeaderRow"));
 
-var _HeaderCell = _interopRequireDefault(require("./HeaderCell"));
-
-var _BodyCell = _interopRequireDefault(require("./BodyCell"));
+var _body = _interopRequireDefault(require("./body"));
 
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
@@ -63,20 +61,6 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
-    s += arguments[i].length;
-  }
-
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
-    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
-      r[k] = a[j];
-    }
-  }
-
-  return r;
-};
-
 var Table =
 /** @class */
 function (_super) {
@@ -88,14 +72,26 @@ function (_super) {
     _this.prefixCls = 'ab-table';
     _this.headerRef = _react.default.createRef();
     _this.bodyRef = _react.default.createRef();
+    _this.defaultRowSelection = {
+      selectAllVisible: true,
+      selectAllChecked: false,
+      getDisabled: function getDisabled() {
+        return false;
+      }
+    };
     /**
      * 清空选项
      */
 
     _this.clearSelection = function () {
-      _this.setState({
-        selectedRowKeys: [],
-        isSelectedAll: false
+      _this.setState(function (prevState) {
+        return {
+          selectedRowKeys: [],
+          selectedRows: [],
+          rowSelection: __assign(__assign({}, prevState.rowSelection), {
+            selectAllChecked: false
+          })
+        };
       });
     };
 
@@ -110,102 +106,167 @@ function (_super) {
         }));
       }
     };
+
+    _this.getSelectedRows = function (selectedKeys) {
+      if ((0, _utils.isEmptyArray)(selectedKeys)) {
+        return [];
+      }
+
+      var getRowKey = _this.getRowKey;
+      var dataSource = _this.props.dataSource;
+      return selectedKeys.map(function (key) {
+        return dataSource.find(function (item) {
+          return getRowKey(item) === key;
+        });
+      });
+    };
     /**
      * 点击表头的checkbox，全选或全不选
      */
 
 
-    _this.onSelectAll = function () {
+    _this.onSelectAll = function (checked) {
+      var getRowKey = _this.getRowKey;
       var _a = _this.props,
           dataSource = _a.dataSource,
-          primaryKey = _a.primaryKey,
-          onSelectedRowChange = _a.onSelectedRowChange;
-      var selectedRowKeys = _this.state.selectedRowKeys;
+          rowSelection = _a.rowSelection;
 
-      if (selectedRowKeys.length === dataSource.length) {
-        _this.setState({
-          isSelectedAll: false,
-          selectedRowKeys: []
+      if (checked) {
+        var newSelectedRowKeys_1 = dataSource.map(getRowKey);
+
+        if (rowSelection.onSelectAll) {
+          rowSelection.onSelectAll(true);
+        }
+
+        _this.setState(function (prevState) {
+          return {
+            rowSelection: __assign(__assign({}, prevState.rowSelection), {
+              selectAllChecked: true
+            }),
+            selectedRowKeys: newSelectedRowKeys_1
+          };
         });
 
-        onSelectedRowChange([], []);
+        if (rowSelection.onSelectedRowChange) {
+          rowSelection.onSelectedRowChange(newSelectedRowKeys_1, dataSource);
+        }
+
         return;
       }
 
-      var newSelectedRowKeys = dataSource.map(function (item) {
-        return item[primaryKey];
-      });
+      if (rowSelection.onSelectAll) {
+        rowSelection.onSelectAll(false);
+      }
 
-      _this.setState({
-        isSelectedAll: true,
-        selectedRowKeys: newSelectedRowKeys
+      _this.setState(function (prevState) {
+        return {
+          rowSelection: __assign(__assign({}, prevState.rowSelection), {
+            selectAllChecked: false
+          }),
+          selectedRowKeys: []
+        };
       });
 
-      onSelectedRowChange(newSelectedRowKeys, dataSource);
+      if (rowSelection.onSelectedRowChange) {
+        rowSelection.onSelectedRowChange([], []);
+      }
     };
     /**
      * 点击某一行的checkbook
      * @param visible
-     * @param name
+     * @param rowData
      */
 
 
-    _this.onChange = function (visible, name) {
+    _this.onSelect = function (visible, rowData) {
+      var getRowKey = _this.getRowKey;
       var _a = _this.props,
           dataSource = _a.dataSource,
-          primaryKey = _a.primaryKey,
-          onSelectedRowChange = _a.onSelectedRowChange;
-      var selectedRowKeys = _this.state.selectedRowKeys;
-      var legalResults = selectedRowKeys.filter(function (item) {
-        return !!dataSource.find(function (j) {
-          return j[primaryKey] === item;
-        });
-      });
+          rowSelection = _a.rowSelection;
+      var _b = _this.state,
+          selectedRowKeys = _b.selectedRowKeys,
+          selectedRows = _b.selectedRows;
+      var newRowKey = getRowKey(rowData);
       var newSelectedRowKeys = [];
+      var newSelectedRows = [];
 
       if (visible) {
-        newSelectedRowKeys = __spreadArrays(legalResults, [name]);
-
-        if (newSelectedRowKeys.length === dataSource.length) {
-          _this.setState({
-            isSelectedAll: true
-          });
+        if (!selectedRowKeys.includes(newRowKey)) {
+          newSelectedRowKeys = selectedRowKeys.concat(newRowKey);
+          newSelectedRows = selectedRows.concat(rowData);
         }
-      } else {
-        newSelectedRowKeys = legalResults.filter(function (item) {
-          return item !== name;
+      } else if (selectedRowKeys.includes(newRowKey)) {
+        var result = selectedRowKeys.reduce(function (previousValue, currentValue) {
+          if (currentValue === newRowKey) {
+            return previousValue;
+          }
+
+          var data = dataSource.find(function (data) {
+            return getRowKey(data) === currentValue;
+          });
+
+          if (data) {
+            previousValue.selectedRowKeys.push(currentValue);
+            previousValue.selectedRows.push(data);
+          }
+
+          return previousValue;
+        }, {
+          selectedRowKeys: [],
+          selectedRows: []
         });
+        newSelectedRows = result.selectedRows;
+        newSelectedRowKeys = result.selectedRowKeys;
+      }
 
-        if (legalResults.length === dataSource.length) {
-          _this.setState({
-            isSelectedAll: false
-          });
-        }
+      if (rowSelection.onSelect) {
+        rowSelection.onSelect(visible, rowData, selectedRows);
+      }
+
+      if (!visible && _this.state.rowSelection.selectAllChecked) {
+        _this.setState(function (prevState) {
+          return {
+            rowSelection: __assign(__assign({}, prevState.rowSelection), {
+              selectAllChecked: false
+            })
+          };
+        });
       }
 
       _this.setState({
-        selectedRowKeys: newSelectedRowKeys
+        selectedRowKeys: newSelectedRowKeys,
+        selectedRows: newSelectedRows
       });
 
-      onSelectedRowChange(newSelectedRowKeys, dataSource.filter(function (item) {
-        return newSelectedRowKeys.includes(item[primaryKey]);
-      }));
+      if (rowSelection.onSelectedRowChange) {
+        rowSelection.onSelectedRowChange(newSelectedRowKeys, newSelectedRows);
+      }
     };
-    /**
-     * 点击某一列的表头，触发排序
-     * @param sortName
-     */
 
+    _this.getDisabled = function (rowData) {
+      var rowSelection = _this.props.rowSelection;
 
-    _this.onSort = function (sortName) {
-      var onHeaderClick = _this.props.onHeaderClick;
+      if ('getDisabled' in rowSelection) {
+        var _a = _this.state,
+            selectedRowKeys = _a.selectedRowKeys,
+            selectedRows = _a.selectedRows;
+        return rowSelection.getDisabled(rowData, selectedRowKeys, selectedRows);
+      }
 
-      if (!onHeaderClick) {
-        return;
+      return false;
+    };
+
+    _this.getRowSelection = function () {
+      if (!('rowSelection' in _this.props)) {
+        return null;
       }
 
-      var isSortedDescending = _this.props.sortName === sortName ? !_this.props.isSortedDescending : true;
-      onHeaderClick(isSortedDescending, sortName);
+      var propsRowSelection = _this.props.rowSelection;
+      return __assign(__assign(__assign({}, _this.defaultRowSelection), propsRowSelection), {
+        onSelect: _this.onSelect,
+        onSelectAll: _this.onSelectAll,
+        getDisabled: _this.getDisabled
+      });
     };
     /**
      * 用colgroup设置每一列的宽度
@@ -215,15 +276,15 @@ function (_super) {
     _this.renderColgroup = function () {
       var _a = _this.props,
           columns = _a.columns,
-          onSelectedRowChange = _a.onSelectedRowChange;
-      return _react.default.createElement("colgroup", null, onSelectedRowChange ? _react.default.createElement("col", {
+          rowSelection = _a.rowSelection;
+      return _react.default.createElement("colgroup", null, rowSelection ? _react.default.createElement("col", {
         width: 32
       }) : null, columns.map(function (item) {
         var width = item.width;
 
         if (width) {
           return _react.default.createElement("col", {
-            key: item.fieldName,
+            key: item.key,
             style: {
               width: width,
               minWidth: width
@@ -232,7 +293,7 @@ function (_super) {
         }
 
         return _react.default.createElement("col", {
-          key: item.fieldName
+          key: item.key
         });
       }));
     };
@@ -241,72 +302,53 @@ function (_super) {
       var cls = _this.prefixCls;
       var _a = _this.props,
           columns = _a.columns,
-          onSelectedRowChange = _a.onSelectedRowChange,
           sortName = _a.sortName,
-          isSortedDescending = _a.isSortedDescending;
-      var isSelectedAll = _this.state.isSelectedAll;
-      return _react.default.createElement("thead", null, _react.default.createElement("tr", null, onSelectedRowChange ? _react.default.createElement("th", {
-        className: cls + "-checkbox"
-      }, _react.default.createElement(_checkbox.default, {
-        checked: isSelectedAll,
-        onChange: _this.onSelectAll
-      })) : null, columns.map(function (item) {
-        return _react.default.createElement(_HeaderCell.default, __assign({
-          key: item.fieldName
-        }, item, {
-          prefixCls: cls,
-          isSort: sortName && sortName === item.sortName,
-          isSortedDescending: isSortedDescending,
-          onSort: _this.onSort
-        }));
-      })));
+          isSortedDescending = _a.isSortedDescending,
+          sortIcon = _a.sortIcon,
+          onSortChange = _a.onSortChange;
+      var rowSelection = _this.state.rowSelection;
+      return _react.default.createElement("thead", null, _react.default.createElement(_HeaderRow.default, {
+        prefixCls: cls,
+        columns: columns,
+        sortName: sortName,
+        isSortedDescending: isSortedDescending,
+        sortIcon: sortIcon,
+        onSortChange: onSortChange,
+        rowSelection: rowSelection
+      }));
     };
 
     _this.renderBody = function () {
       var cls = _this.prefixCls;
+      var getRowKey = _this.getRowKey;
       var _a = _this.props,
           columns = _a.columns,
           dataSource = _a.dataSource,
-          primaryKey = _a.primaryKey,
-          onSelectedRowChange = _a.onSelectedRowChange;
-      var selectedRowKeys = _this.state.selectedRowKeys;
-      return _react.default.createElement("tbody", null, dataSource.map(function (item) {
-        var rowKey = item[primaryKey];
-        var checked = selectedRowKeys.includes(rowKey);
-        return _react.default.createElement("tr", {
-          key: rowKey
-        }, onSelectedRowChange ? _react.default.createElement("td", {
-          className: cls + "-checkbox"
-        }, _react.default.createElement(_checkbox.default, {
-          checked: checked,
-          onChange: _this.onChange,
-          name: rowKey
-        })) : null, columns.map(function (subItem, subIndex) {
-          return _react.default.createElement(_BodyCell.default, __assign({
-            key: subItem.fieldName,
-            index: subIndex,
-            rowData: item
-          }, subItem));
-        }));
+          expandable = _a.expandable;
+      var _b = _this.state,
+          rowSelection = _b.rowSelection,
+          selectedRowKeys = _b.selectedRowKeys;
+      return _react.default.createElement("tbody", null, _react.default.createElement(_body.default, {
+        prefixCls: cls,
+        getRowKey: getRowKey,
+        columns: columns,
+        dataSource: dataSource,
+        expandable: expandable,
+        rowSelection: rowSelection,
+        selectedRowKeys: selectedRowKeys
       }));
     };
 
-    var defaultSelectedRowKeys = props.defaultSelectedRowKeys,
-        dataSource = props.dataSource,
-        primaryKey = props.primaryKey;
-    var selectedRowKeys = [];
-
-    if (!(0, _utils.isEmptyArray)(defaultSelectedRowKeys) && !(0, _utils.isEmptyArray)(dataSource)) {
-      selectedRowKeys = defaultSelectedRowKeys.filter(function (item) {
-        return !!dataSource.find(function (j) {
-          return j[primaryKey] === item;
-        });
-      });
-    }
-
+    var rowSelection = props.rowSelection,
+        rowKey = props.rowKey;
+    _this.getRowKey = typeof rowKey === 'string' ? function (data) {
+      return data[rowKey];
+    } : rowKey;
+    var defaultSelectedRowKeys = rowSelection && rowSelection.defaultSelectedRowKeys ? rowSelection.defaultSelectedRowKeys : [];
     _this.state = {
-      isSelectedAll: false,
-      selectedRowKeys: selectedRowKeys
+      selectedRowKeys: defaultSelectedRowKeys,
+      selectedRows: _this.getSelectedRows(defaultSelectedRowKeys),
+      rowSelection: _this.getRowSelection()
     };
     return _this;
   }
@@ -315,27 +357,6 @@ function (_super) {
     this.addScrollListener();
   };
 
-  Table.prototype.componentDidUpdate = function () {
-    var _a = this.props,
-        dataSource = _a.dataSource,
-        onSelectedRowChange = _a.onSelectedRowChange;
-    var _b = this.state,
-        isSelectedAll = _b.isSelectedAll,
-        selectedRowKeys = _b.selectedRowKeys;
-
-    if (onSelectedRowChange && !(0, _utils.isEmptyArray)(dataSource)) {
-      if ((0, _utils.isEmptyArray)(selectedRowKeys) && isSelectedAll) {
-        this.setState({
-          isSelectedAll: false
-        });
-      } else if (selectedRowKeys.length === dataSource.length && !isSelectedAll) {
-        this.setState({
-          isSelectedAll: true
-        });
-      }
-    }
-  };
-
   Table.prototype.componentWillUnmount = function () {
     if (this.scrollHandler) {
       this.scrollHandler.remove();
@@ -375,7 +396,8 @@ function (_super) {
 
   Table.defaultProps = {
     fixedHeader: false,
-    loading: false
+    loading: false,
+    rowKey: 'key'
   };
   return Table;
 }(_react.default.Component);

package/lib/table/interface.d.ts

@@ -1,9 +1,22 @@
 import React from 'react';
-export interface Column {
+export interface ColumnOnRenderReturnObjectInfo {
+    children: React.ReactNode | React.ReactNode[];
+    props: {
+        className?: string;
+        rowSpan?: number;
+        colSpan?: number;
+    };
+}
+export interface Column<T> {
     title: React.ReactNode | React.ReactNode[];
-    fieldName: string;
+    key: string;
+    dataIndex?: string;
+    /**
+     * 当前触发排序的Column的sortName
+     */
     sortName?: string;
     width?: string | number;
     className?: string;
-    onRender?: (rowData: any, index: number) => React.ReactNode | React.ReactNode[];
+    colSpan?: number;
+    onRender?: (rowData: T, rowIndex: number, colIndex: number) => React.ReactNode | React.ReactNode[] | ColumnOnRenderReturnObjectInfo;
 }

package/lib/table/style/index.css

@@ -1 +1 @@
-.ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table thead{background-color:#2b5797;color:#fff}.ab-table tbody tr:nth-child(2n){background-color:#f7f6f3}.ab-table-header{background-color:#2b5797;color:#fff;overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table tr td,.ab-table tr th{padding:.16rem}.ab-table tr td.ab-table-checkbox,.ab-table tr th.ab-table-checkbox{width:.32rem;text-align:center;padding-left:.08rem;padding-right:.08rem}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
+.ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}

package/lib/table/style/index.scss

@@ -1,71 +1,52 @@
-$namespace: ab-table;
-
-.#{$namespace} {
-  overflow-x: auto;
-
-  table {
-    border-spacing: 0;
-    width: 100%;
-    table-layout: fixed;
-  }
-
-  thead {
-    background-color: #2b5797;
-    color: #fff;
-  }
-
-  tbody tr {
-    &:nth-child(2n) {
-      background-color: #f7f6f3;
-    }
-  }
-
-  &-header {
-    background-color: #2b5797;
-    color: #fff;
-    overflow: hidden;
-
-    table {
-      width: calc(100% - .17rem);
-    }
-  }
-
-  &-body {
-    overflow: auto scroll;
-  }
-
-  tr th, tr td {
-    padding: .16rem;
-
-    &.#{$namespace}-checkbox {
-      width: .32rem;
-      text-align: center;
-      padding-left: .08rem;
-      padding-right: .08rem;
-    }
-  }
-
-  &-title {
-    display: flex;
-    align-items: center;
-    text-align: left;
-
-    &.#{$namespace}-point {
-      cursor: pointer;
-    }
-  }
-
-  &-arrow {
-    padding: 0 .05rem;
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  .#{$namespace} {
-    &-header {
-      table {
-        width: 100%;
-      }
-    }
-  }
+$namespace: ab-table;
+
+.#{$namespace} {
+  overflow-x: auto;
+
+  table {
+    border-spacing: 0;
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  &-header {
+    overflow: hidden;
+
+    table {
+      width: calc(100% - .17rem);
+    }
+  }
+
+  &-body {
+    overflow: auto scroll;
+  }
+
+  &-checkbox {
+    width: .32rem;
+    text-align: center;
+  }
+
+  &-title {
+    display: flex;
+    align-items: center;
+    text-align: left;
+
+    &.#{$namespace}-point {
+      cursor: pointer;
+    }
+  }
+
+  &-arrow {
+    padding: 0 .05rem;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .#{$namespace} {
+    &-header {
+      table {
+        width: 100%;
+      }
+    }
+  }
 }

package/lib/tabs/__stories__/style.scss

@@ -1,8 +1,8 @@
-.tabs-demo {
-  width: 500px;
-  margin: 20px auto;
-
-  .ab-tabs-item {
-    padding: 2px 6px;
-  }
-}
+.tabs-demo {
+  width: 500px;
+  margin: 20px auto;
+
+  .ab-tabs-item {
+    padding: 2px 6px;
+  }
+}

package/lib/tabs/style/index.css

@@ -1 +1 @@
-.ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
+.ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}