@autobest-ui/components 1.1.1 → 1.1.8

package/lib/table/index.d.ts

@@ -1,23 +1,31 @@
-import React from 'react';
+import React, { ReactText } from 'react';
 import { AddListenerEventHandler } from '@autobest-ui/utils';
 import { Column } from './interface';
-export interface TableProps {
-    /**
-     * 定义每一列数据的格式
-     */
-    columns: Column[];
+import { HeaderRowProps } from './header/HeaderRow';
+import { BodyProps } from './body';
+import { HeaderRowSelectionInfo } from './header/CheckIcon';
+import { BodyRowSelectionInfo } from './body/CheckIcon';
+export interface RowSelectionInfo<T> extends Partial<Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'onSelectAll'>>, Partial<Pick<BodyRowSelectionInfo<T>, 'checkIcon'>> {
+    defaultSelectedRowKeys?: ReactText[];
+    getDisabled?: (dataRow: any, selectedRowKeys: ReactText[], selectedRows: T[]) => boolean;
+    onSelect?: (checked: boolean, rowData: T, selectedRows: T[]) => void;
+    onSelectedRowChange?: (selectedRowKeys: ReactText[], selectedRows: T[]) => void;
+}
+declare type StateRowSelectionInfo<T> = Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'selectAllChecked' | 'onSelectAll'> & Pick<BodyRowSelectionInfo<T>, 'checkIcon' | 'getDisabled' | 'onSelect'>;
+export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sortIcon' | 'onSortChange' | 'isSortedDescending'>, Pick<BodyProps<T>, 'dataSource' | 'expandable'> {
     /**
-     * 表格里的数据
+     * 样式名
      */
-    dataSource: any[];
+    className?: string;
     /**
-     * 主键，唯一标识某一条记录，需要checkbox时必传
+     * 定义每一列数据的格式
+     * 具体类型见Column
      */
-    primaryKey: string;
+    columns: Column<T>[];
     /**
-     * 样式名
+     * 获取单条记录的唯一主键; 若是string类型，则取当前行数据中对应名称的属性值； 若是函数，则传入当前行数据，获取rowKey值；这也是勾选功能匹配时所用的key值
      */
-    className?: string;
+    rowKey?: string | ((rowData: T) => ReactText);
     /**
      * 是否固定表头
      */
@@ -26,7 +34,14 @@ export interface TableProps {
      * 最大高度，fixedHeader为true时生效
      */
     maxHeight?: string;
+    /**
+     * 为true时，Table会显示loading样式
+     */
     loading?: boolean;
+    /**
+     * 表格行是否可勾选，详见RowSelection
+     */
+    rowSelection?: RowSelectionInfo<T>;
     /**
      * 默认勾选项数组, 以primaryKey取值
      */
@@ -48,43 +63,53 @@ export interface TableProps {
      */
     isSortedDescending?: boolean;
 }
-interface TableState {
-    isSelectedAll: boolean;
-    selectedRowKeys: any[];
+interface TableState<T> {
+    selectedRowKeys: ReactText[];
+    selectedRows: T[];
+    rowSelection: StateRowSelectionInfo<T>;
 }
-declare class Table extends React.Component<TableProps, TableState> {
+declare class Table<RowDataType> extends React.Component<TableProps<RowDataType>, TableState<RowDataType>> {
     prefixCls: string;
     headerRef: React.RefObject<HTMLDivElement>;
     bodyRef: React.RefObject<HTMLDivElement>;
     scrollHandler: AddListenerEventHandler;
+    getRowKey: (rowData: RowDataType) => ReactText;
     static defaultProps: {
         fixedHeader: boolean;
         loading: boolean;
+        rowKey: string;
     };
-    constructor(props: TableProps);
+    readonly defaultRowSelection: Pick<StateRowSelectionInfo<RowDataType>, 'selectAllVisible' | 'selectAllChecked' | 'getDisabled'>;
+    constructor(props: TableProps<RowDataType>);
     /**
      * 清空选项
      */
     clearSelection: () => void;
     componentDidMount(): void;
-    componentDidUpdate(): void;
     componentWillUnmount(): void;
     addScrollListener: () => void;
+    getSelectedRows: (selectedKeys: any) => any;
     /**
      * 点击表头的checkbox，全选或全不选
      */
-    onSelectAll: () => void;
+    onSelectAll: (checked: any) => void;
     /**
      * 点击某一行的checkbook
      * @param visible
-     * @param name
-     */
-    onChange: (visible: boolean, name: string | number) => void;
-    /**
-     * 点击某一列的表头，触发排序
-     * @param sortName
-     */
-    onSort: (sortName: string) => void;
+     * @param rowData
+     */
+    onSelect: (visible: boolean, rowData: RowDataType) => void;
+    getDisabled: (rowData: any) => boolean;
+    getRowSelection: () => {
+        onSelect: (visible: boolean, rowData: RowDataType) => void;
+        onSelectAll: (checked: any) => void;
+        getDisabled: (rowData: any) => boolean;
+        defaultSelectedRowKeys?: (string | number)[];
+        onSelectedRowChange?: (selectedRowKeys: (string | number)[], selectedRows: RowDataType[]) => void;
+        selectAllVisible?: boolean;
+        checkIcon?: (checked: boolean, rowData: RowDataType, index: number) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+        selectAllChecked: boolean;
+    };
     /**
      * 用colgroup设置每一列的宽度
      */

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%}}