@aloudata/aloudata-design 0.2.7 → 0.3.0-beta.1

package/lib/Select/utils/iconUtil.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { ReactNode } from 'react';
+declare type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+export default function getIcons({ suffixIcon, clearIcon, menuItemSelectedIcon, removeIcon, loading, multiple, hasFeedback, prefixCls, showArrow, feedbackIcon, }: {
+    suffixIcon?: React.ReactNode;
+    clearIcon?: RenderNode;
+    menuItemSelectedIcon?: RenderNode;
+    removeIcon?: RenderNode;
+    loading?: boolean;
+    multiple?: boolean;
+    hasFeedback?: boolean;
+    feedbackIcon?: ReactNode;
+    prefixCls: string;
+    showArrow?: boolean;
+}): {
+    clearIcon: RenderNode;
+    suffixIcon: JSX.Element | (({ open, showSearch }: {
+        open: boolean;
+        showSearch: boolean;
+    }) => JSX.Element);
+    itemIcon: {} | null;
+    removeIcon: {} | null;
+};
+export {};

package/lib/Select/utils/iconUtil.js

@@ -0,0 +1,109 @@
+"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 = getIcons;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
+
+var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
+
+var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons/CheckOutlined"));
+
+var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
+
+var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
+
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+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 getIcons(_ref) {
+  var suffixIcon = _ref.suffixIcon,
+      clearIcon = _ref.clearIcon,
+      menuItemSelectedIcon = _ref.menuItemSelectedIcon,
+      removeIcon = _ref.removeIcon,
+      loading = _ref.loading,
+      multiple = _ref.multiple,
+      hasFeedback = _ref.hasFeedback,
+      prefixCls = _ref.prefixCls,
+      showArrow = _ref.showArrow,
+      feedbackIcon = _ref.feedbackIcon;
+  // Clear Icon
+  var mergedClearIcon = clearIcon;
+
+  if (!clearIcon) {
+    mergedClearIcon = /*#__PURE__*/React.createElement(_CloseCircleFilled.default, null);
+  } // Validation Feedback Icon
+
+
+  var getSuffixIconNode = function getSuffixIconNode(arrowIcon) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showArrow !== false && arrowIcon, hasFeedback && feedbackIcon);
+  }; // Arrow item icon
+
+
+  var mergedSuffixIcon = null;
+
+  if (suffixIcon !== undefined) {
+    mergedSuffixIcon = getSuffixIconNode(suffixIcon);
+  } else if (loading) {
+    mergedSuffixIcon = getSuffixIconNode( /*#__PURE__*/React.createElement(_LoadingOutlined.default, {
+      spin: true
+    }));
+  } else {
+    var iconCls = "".concat(prefixCls, "-suffix");
+
+    mergedSuffixIcon = function mergedSuffixIcon(_ref2) {
+      var open = _ref2.open,
+          showSearch = _ref2.showSearch;
+
+      if (open && showSearch) {
+        return getSuffixIconNode( /*#__PURE__*/React.createElement(_SearchOutlined.default, {
+          className: iconCls
+        }));
+      }
+
+      return getSuffixIconNode( /*#__PURE__*/React.createElement(_DownOutlined.default, {
+        className: iconCls
+      }));
+    };
+  } // Checked item icon
+
+
+  var mergedItemIcon = null;
+
+  if (menuItemSelectedIcon !== undefined) {
+    mergedItemIcon = menuItemSelectedIcon;
+  } else if (multiple) {
+    mergedItemIcon = /*#__PURE__*/React.createElement(_CheckOutlined.default, null);
+  } else {
+    mergedItemIcon = null;
+  }
+
+  var mergedRemoveIcon = null;
+
+  if (removeIcon !== undefined) {
+    mergedRemoveIcon = removeIcon;
+  } else {
+    mergedRemoveIcon = /*#__PURE__*/React.createElement(_Icon.default, {
+      type: 'close',
+      size: '1em'
+    });
+  }
+
+  return {
+    clearIcon: mergedClearIcon,
+    suffixIcon: mergedSuffixIcon,
+    itemIcon: mergedItemIcon,
+    removeIcon: mergedRemoveIcon
+  };
+}

package/lib/Space/index.d.ts

@@ -1,4 +1,4 @@
 import Space, { SpaceProps, SpaceContext } from 'antd/es/space';
 export type { SpaceSize } from 'antd/es/space';
-export { SpaceProps, SpaceContext };
+export type { SpaceProps, SpaceContext };
 export default Space;

package/lib/Space/index.js

@@ -5,12 +5,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SpaceContext", {
-  enumerable: true,
-  get: function get() {
-    return _space.SpaceContext;
-  }
-});
 exports.default = void 0;
 
 var _space = _interopRequireWildcard(require("antd/es/space"));

package/lib/Table/Table.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactElement } from 'react';
+import { ITableProps } from './interface';
+import './style/index';
+declare function Table<RecordType extends object = any>(props: ITableProps<RecordType>, ref?: React.Ref<unknown>): ReactElement;
+declare const _default: typeof Table;
+export default _default;

package/lib/Table/Table.js

@@ -0,0 +1,491 @@
+"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 _lodash = _interopRequireDefault(require("lodash"));
+
+var _classnames7 = _interopRequireDefault(require("classnames"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));
+
+var _reactInfiniteScrollComponent = _interopRequireDefault(require("react-infinite-scroll-component"));
+
+var _Empty = _interopRequireDefault(require("./components/Empty"));
+
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+
+var _reactTable = require("react-table");
+
+require("./style/index");
+
+var _excluded = ["style"],
+    _excluded2 = ["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;
+var DEFAULT_ROW_WIDTH = 0;
+var DEFAULT_BODY_HEIGHT = 0;
+var EMPTY_LENGTH = 0; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function Table(props, ref) {
+  var _classnames3;
+
+  var columns = props.columns,
+      data = props.data,
+      onRowSelected = props.onRowSelected,
+      loadMore = props.loadMore,
+      loading = props.loading,
+      hasNextPage = props.hasNextPage,
+      _props$sortable = props.sortable,
+      sortable = _props$sortable === void 0 ? false : _props$sortable,
+      defaultSort = props.defaultSort,
+      _props$resizeColumn = props.resizeColumn,
+      resizeColumn = _props$resizeColumn === void 0 ? false : _props$resizeColumn,
+      allSortDirections = props.sortDirections,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$innerScroll = props.innerScroll,
+      innerScroll = _props$innerScroll === void 0 ? false : _props$innerScroll,
+      _props$scrollThreshol = props.scrollThreshold,
+      scrollThreshold = _props$scrollThreshol === void 0 ? '150px' : _props$scrollThreshol,
+      _props$rowClassName = props.rowClassName,
+      rowClassName = _props$rowClassName === void 0 ? '' : _props$rowClassName,
+      _props$ellipsis = props.ellipsis,
+      ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
+      rowKey = props.rowKey;
+
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedRowId = _React$useState2[0],
+      setSelectedRowId = _React$useState2[1];
+
+  var tableBodyListRef = (0, _react.useRef)(null);
+  var tableRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(DEFAULT_BODY_HEIGHT),
+      _useState2 = _slicedToArray(_useState, 2),
+      tableClientWidth = _useState2[0],
+      setTableClientWidth = _useState2[1];
+
+  var RANDOM_ID = "INNER_SCROLL_ID_".concat(Math.random());
+
+  var _useState3 = (0, _react.useState)(DEFAULT_ROW_WIDTH),
+      _useState4 = _slicedToArray(_useState3, 2),
+      width = _useState4[0],
+      setWidth = _useState4[1]; // 如果页面整体宽度变化则重新计算
+
+
+  (0, _react.useEffect)(function () {
+    if (tableRef.current) {
+      setTableClientWidth(tableRef.current.clientWidth);
+    }
+  }, [width]);
+  var initialColumnsWidthMap = (0, _react.useMemo)(function () {
+    var map = new Map();
+
+    if (tableClientWidth !== DEFAULT_BODY_HEIGHT) {
+      var noGivenColumns = 0;
+      var givenColumnsTotalWidth = 0;
+      columns.forEach(function (column) {
+        if (column.width) {
+          map.set(column.dataIndex, column.width);
+          givenColumnsTotalWidth += column.width;
+        } else {
+          noGivenColumns += 1;
+        }
+      });
+      var averageWidth = (tableClientWidth - givenColumnsTotalWidth) / noGivenColumns;
+      return {
+        columnMap: map,
+        averageWidth: averageWidth
+      };
+    }
+
+    columns.forEach(function (column) {
+      if (column.width) {
+        map.set(column.dataIndex, column.width);
+      }
+    });
+    return {
+      columnMap: map,
+      averageWidth: DEFAULT_ROW_WIDTH
+    };
+  }, [columns, tableClientWidth]);
+  var newColumns = (0, _react.useMemo)(function () {
+    return columns.map(function (column) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        width: initialColumnsWidthMap.columnMap.get(column.dataIndex) || initialColumnsWidthMap.averageWidth,
+        Header: column.title ? column.title : function () {
+          return null;
+        },
+        disableSortBy: !sortable || typeof column.sorter === 'boolean',
+        accessor: column.dataIndex,
+        Cell: function Cell(_ref) {
+          var row = _ref.row,
+              value = _ref.value;
+          return typeof column.render === 'function' ? column.render(value, row.original, row.index) : value;
+        }
+      });
+    });
+  }, [columns, sortable, initialColumnsWidthMap]); // 默认排序的对象
+
+  var defaultSortObject = {
+    id: newColumns[ARRAY_FIRST_INDEX].accessor,
+    desc: newColumns[ARRAY_FIRST_INDEX].sortOrder && newColumns[ARRAY_FIRST_INDEX].sortOrder === 'descend' ? true : false
+  }; // 如果支持排序 但是没有默认排序 则默认按第一列倒叙排序
+
+  var getInitialSortDirection = function getInitialSortDirection() {
+    if (defaultSort && defaultSort.id) {
+      return defaultSort;
+    }
+
+    if (sortable) {
+      return defaultSortObject;
+    }
+
+    return {
+      id: '',
+      desc: false
+    };
+  };
+
+  var _React$useState3 = _react.default.useState(getInitialSortDirection()),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      sortDirection = _React$useState4[0],
+      setSortDirection = _React$useState4[1];
+
+  var getInitSortBy = function getInitSortBy() {
+    if (!(sortDirection === null || sortDirection === void 0 ? void 0 : sortDirection.id)) {
+      return [];
+    }
+
+    var sortColumn = newColumns.find(function (column) {
+      return column.accessor === sortDirection.id;
+    });
+
+    if (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sorter) {
+      return [];
+    }
+
+    return [sortDirection];
+  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  var getRowIdFn = function getRowIdFn(row, relativeIndex, parent) {
+    if (rowKey && parent) {
+      if (typeof rowKey === 'string') {
+        return [rowKey, relativeIndex].join('.');
+      }
+
+      if (typeof rowKey === 'function') {
+        return [rowKey(row), relativeIndex].join('.');
+      }
+    }
+
+    return relativeIndex.toString();
+  };
+
+  var _useTable = (0, _reactTable.useTable)({
+    columns: newColumns,
+    data: data,
+    disableMultiSort: true,
+    disableSortBy: !sortable,
+    getRowId: getRowIdFn,
+    initialState: {
+      sortBy: getInitSortBy()
+    }
+  }, _reactTable.useBlockLayout, _reactTable.useSortBy, _reactTable.useRowSelect, _reactTable.useResizeColumns),
+      getTableProps = _useTable.getTableProps,
+      getTableBodyProps = _useTable.getTableBodyProps,
+      headerGroups = _useTable.headerGroups,
+      rows = _useTable.rows,
+      prepareRow = _useTable.prepareRow,
+      setSortBy = _useTable.setSortBy,
+      totalColumnsWidth = _useTable.totalColumnsWidth;
+
+  var theadRowWidthRef = _react.default.useRef(DEFAULT_ROW_WIDTH);
+
+  var prefixCls = (0, _usePrefixCls.default)('', 'ald-table');
+  var onRowClick = (0, _react.useCallback)(function (row) {
+    if (!onRowSelected) {
+      return;
+    }
+
+    setSelectedRowId(row.id);
+    onRowSelected(row.original);
+  }, [onRowSelected]); // 排序的方向 倒叙{ 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 ? 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(_ref2) {
+    var id = _ref2.id;
+    var currentSortId = sortDirection.id,
+        desc = sortDirection.desc;
+
+    if (id !== currentSortId || !sortable) {
+      return null;
+    }
+
+    return desc ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      type: "sort_descending",
+      size: 12
+    }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      type: "sort_ascending",
+      size: 12
+    });
+  };
+
+  var scrollToTop = function scrollToTop() {
+    var INITIAL_OFFSET_TOP = 0;
+
+    if (tableBodyListRef && tableBodyListRef.current) {
+      tableBodyListRef.current.scrollTop = INITIAL_OFFSET_TOP;
+    }
+  };
+
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      backToTop: function backToTop() {
+        scrollToTop();
+      }
+    };
+  });
+
+  var LoadingNode = /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames7.default)("".concat(prefixCls, "-loading"))
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: "waiting",
+    size: 16,
+    className: (0, _classnames7.default)("".concat(prefixCls, "-loading-icon"))
+  }), "Loading");
+
+  var renderTableBody = function renderTableBody() {
+    if (loading && !rows.length) {
+      return LoadingNode;
+    }
+
+    if (!loading && !rows.length) {
+      return /*#__PURE__*/_react.default.createElement(_Empty.default, null);
+    }
+
+    var renderRowList = function renderRowList() {
+      return 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({}, rowStyle),
+          className: (0, _classnames7.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) {
+          return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, cell.getCellProps(), {
+            className: (0, _classnames7.default)("".concat(prefixCls, "-cell"))
+          }), cell.render('Cell'));
+        }));
+      });
+    };
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames7.default)("".concat(prefixCls, "-list"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
+      id: RANDOM_ID,
+      ref: tableBodyListRef
+    }, innerScroll ? /*#__PURE__*/_react.default.createElement(_reactInfiniteScrollComponent.default, {
+      dataLength: rows.length,
+      next: loadMore,
+      hasMore: !!hasNextPage,
+      loader: LoadingNode,
+      scrollableTarget: RANDOM_ID,
+      scrollThreshold: scrollThreshold
+    }, renderRowList()) : renderRowList());
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
+    onResize: function onResize(_ref3) {
+      var domWidth = _ref3.width;
+      setWidth(domWidth);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls,
+    ref: tableRef
+  }, /*#__PURE__*/_react.default.createElement("div", Object.assign({}, getTableProps(), {
+    className: (0, _classnames7.default)("".concat(prefixCls, "-table-wrap"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-column-resizable"), resizeColumn), _defineProperty(_classnames3, "".concat(prefixCls, "-init-loading"), data.length === EMPTY_LENGTH && loading), _defineProperty(_classnames3, "".concat(prefixCls, "-empty"), data.length === EMPTY_LENGTH && loading), _classnames3))
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-thead")
+  }, headerGroups.map(function (headerGroup) {
+    var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+        style = _headerGroup$getHeade.style,
+        headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
+
+    theadRowWidthRef.current = (style === null || style === void 0 ? void 0 : style.width) || DEFAULT_ROW_WIDTH;
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, headerGroupProps, {
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        width: resizeColumn ? style === null || style === void 0 ? void 0 : style.width : '100%'
+      }),
+      className: "".concat(prefixCls, "-row")
+    }), headerGroup.headers.map(function (column) {
+      var barPorps = resizeColumn ? column.getResizerProps() : {};
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames7.default)(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell")),
+        style: getHeaderProps(column).style,
+        key: column.id
+      }, /*#__PURE__*/_react.default.createElement("div", Object.assign({
+        className: "".concat(prefixCls, "-cell-content")
+      }, getHeaderProps(column), {
+        style: {
+          width: '100%'
+        }
+      }), column.render('Header'), /*#__PURE__*/_react.default.createElement(SortIcons, {
+        id: column.id
+      })), /*#__PURE__*/_react.default.createElement("div", Object.assign({}, barPorps, {
+        className: (0, _classnames7.default)(_defineProperty({}, "".concat(prefixCls, "-dragBar"), resizeColumn), "".concat(prefixCls, "-bar"))
+      })));
+    }));
+  })), /*#__PURE__*/_react.default.createElement("div", Object.assign({}, getTableBodyProps(), {
+    className: (0, _classnames7.default)("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
+    style: {
+      width: totalColumnsWidth
+    }
+  }), renderTableBody()))));
+}
+
+var _default = /*#__PURE__*/_react.default.forwardRef(Table);
+
+exports.default = _default;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare function TableEmpty(): JSX.Element;
+export default TableEmpty;