@aloudata/aloudata-design 2.7.1 → 2.7.3

package/dist/Table/components/Footer/index.js

@@ -0,0 +1,77 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useCallback } from 'react';
+import { Pagination } from "../../..";
+import TextLink from "../../../TextLink";
+import { prefixCls } from "../../helper";
+export default function TableFooter(props) {
+  var pagination = props.pagination,
+    _props$scroll = props.scroll,
+    scroll = _props$scroll === void 0 ? {} : _props$scroll,
+    scrollToFirstRow = props.scrollToFirstRow,
+    isShowPagination = props.isShowPagination,
+    rowSelectionInfo = props.rowSelectionInfo;
+
+  // 选择行
+  var getCheckboxAllNode = rowSelectionInfo.getCheckboxAllNode,
+    selectedRowKeys = rowSelectionInfo.selectedRowKeys,
+    items = rowSelectionInfo.items,
+    isShowRowSelectionInFooter = rowSelectionInfo.isShowRowSelectionInFooter,
+    changeSelectedRowKeys = rowSelectionInfo.onChange;
+  var btnItems = [{
+    key: '$UN_SELECT_ALL$',
+    label: '取消选择',
+    onClick: function onClick(e) {
+      return rowSelectionInfo.unSelectAll(e);
+    }
+  }].concat(_toConsumableArray(items));
+  var rowSelectionNode = isShowRowSelectionInFooter && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('footer-row-selection')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('footer-row-selection-btn')
+  }, getCheckboxAllNode === null || getCheckboxAllNode === void 0 ? void 0 : getCheckboxAllNode('全选')), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('footer-row-selection-selected')
+  }, "\u5DF2\u9009", ' ', /*#__PURE__*/React.createElement(TextLink, {
+    className: prefixCls('footer-row-selection-selected-num')
+  }, selectedRowKeys.length), ' ', "\u4E2A"), btnItems.map(function (btnItem) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: btnItem.key,
+      className: prefixCls('footer-row-selection-item'),
+      onClick: function onClick(e) {
+        btnItem.onClick(e);
+      }
+    }, /*#__PURE__*/React.createElement(TextLink, null, btnItem.label));
+  }));
+
+  // 翻页器
+  var onChangePage = useCallback(function (page) {
+    var _ref = pagination || {},
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+    var _scroll$scrollToFirst = scroll.scrollToFirstRowOnChange,
+      scrollToFirstRowOnChange = _scroll$scrollToFirst === void 0 ? true : _scroll$scrollToFirst;
+    if (scrollToFirstRowOnChange) {
+      scrollToFirstRow();
+    }
+    onChange(page);
+    // 翻页后，清空已选行
+    changeSelectedRowKeys([]);
+  }, [scrollToFirstRow, scroll, pagination, changeSelectedRowKeys]);
+  var pager = isShowPagination && pagination && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('pager')
+  }, /*#__PURE__*/React.createElement(Pagination, _extends({
+    hideOnSinglePage: true
+  }, pagination, {
+    onChange: onChangePage
+  })));
+  var isShowRowSelection = rowSelectionInfo.isRowSelectionEnabled && selectedRowKeys.length > 0;
+  var isShowFooter = isShowPagination || isShowRowSelection;
+  return isShowFooter ? /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('footer')
+  }, rowSelectionNode, pager) : null;
+}

package/dist/Table/components/Header.d.ts

@@ -1,6 +1,6 @@
 import { Column } from '@tanstack/react-table';
 import React from 'react';
-export default function Header<T>(props: IProps<T>): React.JSX.Element;
+export default function Header<T extends object>(props: IProps<T>): React.JSX.Element;
 export interface IProps<T> {
     column: Column<T>;
 }

package/dist/Table/components/Header.js

@@ -3,17 +3,63 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import classnames from 'classnames';
-import React from 'react';
+import React, { useCallback } from 'react';
+import SortAscIcon from "../../Icon/components/SortAscendingOrderColor";
+import SortIcon from "../../Icon/components/SortColor";
+import SortDescIcon from "../../Icon/components/SortDescendingOrderColor";
 import { prefixCls } from "../helper";
 export default function Header(props) {
+  var _classnames;
   var column = props.column;
   var _ref = column.columnDef.meta,
     title = _ref.title,
     dataIndex = _ref.dataIndex,
     align = _ref.align,
-    ellipsis = _ref.ellipsis;
+    ellipsis = _ref.ellipsis,
+    sortOrder = _ref.sortOrder,
+    onSort = _ref.onSort;
+  var sortIcon = /*#__PURE__*/React.createElement(SortIcon, {
+    size: 20
+  });
+  if (sortOrder === 'ascend') {
+    sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, {
+      size: 20
+    });
+  } else if (sortOrder === 'descend') {
+    sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, {
+      size: 20
+    });
+  }
+  var onClickTh = useCallback(function (e) {
+    if (sortOrder === undefined || !dataIndex || typeof onSort !== 'function') {
+      return;
+    }
+    e.stopPropagation();
+    var newSortOrder;
+    if (sortOrder === 'ascend') {
+      newSortOrder = 'descend';
+    } else if (sortOrder === 'descend') {
+      newSortOrder = null;
+    } else {
+      newSortOrder = 'ascend';
+    }
+    onSort(dataIndex, newSortOrder);
+  }, [dataIndex, onSort, sortOrder]);
+  var content = title;
+  if (typeof content === 'string') {
+    if (sortOrder !== undefined) {
+      content = /*#__PURE__*/React.createElement("span", {
+        className: prefixCls('sort-th-inner')
+      }, /*#__PURE__*/React.createElement("span", {
+        className: prefixCls('sort-title')
+      }, title), /*#__PURE__*/React.createElement("span", {
+        className: prefixCls('sort-btn')
+      }, sortIcon));
+    }
+  }
   return typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
     key: dataIndex,
-    className: classnames(prefixCls('th-default'), prefixCls("align-".concat(align)), _defineProperty({}, prefixCls('td-ellipsis-content'), ellipsis))
-  }, title) : /*#__PURE__*/React.createElement(React.Fragment, null, title);
+    className: classnames(prefixCls('th-default'), prefixCls("align-".concat(align)), (_classnames = {}, _defineProperty(_classnames, prefixCls('td-ellipsis-content'), ellipsis), _defineProperty(_classnames, prefixCls('th-sortable'), sortOrder !== undefined), _classnames)),
+    onClick: onClickTh
+  }, content) : /*#__PURE__*/React.createElement(React.Fragment, null, title);
 }

package/dist/Table/helper.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { ITableColumn, ITableProps } from './types';
-export declare function getTableColumns<TDataItem extends object>({ columns, totalWidth, onError, }: {
+export declare function getTableColumns<TDataItem extends object>({ columns, totalWidth, onError, onSort, }: {
     columns: ITableColumn<TDataItem>[];
     totalWidth: number;
     onError: ITableProps<TDataItem>['onError'];
+    onSort: ITableProps<TDataItem>['onSort'];
 }): {
     accessorKey: string;
     header: (props: import("./components/Header").IProps<TDataItem>) => import("react").JSX.Element;
@@ -13,6 +14,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, tot
         onError: ((errorInfo: import("./types").ITableCellErrorInfo) => void) | undefined;
         columnWidths: number[];
         index: number;
+        onSort: ((columnKey: string, order: "ascend" | "descend" | null) => void) | undefined;
         title: import("react").ReactNode;
         dataIndex?: string | undefined;
         width?: string | number | undefined;
@@ -21,6 +23,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, tot
         noPadding?: boolean | undefined;
         align?: "left" | "center" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
+        sortOrder?: "ascend" | "descend" | null | undefined;
     };
 }[];
 /**

package/dist/Table/helper.js

@@ -11,7 +11,8 @@ import Header from "./components/Header";
 export function getTableColumns(_ref) {
   var columns = _ref.columns,
     totalWidth = _ref.totalWidth,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    onSort = _ref.onSort;
   var columnWidths = getColumnWidths(columns, totalWidth);
   // 根据固定列的位置重排列顺序，将 left 的列放到最前面，right 的列放到最后面
   var leftColumns = [];
@@ -37,7 +38,8 @@ export function getTableColumns(_ref) {
       meta: _objectSpread(_objectSpread({}, col), {}, {
         onError: onError,
         columnWidths: columnWidths,
-        index: index
+        index: index,
+        onSort: onSort
       })
     };
   });

package/dist/Table/hooks/useExpandable.d.ts

@@ -1,5 +1,6 @@
 import { ITableProps } from '../types';
 export default function useExpandable<TDataItem extends object>(props: IProps<TDataItem>): IExpandableInfo<TDataItem>;
+export declare function getExpandableConfig<TDataItem extends object>(expandable: ITableProps<TDataItem>['expandable']): import("../types").ITableExpandable<TDataItem>;
 export interface IExpandableInfo<TDataItem extends object> {
     expandItemMap: IExpandItemMap;
     onExpand: (record: TDataItem, isExpanded: boolean) => void;

package/dist/Table/hooks/useExpandable.js

@@ -57,13 +57,13 @@ export default function useExpandable(props) {
     if (!expandedRowKeys) {
       setExpandedKeys(function (prev) {
         if (isExpanded) {
+          // 展开
+          return [].concat(_toConsumableArray(prev), [key]);
+        } else {
           // 折叠
           return prev.filter(function (expandedKey) {
             return expandedKey !== key;
           });
-        } else {
-          // 展开
-          return [].concat(_toConsumableArray(prev), [key]);
         }
       });
     }
@@ -121,7 +121,7 @@ function getListItemsByTree(currNode, expandedKeys, getKey, childrenColumnName)
   })) || [];
   return [curr].concat(_toConsumableArray(_.flatten(subItems)));
 }
-function getExpandableConfig(expandable) {
+export function getExpandableConfig(expandable) {
   if (typeof expandable === 'boolean') {
     return {};
   }

package/dist/Table/hooks/useRowSelection.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ITableProps } from '../types';
+export default function useRowSelection<TDataItem extends object>(props: ITableProps<TDataItem>): IRowSelectionInfo<TDataItem>;
+export interface IRowSelectionInfo<TDataItem extends object> {
+    columns: ITableProps<TDataItem>['columns'];
+    isRowSelectionEnabled: boolean;
+    getCheckboxAllNode: ((children?: React.ReactNode) => React.ReactNode) | null;
+    selectedRowKeys: string[];
+    unSelectAll: (e: React.MouseEvent) => void;
+    isShowRowSelectionInFooter: boolean;
+    items: {
+        key: string;
+        label: string;
+        onClick: (e: React.MouseEvent) => void;
+    }[];
+    onChange: (selectedRowKeys: string[]) => void;
+}

package/dist/Table/hooks/useRowSelection.js

@@ -0,0 +1,164 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useState } from 'react';
+import Checkbox from "../../Checkbox";
+import { getRowKey, prefixCls } from "../helper";
+export default function useRowSelection(props) {
+  var _rowSelection$items;
+  var columns = props.columns,
+    rowSelection = props.rowSelection,
+    rowKey = props.rowKey,
+    data = props.data;
+  var _useState = useState((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.defaultSelectedRowKeys) || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRowKeysState = _useState2[0],
+    setSelectedRowKeysState = _useState2[1];
+  var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || selectedRowKeysState;
+  var getSelectedRows = useCallback(function (rowKeys) {
+    return data.filter(function (record) {
+      return rowKeys.includes(getRowKey(record, rowKey));
+    });
+  }, [data, rowKey]);
+  var changeSelectedRowKeys = useCallback(function (newSelectedRowKeys) {
+    var _rowSelection$onChang;
+    // 过滤出存在于 data 中的 selectedRowKeys
+    var visibleSelectedRowKeys = data.map(function (record) {
+      return getRowKey(record, rowKey);
+    }).filter(function (key) {
+      return newSelectedRowKeys.includes(key);
+    });
+    setSelectedRowKeysState(visibleSelectedRowKeys);
+    var selectedRows = getSelectedRows(visibleSelectedRowKeys);
+    rowSelection === null || rowSelection === void 0 ? void 0 : (_rowSelection$onChang = rowSelection.onChange) === null || _rowSelection$onChang === void 0 ? void 0 : _rowSelection$onChang.call(rowSelection, visibleSelectedRowKeys, selectedRows);
+  }, [getSelectedRows, rowSelection, data, rowKey]);
+  var checkboxAllStatus = getCheckboxAllStatus(data, selectedRowKeys, rowKey);
+  var selectAll = useCallback(function () {
+    var newKeys = data.map(function (record) {
+      return getRowKey(record, rowKey);
+    });
+    changeSelectedRowKeys(newKeys);
+  }, [data, rowKey, changeSelectedRowKeys]);
+  var unSelectAll = useCallback(function () {
+    changeSelectedRowKeys([]);
+  }, [changeSelectedRowKeys]);
+  var onClickAllCheckbox = useCallback(function () {
+    if (rowSelection !== null && rowSelection !== void 0 && rowSelection.selectedRowKeys) {
+      // 受控情况
+      return;
+    }
+    if (checkboxAllStatus === 'all') {
+      unSelectAll();
+    } else {
+      selectAll();
+    }
+  }, [checkboxAllStatus, unSelectAll, selectAll, rowSelection]);
+  var onClickCheckbox = useCallback(function (key, isChecked) {
+    return function () {
+      if (rowSelection !== null && rowSelection !== void 0 && rowSelection.selectedRowKeys) {
+        // 受控情况
+        return;
+      }
+      var newKeys = isChecked ? selectedRowKeys.filter(function (keyItem) {
+        return keyItem !== key;
+      }) : [].concat(_toConsumableArray(selectedRowKeys), [key]);
+      changeSelectedRowKeys(newKeys);
+    };
+  }, [selectedRowKeys, rowSelection, changeSelectedRowKeys]);
+
+  // 全选按钮
+  var getCheckboxAllNode = function getCheckboxAllNode(children) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls('row-selection-all')
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      onClick: onClickAllCheckbox,
+      checked: checkboxAllStatus === 'all',
+      indeterminate: checkboxAllStatus === 'indeterminate'
+    }, children));
+  };
+  if (!rowSelection) {
+    return {
+      columns: columns,
+      isRowSelectionEnabled: false,
+      getCheckboxAllNode: getCheckboxAllNode,
+      selectedRowKeys: [],
+      unSelectAll: unSelectAll,
+      isShowRowSelectionInFooter: false,
+      items: [],
+      onChange: function onChange() {}
+    };
+  }
+  if (!rowKey) {
+    throw new Error('rowKey is required when rowSelection is enabled');
+  }
+  var rowSelectionColumn = {
+    dataIndex: '',
+    title: getCheckboxAllNode(),
+    width: 48,
+    render: function render(text, record) {
+      var key = getRowKey(record, rowKey);
+      var isChecked = !!(selectedRowKeys !== null && selectedRowKeys !== void 0 && selectedRowKeys.includes(key));
+      return /*#__PURE__*/React.createElement("div", {
+        className: prefixCls('row-selection-item')
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        onClick: onClickCheckbox(key, isChecked),
+        checked: isChecked
+      }));
+    },
+    fixed: rowSelection.fixed ? 'left' : undefined
+  };
+  var selectedRowKeysInCurrPage = data.map(function (record) {
+    return getRowKey(record, rowKey);
+  }).filter(function (key) {
+    return selectedRowKeys.includes(key);
+  });
+  var isShowRowSelectionInFooter = selectedRowKeysInCurrPage.length > 0;
+  var items = ((_rowSelection$items = rowSelection.items) === null || _rowSelection$items === void 0 ? void 0 : _rowSelection$items.map(function (operationItem) {
+    return _objectSpread(_objectSpread({}, operationItem), {}, {
+      onClick: function onClick(e) {
+        operationItem.onClick(selectedRowKeysInCurrPage, getSelectedRows(selectedRowKeysInCurrPage), e);
+      }
+    });
+  })) || [];
+  return {
+    columns: [rowSelectionColumn].concat(_toConsumableArray(columns)),
+    isRowSelectionEnabled: true,
+    getCheckboxAllNode: getCheckboxAllNode,
+    selectedRowKeys: selectedRowKeysInCurrPage,
+    unSelectAll: unSelectAll,
+    isShowRowSelectionInFooter: isShowRowSelectionInFooter,
+    items: items,
+    onChange: changeSelectedRowKeys
+  };
+}
+function getCheckboxAllStatus(data, selectedRowKeys, rowKey) {
+  var selectedKeysInData = data.map(function (record) {
+    var key = getRowKey(record, rowKey);
+    if (selectedRowKeys.includes(key)) {
+      return key;
+    }
+    return null;
+  }).filter(function (key) {
+    return key !== null;
+  });
+  if (selectedKeysInData.length === 0) {
+    return 'none';
+  }
+  if (selectedKeysInData.length === data.length) {
+    return 'all';
+  }
+  return 'indeterminate';
+}

package/dist/Table/index.js

@@ -17,16 +17,17 @@ import ResizeObserver from 'rc-resize-observer';
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import { Empty, Spin } from '..';
 import ExpandCell from "./components/ExpandCell";
-import Pagination from "./components/Pagination";
+import Footer from "./components/Footer";
 import { getRowKey, getTableColumns, prefixCls } from "./helper";
 import useExpandable from "./hooks/useExpandable";
 import useFixed from "./hooks/useFixed";
+import useRowSelection from "./hooks/useRowSelection";
 import useScroll from "./hooks/useScroll";
 var HEADER_HEIGHT = 41;
+var FOOTER_HEIGHT = 52;
 function Table(props, ref) {
   var _classnames, _classnames5, _classnames6;
-  var columns = props.columns,
-    data = props.data,
+  var data = props.data,
     rowKey = props.rowKey,
     columnSizing = props.columnSizing,
     sticky = props.sticky,
@@ -41,6 +42,7 @@ function Table(props, ref) {
     } : _props$rowClassName,
     onRowClick = props.onRowClick,
     onError = props.onError,
+    onSort = props.onSort,
     expandable = props.expandable;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -74,16 +76,18 @@ function Table(props, ref) {
     data: data,
     rowKey: rowKey
   });
+  var rowSelectionInfo = useRowSelection(props);
   var tableColumns = useMemo(function () {
     if (!totalSize || !realWidth) {
       return [];
     }
     return getTableColumns({
-      columns: columns,
+      columns: rowSelectionInfo.columns,
       totalWidth: realWidth,
-      onError: onError
+      onError: onError,
+      onSort: onSort
     });
-  }, [columns, totalSize, realWidth, onError]);
+  }, [totalSize, realWidth, onError, onSort, rowSelectionInfo.columns]);
   var getColumnFixedInfo = useFixed({
     tableColumns: tableColumns,
     y: y,
@@ -122,6 +126,8 @@ function Table(props, ref) {
       }
     }, _.map(headerGroup.headers, function (header, index) {
       var _classnames2;
+      // 选择行的列不能拖动宽度
+      var showResizer = columnSizing && !(!!rowSelectionInfo.isRowSelectionEnabled && index === 0);
       var _getColumnFixedInfo = getColumnFixedInfo(index, true),
         fixedClassName = _getColumnFixedInfo.className,
         fixedStyle = _getColumnFixedInfo.style;
@@ -131,7 +137,7 @@ function Table(props, ref) {
           width: header.getSize()
         }, fixedStyle),
         key: header.id
-      }, flexRender(header.column.columnDef.header, header.getContext()), columnSizing && /*#__PURE__*/React.createElement("div", {
+      }, flexRender(header.column.columnDef.header, header.getContext()), showResizer && /*#__PURE__*/React.createElement("div", {
         onMouseDown: header.getResizeHandler(),
         onTouchStart: header.getResizeHandler(),
         className: classnames(prefixCls('resizer'), (_classnames2 = {}, _defineProperty(_classnames2, prefixCls('self-resizing'), header.column.getIsResizing()), _defineProperty(_classnames2, prefixCls('resizing'), tableInstance.getState().columnSizingInfo.isResizingColumn), _classnames2))
@@ -156,10 +162,12 @@ function Table(props, ref) {
       onRowClick(rowData, rowIndex);
     };
   }, [onRowClick]);
-  var isShowPagination = pagination && pagination.total > pagination.pageSize;
+  var isShowPagination = !!(pagination && pagination.total > pagination.pageSize);
+  var isShowRowSelection = rowSelectionInfo.isShowRowSelectionInFooter;
+  var isShowFooter = isShowPagination || isShowRowSelection;
 
   // 空态切换 size 的阈值
-  var EMPTY_SMALL_SIZE_HEIGHT = 288;
+  var EMPTY_SMALL_SIZE_HEIGHT = 436;
   var isSmallEmpty = totalSize && totalSize.height < EMPTY_SMALL_SIZE_HEIGHT;
   var isEmpty = rows.length === 0 && !loading;
 
@@ -169,12 +177,16 @@ function Table(props, ref) {
     style: {
       width: realWidth
     }
-  }, isEmpty ? emptyComponent || /*#__PURE__*/React.createElement("div", {
+  }, isEmpty ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: totalSize === null || totalSize === void 0 ? void 0 : totalSize.width
+    }
+  }, emptyComponent || /*#__PURE__*/React.createElement("div", {
     className: classnames(prefixCls('empty'), _defineProperty({}, prefixCls('empty-small'), isSmallEmpty))
   }, /*#__PURE__*/React.createElement(Empty, {
     image: isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH,
     size: isSmallEmpty ? 'small' : undefined
-  })) : _.map(rows, function (row, rowIndex) {
+  }))) : _.map(rows, function (row, rowIndex) {
     var _classnames4;
     return /*#__PURE__*/React.createElement("div", {
       key: row.id,
@@ -193,6 +205,7 @@ function Table(props, ref) {
         }, fixedStyle)
       }, expandableInfo.isExpandable && colIndex === 0 ? /*#__PURE__*/React.createElement(ExpandCell, {
         expandableInfo: expandableInfo,
+        expandable: expandable,
         data: row.original,
         rowKey: rowKey
       }, tdContent) : tdContent);
@@ -204,12 +217,18 @@ function Table(props, ref) {
     className: prefixCls('content')
   }, headerContent, /*#__PURE__*/React.createElement("div", {
     style: {
-      height: y && totalSize ? totalSize.height - HEADER_HEIGHT : 'auto'
+      height: y && totalSize ? totalSize.height - HEADER_HEIGHT - (isShowFooter ? FOOTER_HEIGHT : 0) : 'auto'
     },
     className: classnames(prefixCls('body-scroll'), (_classnames5 = {}, _defineProperty(_classnames5, prefixCls('scroll-y'), y !== undefined), _defineProperty(_classnames5, prefixCls('scroll-hidden'), isEmpty), _classnames5)),
     ref: bodyRef,
     onScroll: onBodyScroll
-  }, bodyContent)));
+  }, bodyContent), isShowFooter && /*#__PURE__*/React.createElement(Footer, {
+    rowSelectionInfo: rowSelectionInfo,
+    isShowPagination: isShowPagination,
+    pagination: pagination,
+    scroll: scroll,
+    scrollToFirstRow: scrollToFirstRow
+  })));
   var tableStyle = {};
   if (y) {
     tableStyle.height = y;
@@ -228,10 +247,6 @@ function Table(props, ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames(prefixCls('main'), (_classnames6 = {}, _defineProperty(_classnames6, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames6, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames6, prefixCls('ping-right'), isPingRight), _classnames6))
-  }, tableContent)), isShowPagination && /*#__PURE__*/React.createElement(Pagination, {
-    pagination: pagination,
-    scroll: scroll,
-    scrollToFirstRow: scrollToFirstRow
-  }));
+  }, tableContent)));
 }
 export default /*#__PURE__*/forwardRef(Table);