@aloudata/aloudata-design 2.7.2 → 2.7.3

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);

package/dist/Table/style/index.less

@@ -3,6 +3,8 @@
 @import '../../Spin/style/index.less';
 @import '../../ScrollArea/style/index.less';
 @import '../../Empty/style/index.less';
+@import '../../Checkbox/style/index.less';
+@import '../../TextLink/style/index.less';
 
 @header-height: 40px;
 
@@ -163,6 +165,29 @@
     display: flex;
     align-items: center;
     color: var(--alias-colors-text-subtle, #4b5563);
+
+    &.ald-table-th-sortable {
+      cursor: pointer;
+    }
+
+    .ald-table-sort-th-inner {
+      display: flex;
+      column-gap: 4px;
+      align-items: center;
+      width: 100%;
+    }
+
+    .ald-table-sort-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .ald-table-sort-btn {
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+    }
   }
 
   .ald-table-td-default {
@@ -225,11 +250,20 @@
 
     .ald-table-expand-btn {
       width: 16px;
+      height: 100%;
       cursor: pointer;
       margin-right: 6px;
       display: flex;
-      height: 100%;
+      flex-direction: column;
+      justify-content: center;
       align-items: center;
+
+      &-inner {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+      }
     }
 
     .ald-table-td-default {
@@ -255,13 +289,6 @@
   }
 }
 
-.ald-table-pagination {
-  padding-top: 16px;
-  display: flex;
-  justify-content: end;
-  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
-}
-
 .ald-table-loading {
   position: absolute;
   top: 50%;
@@ -312,3 +339,45 @@
     margin-top: 20px;
   }
 }
+
+/** 选择行 **/
+.ald-table-row-selection-all {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+}
+
+/** Footer **/
+.ald-table-footer {
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
+}
+
+.ald-table-footer-row-selection {
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+  font-size: 14px;
+  line-height: 20px;
+
+  .ald-table-footer-row-selection-selected-num {
+    cursor: inherit !important;
+  }
+}
+
+.ald-table-footer-row-selection-btn {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+}
+
+.ald-table-pager {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1 1 auto;
+}

package/dist/Table/types.d.ts

@@ -16,6 +16,8 @@ export interface ITableProps<TDataItem extends object> {
     onRowClick?: (record: TDataItem, index: number) => void;
     onError?: (errorInfo: ITableCellErrorInfo) => void;
     expandable?: ITableExpandable<TDataItem> | boolean;
+    onSort?: (columnKey: string, order: 'ascend' | 'descend' | null) => void;
+    rowSelection?: IRowSelection<TDataItem>;
 }
 export type TRowKey<TDataItem extends object> = string | ((record: TDataItem) => string | number);
 export interface ITableCellErrorInfo {
@@ -42,6 +44,19 @@ export interface ITableColumn<TDataItem = unknown> {
     noPadding?: boolean;
     align?: 'left' | 'center' | 'right';
     fixed?: 'left' | 'right';
+    sortOrder?: 'ascend' | 'descend' | null;
+}
+export interface IRowSelection<TDataItem extends object> {
+    fixed?: boolean;
+    selectedRowKeys?: string[];
+    defaultSelectedRowKeys?: string[];
+    items?: IRowSelectionBtnItem<TDataItem>[];
+    onChange?: (selectedRowKeys: string[], selectedRows: TDataItem[]) => void;
+}
+export interface IRowSelectionBtnItem<TDataItem extends object> {
+    key: string;
+    label: string;
+    onClick: (selectedRowKeys: string[], selectedRows: TDataItem[], e: React.MouseEvent) => void;
 }
 export interface IInnerTableColumn<TDataItem = unknown> extends ITableColumn<TDataItem> {
     columnWidths: number[];
@@ -52,4 +67,10 @@ export interface ITableExpandable<TDataItem = unknown> {
     defaultExpandedRowKeys?: string[];
     expandedRowKeys?: string[];
     onExpand?: (record: TDataItem, isExpanded: boolean) => void;
+    expandIcon?: (params: IExpandIconProps<TDataItem>) => React.ReactNode;
+}
+export interface IExpandIconProps<TDataItem = unknown> {
+    record: TDataItem;
+    onExpand: (record: TDataItem, isExpanded: boolean) => void;
+    isExpanded: boolean;
 }