@aloudata/aloudata-design 0.3.2 → 0.3.5

package/lib/Table/components/Empty/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function LoadingNode(): JSX.Element;
+export default LoadingNode;

package/lib/Table/components/Empty/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _usePrefixCls = _interopRequireDefault(require("../../../_utils/hooks/usePrefixCls"));
+
+var _Empty = _interopRequireDefault(require("../../../Empty"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function LoadingNode() {
+  var prefixCls = (0, _usePrefixCls.default)('', 'ald-table');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-empty-icon")
+  }, /*#__PURE__*/_react.default.createElement(_Empty.default, {
+    title: "No Data",
+    size: "large",
+    image: _Empty.default.PRESENTED_IMAGE_SIMPLE
+  }));
+}
+
+var _default = LoadingNode;
+exports.default = _default;

package/lib/Table/components/Loading/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function LoadingNode(): JSX.Element;
+export default LoadingNode;

package/lib/Table/components/Loading/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("@aloudata/icons-react/styles/index.less");
+
+var _LoadingLine2 = _interopRequireDefault(require("@aloudata/icons-react/es/icons/LoadingLine"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _usePrefixCls = _interopRequireDefault(require("../../../_utils/hooks/usePrefixCls"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function LoadingNode() {
+  var prefixCls = (0, _usePrefixCls.default)('', 'ald-table');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-loading")
+  }, /*#__PURE__*/_react.default.createElement(_LoadingLine2.default, {
+    size: 16,
+    fill: "currentColor",
+    spin: true,
+    className: "".concat(prefixCls, "-loading-icon")
+  }), "Loading");
+}
+
+var _default = LoadingNode;
+exports.default = _default;

package/lib/Table/components/TableBodyRowList/index.d.ts

@@ -0,0 +1,13 @@
+import { MutableRefObject } from 'react';
+import { Row } from 'react-table';
+interface ITableBodyRowListProps<T extends object> {
+    data: T[];
+    rows: Row<T>[];
+    prepareRow: (row: Row<T>) => void;
+    columnsTotalWidthRef: MutableRefObject<number>;
+    rowClassName?: string;
+    ellipsis?: boolean;
+    onRowSelected?: (row: T) => void;
+}
+declare function TableBodyRowList<T extends object>(props: ITableBodyRowListProps<T>): JSX.Element;
+export default TableBodyRowList;

package/lib/Table/components/TableBodyRowList/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _usePrefixCls = _interopRequireDefault(require("../../../_utils/hooks/usePrefixCls"));
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../../utils");
+
+var _excluded = ["style"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function TableBodyRowList(props) {
+  var _props$ellipsis = props.ellipsis,
+      ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
+      data = props.data,
+      rows = props.rows,
+      prepareRow = props.prepareRow,
+      columnsTotalWidthRef = props.columnsTotalWidthRef,
+      _props$rowClassName = props.rowClassName,
+      rowClassName = _props$rowClassName === void 0 ? '' : _props$rowClassName,
+      onRowSelected = props.onRowSelected;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedRowId = _useState2[0],
+      setSelectedRowId = _useState2[1];
+
+  var prefixCls = (0, _usePrefixCls.default)('', 'ald-table');
+  var onRowClick = (0, _react.useCallback)(function (row) {
+    if (!onRowSelected) {
+      return;
+    }
+
+    setSelectedRowId(row.id);
+    onRowSelected(row.original);
+  }, [onRowSelected, setSelectedRowId]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.map(function (item, index) {
+    var _classnames;
+
+    var row = rows[index];
+    prepareRow(row);
+
+    var _row$getRowProps = row.getRowProps(),
+        rowStyle = _row$getRowProps.style,
+        rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
+
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, rowProps, {
+      style: _objectSpread(_objectSpread({}, rowStyle), {}, {
+        width: columnsTotalWidthRef.current
+      }),
+      className: (0, _classnames2.default)("".concat(prefixCls, "-row"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId), _defineProperty(_classnames, rowClassName, rowClassName), _defineProperty(_classnames, "".concat(prefixCls, "-row-ellipsis"), ellipsis), _classnames)),
+      onClick: function onClick() {
+        return onRowClick(row);
+      },
+      key: row.id
+    }), row.cells.map(function (cell) {
+      var _cell$getCellProps$st, _cell$getCellProps$st2;
+
+      var currentRenderWidth = Number((_cell$getCellProps$st = cell.getCellProps().style) === null || _cell$getCellProps$st === void 0 ? void 0 : (_cell$getCellProps$st2 = _cell$getCellProps$st.width) === null || _cell$getCellProps$st2 === void 0 ? void 0 : _cell$getCellProps$st2.toString().replace('px', '')); // 表格内置计算的宽度 'px'
+
+      return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, cell.getCellProps(), {
+        className: (0, _classnames2.default)("".concat(prefixCls, "-cell")),
+        style: {
+          width: (0, _utils.getValidWidthByNumber)(currentRenderWidth)
+        }
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames2.default)("".concat(prefixCls, "-cell-container"))
+      }, cell.render('Cell')));
+    }));
+  }));
+}
+
+var _default = TableBodyRowList;
+exports.default = _default;

package/lib/Table/components/TableHead/index.d.ts

@@ -0,0 +1,23 @@
+import { MutableRefObject } from 'react';
+import { HeaderGroup, SortingRule } from 'react-table';
+import { ISort, TSortOrder } from '../../interface';
+import { IWidthDetail } from '../../utils';
+interface ITableWithoutHeightProps<T extends object = {}> {
+    headerGroups: HeaderGroup<T>[];
+    tableContentWidth: number;
+    canResizeColumn?: boolean;
+    defaultSort?: ISort<T>;
+    sortable?: boolean;
+    columns?: {
+        sortOrder?: TSortOrder;
+        accessor: string;
+        sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric';
+    }[];
+    sortDirections?: Array<'ascend' | 'descend'>;
+    setSortBy: (sortBy: SortingRule<T>[]) => void;
+    onChange?: (sort: ISort<T>) => void;
+    columnsWidthMapRef: MutableRefObject<Map<string, IWidthDetail> | undefined>;
+    columnsTotalWidthRef: MutableRefObject<number>;
+}
+declare function TableHead<T extends object = {}>(props: ITableWithoutHeightProps<T>): JSX.Element;
+export default TableHead;

package/lib/Table/components/TableHead/index.js

@@ -0,0 +1,286 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("@aloudata/icons-react/styles/index.less");
+
+var _SortAscendingLine2 = _interopRequireDefault(require("@aloudata/icons-react/es/icons/SortAscendingLine"));
+
+var _SortDescendingLine2 = _interopRequireDefault(require("@aloudata/icons-react/es/icons/SortDescendingLine"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _usePrefixCls = _interopRequireDefault(require("../../../_utils/hooks/usePrefixCls"));
+
+var _classnames3 = _interopRequireDefault(require("classnames"));
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+var _utils = require("../../utils");
+
+var _message = _interopRequireDefault(require("../../../message"));
+
+var _excluded = ["style"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ARRAY_FIRST_INDEX = 0;
+
+function TableHead(props) {
+  var headerGroups = props.headerGroups,
+      tableContentWidth = props.tableContentWidth,
+      canResizeColumn = props.canResizeColumn,
+      defaultSort = props.defaultSort,
+      _props$sortable = props.sortable,
+      sortable = _props$sortable === void 0 ? false : _props$sortable,
+      _props$columns = props.columns,
+      columns = _props$columns === void 0 ? [{
+    accessor: '',
+    sortOrder: 'descend'
+  }] : _props$columns,
+      allSortDirections = props.sortDirections,
+      setSortBy = props.setSortBy,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      columnsWidthMapRef = props.columnsWidthMapRef,
+      columnsTotalWidthRef = props.columnsTotalWidthRef;
+  var prefixCls = (0, _usePrefixCls.default)('', 'ald-table'); // 第一列的情况 默认或者恢复是需要用到
+
+  var defaultSortObject = {
+    id: columns[ARRAY_FIRST_INDEX].accessor,
+    desc: !!(columns[ARRAY_FIRST_INDEX].sortOrder && columns[ARRAY_FIRST_INDEX].sortOrder === 'descend')
+  }; // 如果支持排序
+  // 1. 有默认排序 则按照默认排序
+  // 2. 如果没有默认排序，再判断第一列是否符合排序条件，若满足 => 则按第一列排序
+
+  var getInitialSortDirection = function getInitialSortDirection() {
+    if (defaultSort && defaultSort.id) {
+      return defaultSort;
+    }
+
+    if (!defaultSortObject.id) {
+      _message.default.error('开启了排序，但是没有给予默认排序列，并且第一列不支持排序');
+    }
+
+    return defaultSortObject;
+  };
+
+  var _useState = (0, _react.useState)(getInitialSortDirection()),
+      _useState2 = _slicedToArray(_useState, 2),
+      sortDirection = _useState2[0],
+      setSortDirection = _useState2[1]; // 排序的方向 倒叙{ id: 'xx', desc: true }、正序{ id: 'xx', desc: false }、无序 { id: '', desc: undefined }
+  // 获取排序方向以及排序的id
+
+
+  var getSortBy = function getSortBy(id) {
+    var sortDirections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['ascend', 'descend'];
+    var // 如果传了sortDirections，则使用传入的，否则使用默认的
+    sortOrder = arguments.length > 2 ? arguments[2] : undefined;
+    var res = {
+      id: id,
+      desc: undefined
+    };
+    var isSameCol = sortDirection.id === id;
+    var descMap = new Map([['ascend', false], ['descend', true]]);
+    var directions = allSortDirections || sortDirections; // 如果不是同一列 则返回默认排序 或者排序顺序的第一个
+
+    if (!isSameCol) {
+      if (sortOrder === 'ascend' || sortOrder === 'descend') {
+        res.desc = descMap.get(sortOrder);
+      } else {
+        res.desc = sortOrder || descMap.get(directions[ARRAY_FIRST_INDEX]);
+      }
+
+      return res;
+    } // 如果是同一列
+    // 如果列给了默认的sortOrder则不在变化
+
+
+    if (sortOrder === 'ascend' || sortOrder === 'descend') {
+      res.desc = descMap.get(sortOrder);
+      return res;
+    } // 在所有方向上 往后取一个
+
+
+    var lastSortDirection = sortDirection.desc ? 'descend' : 'ascend';
+
+    var index = _lodash.default.findIndex(directions, function (item) {
+      return item === lastSortDirection;
+    });
+
+    var nextIndex = index + 1;
+    res.desc = descMap.get(directions[nextIndex]); // 如果没有排序方向，则返回默认排序对象
+
+    if (res.desc === undefined) {
+      res.id = '';
+    }
+
+    return res;
+  };
+
+  var getHeaderProps = function getHeaderProps(column) {
+    // @ts-ignore
+    var id = column.id,
+        canSort = column.canSort,
+        sorter = column.sorter,
+        sortOrder = column.sortOrder,
+        sortDirections = column.sortDirections;
+    var toggleProps = column.getSortByToggleProps(); // 仅在Table设置sortable时,所有列的canSort为true,此时为前端排序
+
+    if (canSort) {
+      // client sort
+      return _objectSpread(_objectSpread({}, column.getHeaderProps(_objectSpread({}, toggleProps))), {}, {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+
+          if (typeof toggleProps.onClick === 'function') {
+            var sortBy = getSortBy(id, sortDirections, sortOrder);
+            setSortBy(sortBy.desc === undefined ? [defaultSortObject] : [sortBy]); // 客户端排序时 需要重新设置排序
+
+            setSortDirection(sortBy);
+            onChange(sortBy);
+          }
+        }
+      });
+    } // 当列设置sorter属性时，则为服务端排序
+
+
+    if (sorter) {
+      // server sort
+      return _objectSpread(_objectSpread({}, column.getHeaderProps({
+        style: {
+          cursor: 'pointer'
+        }
+      })), {}, {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          var sortBy = getSortBy(id, sortDirections, sortOrder);
+          setSortDirection(sortBy);
+          onChange(sortBy);
+        }
+      });
+    }
+
+    return column.getHeaderProps();
+  };
+
+  var SortIcons = function SortIcons(_ref) {
+    var id = _ref.id;
+    var currentSortId = sortDirection.id,
+        desc = sortDirection.desc;
+
+    if (id !== currentSortId || !sortable) {
+      return null;
+    }
+
+    return desc ? /*#__PURE__*/_react.default.createElement(_SortDescendingLine2.default, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      fill: "currentColor",
+      size: 12
+    }) : /*#__PURE__*/_react.default.createElement(_SortAscendingLine2.default, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      fill: "currentColor",
+      size: 12
+    });
+  }; // 在页面拖拽完成之后 更新表格整体宽度以及每个列对应的列宽map
+
+
+  var adjustColumnsMapAfterDrag = function adjustColumnsMapAfterDrag(key, width) {
+    var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
+
+    var newMap = _lodash.default.cloneDeep(columnsWidthMapRef.current);
+
+    var originWidth = (_columnsWidthMapRef$c = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c === void 0 ? void 0 : (_columnsWidthMapRef$c2 = _columnsWidthMapRef$c.get(key)) === null || _columnsWidthMapRef$c2 === void 0 ? void 0 : _columnsWidthMapRef$c2.width;
+    var newWidth = (0, _utils.getValidWidthByNumber)(width);
+    newMap.set(key, {
+      isSpecific: true,
+      width: newWidth
+    });
+    columnsWidthMapRef.current = newMap;
+    columnsTotalWidthRef.current = columnsTotalWidthRef.current - originWidth + newWidth;
+  };
+
+  var handleStyleAndReturn = function handleStyleAndReturn(column, index) {
+    var _columnsWidthMapRef$c3, _getHeaderProps$style, _getHeaderProps$style2;
+
+    var key = index.toString();
+    var lastColumnsMapWidth = (_columnsWidthMapRef$c3 = columnsWidthMapRef.current.get(key)) === null || _columnsWidthMapRef$c3 === void 0 ? void 0 : _columnsWidthMapRef$c3.width; // 在拖动之前记录宽度map
+
+    var currentRenderWidth = Number((_getHeaderProps$style = getHeaderProps(column).style) === null || _getHeaderProps$style === void 0 ? void 0 : (_getHeaderProps$style2 = _getHeaderProps$style.width) === null || _getHeaderProps$style2 === void 0 ? void 0 : _getHeaderProps$style2.toString().replace('px', '')); // 表格内置计算的宽度 'px'
+
+    if (currentRenderWidth !== lastColumnsMapWidth) {
+      adjustColumnsMapAfterDrag(key, currentRenderWidth);
+    }
+
+    return _objectSpread(_objectSpread({}, getHeaderProps(column).style), {}, {
+      width: (0, _utils.getValidWidthByNumber)(currentRenderWidth)
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-thead"),
+    style: {
+      width: tableContentWidth
+    }
+  }, headerGroups.map(function (headerGroup) {
+    var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+        style = _headerGroup$getHeade.style,
+        headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
+
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, headerGroupProps, {
+      className: "".concat(prefixCls, "-row")
+    }), headerGroup.headers.map(function (column, index) {
+      var barProps = canResizeColumn ? column.getResizerProps() : {};
+      var headCellStyle = handleStyleAndReturn(column, index);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames3.default)(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell")),
+        style: headCellStyle,
+        key: column.id
+      }, /*#__PURE__*/_react.default.createElement("div", Object.assign({
+        className: "".concat(prefixCls, "-cell-content")
+      }, getHeaderProps(column), {
+        style: {
+          width: '100%'
+        }
+      }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.render('Header'), /*#__PURE__*/_react.default.createElement(SortIcons, {
+        id: column.id
+      }))), /*#__PURE__*/_react.default.createElement("div", Object.assign({}, barProps, {
+        className: (0, _classnames3.default)(_defineProperty({}, "".concat(prefixCls, "-dragBar"), canResizeColumn), "".concat(prefixCls, "-bar"))
+      })));
+    }));
+  }));
+}
+
+var _default = TableHead;
+exports.default = _default;

package/lib/Table/constant.d.ts

@@ -0,0 +1 @@
+

package/lib/Table/constant.js

@@ -0,0 +1 @@
+"use strict";

package/lib/Table/hooks/useFrame.d.ts

@@ -0,0 +1,7 @@
+export declare type Updater<State> = (prev: State) => State;
+/**
+ * Execute code before next frame but async
+ */
+export declare function useLayoutState<State>(defaultState: State): [State, (updater: Updater<State>) => void];
+/** Lock frame, when frame pass reset the lock. */
+export declare function useTimeoutLock<State>(defaultState?: State): [(state: State) => void, () => State];

package/lib/Table/hooks/useFrame.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLayoutState = useLayoutState;
+exports.useTimeoutLock = useTimeoutLock;
+
+var _react = require("react");
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * Execute code before next frame but async
+ */
+function useLayoutState(defaultState) {
+  var stateRef = (0, _react.useRef)(defaultState);
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceUpdate = _useState2[1];
+
+  var lastPromiseRef = (0, _react.useRef)(null);
+  var updateBatchRef = (0, _react.useRef)([]);
+
+  function setFrameState(updater) {
+    updateBatchRef.current.push(updater);
+    var promise = Promise.resolve(); // @ts-ignore;
+
+    lastPromiseRef.current = promise;
+    promise.then(function () {
+      if (lastPromiseRef.current === promise) {
+        var prevBatch = updateBatchRef.current;
+        var prevState = stateRef.current;
+        updateBatchRef.current = [];
+        prevBatch.forEach(function (batchUpdater) {
+          stateRef.current = batchUpdater(stateRef.current);
+        }); // @ts-ignore;
+
+        lastPromiseRef.current = null;
+
+        if (prevState !== stateRef.current) {
+          forceUpdate({});
+        }
+      }
+    });
+  }
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      // @ts-ignore;
+      lastPromiseRef.current = null;
+    };
+  }, []);
+  return [stateRef.current, setFrameState];
+}
+/** Lock frame, when frame pass reset the lock. */
+
+
+function useTimeoutLock(defaultState) {
+  var frameRef = (0, _react.useRef)(defaultState || null);
+  var timeoutRef = (0, _react.useRef)();
+  var TIMEOUT_DELAY = 50;
+
+  function cleanUp() {
+    window.clearTimeout(timeoutRef.current);
+  }
+
+  function setState(newState) {
+    // @ts-ignore;
+    frameRef.current = newState;
+    cleanUp();
+    timeoutRef.current = window.setTimeout(function () {
+      // @ts-ignore;
+      frameRef.current = null;
+      timeoutRef.current = undefined;
+    }, TIMEOUT_DELAY);
+  }
+
+  function getState() {
+    return frameRef.current;
+  }
+
+  (0, _react.useEffect)(function () {
+    return cleanUp;
+  }, []);
+  return [setState, getState];
+}

package/lib/Table/hooks/useTableColumn.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { IColumn } from '../interface';
+import { IWidthDetail } from '../utils';
+import { Cell } from 'react-table';
+import 'react-table/node_modules/@types/react';
+interface IUseTableColumnProps<T> {
+    columnsWidthMapRef: React.MutableRefObject<Map<string, IWidthDetail> | undefined>;
+    columnsTotalWidthRef: React.MutableRefObject<number>;
+    columnsRef: React.MutableRefObject<IColumn<T>[]>;
+    tableClientWidth: number;
+    sortable?: boolean;
+}
+declare function useTableColumn<T extends object = {}>(props: IUseTableColumnProps<T>): {
+    width: number | undefined;
+    Header: string | (() => null);
+    disableSortBy: boolean;
+    accessor: string;
+    Cell: ({ row, value }: Cell) => any;
+    title: string | null;
+    dataIndex: string;
+    render?: ((value: any, row: T, index: number) => React.ReactNode) | undefined;
+    minWidth?: number | undefined;
+    sorter?: boolean | "string" | "number" | "basic" | "datetime" | "alphanumeric" | undefined;
+    sortOrder?: false | "ascend" | "descend" | undefined;
+    sortDirections?: ("ascend" | "descend")[] | undefined;
+    selected?: boolean | undefined;
+}[];
+export default useTableColumn;