@aloudata/aloudata-design 1.7.0 → 1.8.0

package/dist/AldTable/helper.d.ts

@@ -0,0 +1,22 @@
+import { type Column } from 'react-table';
+import { ITableColumn } from './types';
+export declare function getTableColumns<TDataItem extends object>({ columns, columnSizing, totalWidth, }: {
+    columns: ITableColumn<TDataItem>[];
+    columnSizing: boolean;
+    totalWidth: number;
+}): Column<TDataItem>[];
+/**
+ * 计算
+ * @param columns
+ * @param columnSizing
+ * @param totalWidth
+ * @returns
+ */
+export declare function getColumnWidths(columns: ITableColumn<unknown>[], columnSizing: boolean, totalWidth: number): number[];
+/**
+ * 判断是否百分比字符串
+ * @param str
+ * @returns
+ */
+export declare function isPercentage(str: string): boolean;
+export declare function prefixCls(className: string): string;

package/dist/AldTable/helper.js

@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import React from 'react';
+export function getTableColumns(_ref) {
+  var columns = _ref.columns,
+      columnSizing = _ref.columnSizing,
+      totalWidth = _ref.totalWidth;
+  var columnWidths = getColumnWidths(columns, columnSizing, totalWidth);
+  return _.map(columns, function (col, index) {
+    return {
+      id: col.dataIndex || "column-".concat(index),
+      accessor: col.dataIndex,
+      Header: typeof col.title === 'string' ? /*#__PURE__*/React.createElement("div", {
+        key: col.dataIndex,
+        className: prefixCls('th-default')
+      }, col.title) : col.title,
+      Cell: function Cell(_ref2) {
+        var row = _ref2.row;
+
+        var colValue = _.get(row.original, col.dataIndex || '');
+
+        var node = col.render ? col.render(colValue, row.original, row.index) : colValue;
+        return /*#__PURE__*/React.createElement("div", {
+          className: prefixCls('td-default')
+        }, col.ellipsis ? /*#__PURE__*/React.createElement("div", {
+          className: prefixCls('td-ellipsis-content')
+        }, node) : node);
+      },
+      width: columnWidths[index]
+    };
+  });
+}
+/**
+ * 计算
+ * @param columns
+ * @param columnSizing
+ * @param totalWidth
+ * @returns
+ */
+
+export function getColumnWidths(columns, columnSizing, totalWidth) {
+  // 可改变列宽情况，react-table 可拖动列宽要求列宽值必须是数字，因为将百分比列宽转换为数字
+  var DEFAULT_WIDTH = 150; // 计算出每个列的具体宽度值
+
+  var columnWidths = _.map(columns, function (col) {
+    var width = col.width;
+
+    if (typeof width === 'number') {
+      return width;
+    }
+
+    if (typeof width === 'string' && isPercentage(width)) {
+      var widthNum = getNumberFromPercentageStr(width);
+      return widthNum * totalWidth / 100;
+    }
+
+    return DEFAULT_WIDTH;
+  });
+
+  var totalColumnWidth = _.sum(columnWidths); // 如果实际宽度大于列总宽度之和，则将多余的宽度按列宽的比例分配给各个列
+
+
+  if (totalWidth !== totalColumnWidth) {
+    // 如果实际宽度大于或小于列总宽度之和，则将差额的宽度按列宽的比例分配给各个列
+    var widthDiff = totalWidth - totalColumnWidth;
+    var widthRatios = columnWidths.map(function (width) {
+      return width / totalColumnWidth;
+    });
+    var newColumnWidths = columnWidths.map(function (width, index) {
+      return width + widthDiff * widthRatios[index];
+    }); // 计算新的列宽度总和
+
+    var newTotalColumnWidth = _.sum(newColumnWidths); // 计算并处理可能存在的误差
+
+
+    var errorWidth = totalWidth - newTotalColumnWidth; // 将误差加到最后一个列宽上
+
+    newColumnWidths[newColumnWidths.length - 1] += errorWidth;
+    return newColumnWidths;
+  } else {
+    return columnWidths;
+  }
+}
+
+function getNumberFromPercentageStr(str) {
+  var numberStr = str.replace('%', '');
+  return parseFloat(numberStr);
+}
+/**
+ * 判断是否百分比字符串
+ * @param str
+ * @returns
+ */
+
+
+export function isPercentage(str) {
+  var regex = /^100(\.\d+)?%?$|^\d{1,2}(\.\d+)?%$/;
+  return regex.test(str);
+}
+var ALD_PREFIX = 'ald-tmp-table';
+export function prefixCls(className) {
+  return "".concat(ALD_PREFIX, "-").concat(className);
+}

package/dist/AldTable/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ITableProps } from './types';
+declare function AldTable<TDataItem extends object>(props: ITableProps<TDataItem>): JSX.Element;
+export default AldTable;

package/dist/AldTable/index.js

@@ -0,0 +1,124 @@
+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 _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; }
+
+import classnames from 'classnames';
+import _ from 'lodash';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useMemo, useState } from 'react';
+import { useBlockLayout, useResizeColumns, useTable } from 'react-table';
+import { Empty, Pagination, Spin } from '..';
+import { getTableColumns, prefixCls } from "./helper";
+
+function AldTable(props) {
+  var columns = props.columns,
+      data = props.data,
+      rowKey = props.rowKey,
+      columnSizing = props.columnSizing,
+      sticky = props.sticky,
+      loading = props.loading,
+      pagination = props.pagination;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      totalSize = _useState2[0],
+      setTotalSize = _useState2[1];
+
+  var tableColumns = useMemo(function () {
+    if (!totalSize) {
+      return [];
+    }
+
+    return getTableColumns({
+      columns: columns,
+      columnSizing: !!columnSizing,
+      totalWidth: totalSize.width
+    });
+  }, [columns, totalSize, columnSizing]);
+
+  var _useTable = useTable({
+    columns: tableColumns,
+    data: data,
+    getRowId: function getRowId(row, index) {
+      var rowKeyStr = index;
+
+      if (typeof rowKey === 'function') {
+        rowKeyStr = rowKey(row);
+      } else if (rowKey !== undefined) {
+        rowKeyStr = _.get(row, rowKey, index);
+      }
+
+      return _.toString(rowKeyStr);
+    }
+  }, useBlockLayout, useResizeColumns),
+      getTableProps = _useTable.getTableProps,
+      getTableBodyProps = _useTable.getTableBodyProps,
+      rows = _useTable.rows,
+      prepareRow = _useTable.prepareRow,
+      headerGroups = _useTable.headerGroups;
+
+  var tableProps = useMemo(function () {
+    return getTableProps();
+  }, [getTableProps]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('container')
+  }, /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(size) {
+      setTotalSize(size);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('main')
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: prefixCls('main')
+  }, tableProps), _.map(headerGroups, function (headerGroup) {
+    var topStyle = sticky && _.get(sticky, 'offsetHeader') ? {
+      style: {
+        top: _.get(sticky, 'offsetHeader', 0)
+      }
+    } : {};
+    return /*#__PURE__*/React.createElement("div", _extends({}, headerGroup.getHeaderGroupProps(topStyle), {
+      className: classnames(prefixCls('tr'), _defineProperty({}, prefixCls('sticky'), !!sticky))
+    }), _.map(headerGroup.headers, function (column) {
+      return /*#__PURE__*/React.createElement("div", _extends({}, column.getHeaderProps(), {
+        className: prefixCls('th')
+      }), column.render('Header'), columnSizing && /*#__PURE__*/React.createElement("div", _extends({}, column.getResizerProps(), {
+        className: classnames(prefixCls('resizer'), {
+          isResizing: column.isResizing
+        })
+      })));
+    }));
+  }), /*#__PURE__*/React.createElement("div", getTableBodyProps(), /*#__PURE__*/React.createElement(Spin, {
+    spinning: !!loading,
+    tip: "Loading..."
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('body')
+  }, rows.length === 0 && !loading ? /*#__PURE__*/React.createElement(Empty, {
+    title: "No Data",
+    image: Empty.PRESENTED_IMAGE_SEARCH
+  }) : _.map(rows, function (row) {
+    prepareRow(row);
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: prefixCls('tr')
+    }, row.getRowProps()), _.map(row.cells, function (cell) {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: prefixCls('td')
+      }, cell.getCellProps()), cell.render('Cell'));
+    }));
+  }))))))), pagination && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('pagination')
+  }, /*#__PURE__*/React.createElement(Pagination, pagination)));
+}
+
+export default AldTable;

package/dist/AldTable/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/dist/AldTable/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/AldTable/style/index.less

@@ -0,0 +1,96 @@
+@import '../../style/index.less';
+@import '../../Pagination/style/index.less';
+@import '../../Spin/style/index.less';
+
+.ald-tmp-table-container {
+  position: relative;
+}
+
+.ald-tmp-table-main {
+  width: 100%;
+  color: #171717;
+  font-size: 13px;
+  line-height: 20px;
+  background: #fff;
+
+  .ald-tmp-table-main {
+    display: inline-block;
+    border-spacing: 0;
+  }
+
+  .ald-tmp-table-resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 5px;
+    background: rgb(0 0 0 / 0.5);
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+
+    &.isResizing {
+      background: blue;
+      opacity: 1;
+    }
+  }
+
+  .ald-tmp-table-th,
+  .ald-tmp-table-td {
+    position: relative;
+    overflow: hidden;
+    border-bottom: 1px solid #e8e8e8;
+    background-color: #fff;
+  }
+
+  .ald-tmp-table-th {
+    border-bottom: 1px solid #e8e8e8;
+  }
+
+  .ald-tmp-table-th-default {
+    font-weight: 500;
+    padding: 6px 12px;
+  }
+
+  .ald-tmp-table-td-default {
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-height: 48px;
+
+    .ald-tmp-table-td-ellipsis-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .ald-tmp-table-sticky {
+    position: sticky;
+    top: 0;
+    // 需要大于 Spin 的 z-index，Spin 的 z-index 为4
+    z-index: 5;
+  }
+
+  .ald-tmp-table-body {
+    min-height: 200px;
+  }
+}
+
+.ald-tmp-table-pagination {
+  margin-top: 18px;
+  display: flex;
+  justify-content: end;
+}
+
+.ald-tmp-table-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .ald-tmp-table-loading-inner {
+    width: 100%;
+  }
+}

package/dist/AldTable/types.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { IPaginationProps } from '../Pagination/types';
+export interface ITableProps<TDataItem extends object> {
+    columns: ITableColumn<TDataItem>[];
+    data: TDataItem[];
+    rowKey?: string | ((record: TDataItem) => string | number);
+    columnSizing?: boolean;
+    sticky?: boolean | {
+        offsetHeader: number;
+    };
+    loading?: boolean;
+    scroll?: {
+        x: number | string;
+        y: number | string;
+    };
+    pagination?: IPaginationProps;
+}
+export interface ITableColumn<TDataItem = unknown> {
+    title: string | React.ReactNode;
+    dataIndex?: string;
+    width?: number | string;
+    render?: (text: any, record: TDataItem, rowIndex: number) => React.ReactNode;
+    ellipsis?: boolean;
+    noPadding?: boolean;
+}

package/dist/AldTable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Checkbox/style/index.less

@@ -74,6 +74,7 @@
         z-index: 10;
         width: 10px;
         height: 8px;
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
         background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS42NzU3MyAwLjI2Mjg1MkMxMC4wODI4IDAuNjM2MDQ0IDEwLjExMDQgMS4yNjg2MSA5LjczNzE2IDEuNjc1NzNMNC4yMzcxNiA3LjY3NTczQzQuMDQ3NzUgNy44ODIzNiAzLjc4MDMxIDguMDAwMDEgMy41MDAwMSA4LjAwMDAxQzMuMjE5NyA4LjAwMDAxIDIuOTUyMjYgNy44ODIzNiAyLjc2Mjg1IDcuNjc1NzNMMC4yNjI4NTIgNC45NDg0NkMtMC4xMTAzNDEgNC41NDEzNCAtMC4wODI4Mzc4IDMuOTA4NzcgMC4zMjQyODEgMy41MzU1OEMwLjczMTQgMy4xNjIzOSAxLjM2Mzk3IDMuMTg5ODkgMS43MzcxNiAzLjU5NzAxTDMuNTAwMDEgNS41MjAxMUw4LjI2Mjg1IDAuMzI0MjgxQzguNjM2MDQgLTAuMDgyODM3OCA5LjI2ODYxIC0wLjExMDM0MSA5LjY3NTczIDAuMjYyODUyWiIgZmlsbD0iIzE1NzBFRiIvPgo8L3N2Zz4K');
         background-size: 100%, 100%;
         border-width: 0;

package/dist/Form/index.d.ts

@@ -18,7 +18,7 @@ interface IFormItemProps extends FormItemProps {
 declare const AldFormItem: {
     (props: IFormItemProps): JSX.Element;
     useStatus: () => {
-        status?: "" | "warning" | "error" | "success" | "validating" | undefined;
+        status?: "" | "success" | "error" | "warning" | "validating" | undefined;
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/dist/Icon/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/dist/Icon/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/Icon/style/index.less

@@ -0,0 +1,24 @@
+.icon {
+  font-size: 16px;
+}
+
+// 用于替换antd内的某些无法通过外部传入的图标
+.ald-iconSvg(@svgName; @size: 16px) {
+  font-size: @size;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &::before {
+    content: url('iconSvgs/@{svgName}.svg');
+    width: @size;
+    height: @size;
+    font-size: @size;
+    color: inherit;
+    display: inline-block;
+  }
+
+  & > svg {
+    display: none;
+  }
+}

package/dist/Menu/Divider.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
 import { MenuDividerProps } from 'antd/lib/menu/MenuDivider';
-export interface IMenuDividerProps extends MenuDividerProps {
-}
+export declare type IMenuDividerProps = MenuDividerProps;
 export default function Menu(props: IMenuDividerProps): JSX.Element;

package/dist/Menu/Divider.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Menu as AntdMenu } from 'antd';
+import React from 'react';
 var AntdMenuDivider = AntdMenu.Divider;
 export default function Menu(props) {
   return /*#__PURE__*/React.createElement(AntdMenuDivider, props);

package/dist/Navigator/style/index.less

@@ -124,7 +124,7 @@
         }
 
         &::before {
-          animation: 0.26s linear 0s hoverBgChange;
+          animation: 0.26s linear 0s hover-bg-change;
           animation-fill-mode: forwards;
         }
       }
@@ -141,7 +141,7 @@
   }
 }
 
-@keyframes hoverBgChange {
+@keyframes hover-bg-change {
   0% {
     width: 0%;
     background-color: @ND80;

package/dist/Pagination/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { IPaginationProps } from './types';
+declare function Pagination(props: IPaginationProps): JSX.Element;
+export default Pagination;
+/**
+ * 获取在安全范围内的当前页数
+ */
+export declare function getSafeCurrent(totalPage: number, current?: number): number;
+export declare const ELLIPSIS = "...";
+export declare type PaginationItemType = number | typeof ELLIPSIS;
+/**
+ * 获取分页组件需要显示的页码范围。
+ *
+ * @param totalPage 最大页码。
+ * @param currentPage 当前所在的页码。
+ *
+ * 如果总页数不超过5页，直接返回所有页码。
+ * 否则，在生成页码时，除了第一页和最后一页，还会显示以当前页为中心的连续页码，数量为 `surroundCount`*2 个，
+ * 当当前页码距离边界过近时，会在页码前后添加省略号。
+ * 当前页码 `currentPage` 的值必须介于 1 和总页数之间，如果超出这个范围，会自动修正。
+ *
+ * @returns 一个包含了所有要显示的页码和省略号的数组。
+ */
+export declare function getPaginationRange(totalPage: number, currentPage: number): PaginationItemType[];

package/dist/Pagination/index.js

@@ -0,0 +1,171 @@
+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; }
+
+import { ChevronLeftLine, ChevronRightLine } from '@aloudata/icons-react';
+import classnames from 'classnames';
+import _ from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+import Button from "../Button";
+
+function Pagination(props) {
+  var _props$current = props.current,
+      currPage = _props$current === void 0 ? 1 : _props$current,
+      pageSize = props.pageSize,
+      total = props.total,
+      onChange = props.onChange;
+  var totalPage = getTotalPage(total, pageSize);
+
+  var _useState = useState(getSafeCurrent(totalPage, currPage)),
+      _useState2 = _slicedToArray(_useState, 2),
+      current = _useState2[0],
+      setCurrent = _useState2[1];
+
+  useEffect(function () {
+    var safeCurrent = getSafeCurrent(totalPage, currPage);
+    setCurrent(safeCurrent);
+  }, [currPage, totalPage]);
+
+  if (pageSize === 0) {
+    throw new Error('pageSize must be greater than 0');
+  }
+
+  var onChangePage = useCallback(function (page) {
+    return function () {
+      if (page === current) {
+        return;
+      }
+
+      setCurrent(page);
+      onChange(page);
+    };
+  }, [onChange, current]);
+  var pageRange = getPaginationRange(totalPage, current);
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('container')
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(ChevronLeftLine, {
+      size: 16
+    }),
+    onClick: onChangePage(current - 1),
+    disabled: current === 1
+  }), _.map(pageRange, function (page, index) {
+    if (page === ELLIPSIS) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        className: prefixCls('ellipsis')
+      }, "...");
+    }
+
+    return /*#__PURE__*/React.createElement(Button, {
+      key: index,
+      icon: /*#__PURE__*/React.createElement("span", null, page),
+      className: classnames(_defineProperty({}, prefixCls('active'), page === current)),
+      onClick: onChangePage(page)
+    });
+  }), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(ChevronRightLine, {
+      size: 16
+    }),
+    onClick: onChangePage(current + 1),
+    disabled: current >= totalPage
+  }));
+}
+
+export default Pagination;
+/**
+ * 获取在安全范围内的当前页数
+ */
+
+export function getSafeCurrent(totalPage, current) {
+  if (current === undefined) {
+    return 1;
+  }
+
+  return Math.max(1, Math.min(current, totalPage));
+}
+
+function getTotalPage(total, pageSize) {
+  return Math.max(1, Math.ceil(total / pageSize));
+}
+
+export var ELLIPSIS = '...';
+
+/**
+ * 获取分页组件需要显示的页码范围。
+ *
+ * @param totalPage 最大页码。
+ * @param currentPage 当前所在的页码。
+ *
+ * 如果总页数不超过5页，直接返回所有页码。
+ * 否则，在生成页码时，除了第一页和最后一页，还会显示以当前页为中心的连续页码，数量为 `surroundCount`*2 个，
+ * 当当前页码距离边界过近时，会在页码前后添加省略号。
+ * 当前页码 `currentPage` 的值必须介于 1 和总页数之间，如果超出这个范围，会自动修正。
+ *
+ * @returns 一个包含了所有要显示的页码和省略号的数组。
+ */
+export function getPaginationRange(totalPage, currentPage) {
+  // 如果总页数不超过5页，直接返回所有页码
+  if (totalPage <= 5) {
+    return Array.from({
+      length: totalPage
+    }, function (_, i) {
+      return i + 1;
+    });
+  }
+
+  var surroundCount = 2;
+  var current = Math.max(1, Math.min(currentPage, totalPage));
+  var start = Math.max(2, current - surroundCount);
+  var end = Math.min(totalPage - 1, current + surroundCount); // Adjust start and end based on current page
+
+  if (current - start < surroundCount) {
+    end = Math.min(end + (surroundCount - (current - start)), totalPage - 1);
+  }
+
+  if (end - current < surroundCount) {
+    start = Math.max(start - (surroundCount - (end - current)), 2);
+  } // Check if current page is out of range
+
+
+  if (current < start || current > end) {
+    start = Math.max(2, current - surroundCount);
+    end = Math.min(totalPage - 1, current + surroundCount);
+  }
+
+  var range = [];
+
+  for (var i = start; i <= end; i++) {
+    range.push(i);
+  }
+
+  range.unshift(1);
+
+  if (start > 2 && range[1] !== ELLIPSIS) {
+    range.splice(1, 0, ELLIPSIS);
+  }
+
+  if (totalPage !== range[range.length - 1]) {
+    if (end < totalPage - 1 && range[range.length - 1] !== ELLIPSIS) {
+      range.splice(range.length, 0, ELLIPSIS);
+    }
+
+    range.push(totalPage);
+  }
+
+  return range;
+}
+
+function prefixCls(name) {
+  return "ald-pagination-".concat(name);
+}

package/dist/Pagination/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/dist/Pagination/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/Pagination/style/index.less

@@ -0,0 +1,22 @@
+@import '../../style/index.less';
+@import '../../Button/style/index.less';
+
+.ald-pagination-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ald-pagination-active.ald-btn.ald-btn.ald-btn-secondary {
+  &,
+  &:focus,
+  &:hover {
+    border: 1px solid #3271c9;
+    color: #3271c9;
+  }
+}
+
+.ald-pagination-ellipsis {
+  border: none;
+  color: #858585;
+}

package/dist/Pagination/types.d.ts

@@ -0,0 +1,6 @@
+export interface IPaginationProps {
+    current?: number;
+    pageSize: number;
+    total: number;
+    onChange: (current: number) => void;
+}

package/dist/Pagination/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Table/Table.d.ts

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

package/dist/Table/Table.js

@@ -34,7 +34,6 @@ import { useTimeoutLock } from "./hooks/useFrame";
 import "./style/index";
 import { getColumnsWidthMap, getValidScrollThreshold } from "./utils";
 var tableHeadRowHeight = 44;
-var SCROLLBAR_SIZE = 15;
 var ZERO = 0;
 
 function Table(props, ref) {

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

@@ -2,7 +2,7 @@ import React, { MutableRefObject } from 'react';
 import { HeaderGroup, SortingRule } from 'react-table';
 import { ISort, TSortOrder } from '../../interface';
 import { IWidthDetail } from '../../utils';
-interface ITableWithoutHeightProps<T extends object = {}> {
+interface ITableWithoutHeightProps<T extends Record<string, unknown>> {
     headerGroups: HeaderGroup<T>[];
     canResizeColumn?: boolean;
     defaultSort?: ISort<T>;
@@ -19,5 +19,5 @@ interface ITableWithoutHeightProps<T extends object = {}> {
     columnsWidthMapRef: MutableRefObject<Map<string, IWidthDetail> | undefined>;
     columnsTotalWidthRef: MutableRefObject<number>;
 }
-declare function TableHead<T extends object = {}>(props: ITableWithoutHeightProps<T>): JSX.Element;
+declare function TableHead<T extends Record<string, unknown>>(props: ITableWithoutHeightProps<T>): JSX.Element;
 export default TableHead;

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

@@ -1,11 +1,5 @@
-var _excluded = ["style"];
-
 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 _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; }
@@ -195,11 +189,10 @@ function TableHead(props) {
 
 
   var adjustColumnsMapAfterDrag = function adjustColumnsMapAfterDrag(key, width) {
-    var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
-
-    var newMap = _.cloneDeep(columnsWidthMapRef.current);
+    var _$cloneDeep, _columnsWidthMapRef$c, _columnsWidthMapRef$c2, _columnsWidthMapRef$c3;
 
-    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 newMap = (_$cloneDeep = _.cloneDeep(columnsWidthMapRef.current)) !== null && _$cloneDeep !== void 0 ? _$cloneDeep : new Map();
+    var originWidth = (_columnsWidthMapRef$c = (_columnsWidthMapRef$c2 = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c2 === void 0 ? void 0 : (_columnsWidthMapRef$c3 = _columnsWidthMapRef$c2.get(key)) === null || _columnsWidthMapRef$c3 === void 0 ? void 0 : _columnsWidthMapRef$c3.width) !== null && _columnsWidthMapRef$c !== void 0 ? _columnsWidthMapRef$c : 0;
     var newWidth = getValidWidthByNumber(width);
     newMap.set(key, {
       isSpecific: true,
@@ -210,14 +203,14 @@ function TableHead(props) {
   };
 
   var handleStyleAndReturn = function handleStyleAndReturn(column, index) {
-    var _get, _getHeaderProps$style, _getHeaderProps$style2;
+    var _columnsWidthMapRef$c4, _columnsWidthMapRef$c5, _getHeaderProps$style, _getHeaderProps$style2;
 
     var key = index.toString();
-    var lastColumnsMapWidth = (_get = columnsWidthMapRef.current.get(key)) === null || _get === void 0 ? void 0 : _get.width; // 在拖动之前记录宽度map
+    var lastColumnsMapWidth = (_columnsWidthMapRef$c4 = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c4 === void 0 ? void 0 : (_columnsWidthMapRef$c5 = _columnsWidthMapRef$c4.get(key)) === null || _columnsWidthMapRef$c5 === void 0 ? void 0 : _columnsWidthMapRef$c5.width; // Optional chaining to handle undefined
 
-    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'
+    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', '')); // Table's internal calculated width in 'px'
 
-    if (currentRenderWidth !== lastColumnsMapWidth) {
+    if (lastColumnsMapWidth !== undefined && currentRenderWidth !== lastColumnsMapWidth) {
       adjustColumnsMapAfterDrag(key, currentRenderWidth);
     }
 
@@ -234,10 +227,10 @@ function TableHead(props) {
     }
   }, headerGroups.map(function (headerGroup) {
     var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
-        style = _headerGroup$getHeade.style,
-        headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
+        headerGroupProps = Object.assign({}, _headerGroup$getHeade);
 
     return /*#__PURE__*/React.createElement("div", _extends({}, headerGroupProps, {
+      key: headerGroupProps.key,
       className: "".concat(prefixCls, "-row")
     }), headerGroup.headers.map(function (column, index) {
       var barProps = canResizeColumn ? column.getResizerProps() : {};

package/dist/Table/utils.js

@@ -83,9 +83,9 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap // 容器
     }
 
     if (lastWidthMap && isSpecific) {
-      var _lastWidthMap$get2;
+      var _lastWidthMap$get$wid, _lastWidthMap$get2;
 
-      width = (_lastWidthMap$get2 = lastWidthMap.get(key)) === null || _lastWidthMap$get2 === void 0 ? void 0 : _lastWidthMap$get2.width;
+      width = (_lastWidthMap$get$wid = (_lastWidthMap$get2 = lastWidthMap.get(key)) === null || _lastWidthMap$get2 === void 0 ? void 0 : _lastWidthMap$get2.width) !== null && _lastWidthMap$get$wid !== void 0 ? _lastWidthMap$get$wid : width;
     }
 
     if (width === NOT_SET) {
@@ -96,16 +96,16 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap // 容器
 
     widthMap.set(key, {
       width: width,
-      isSpecific: isSpecific
+      isSpecific: Boolean(isSpecific)
     });
   }); // 设定宽度大于容器宽度时
 
   if (settedTotalWidth < clientWidth) {
     unsetWidthIndex.map(function (item) {
-      var _widthMap$get;
+      var _widthMap$get$isSpeci, _widthMap$get;
 
       return widthMap.set(item, {
-        isSpecific: (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific,
+        isSpecific: (_widthMap$get$isSpeci = (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific) !== null && _widthMap$get$isSpeci !== void 0 ? _widthMap$get$isSpeci : false,
         width: COLUMN_MIN_WIDTH
       });
     });
@@ -116,10 +116,10 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap // 容器
     var leftWidth = clientWidth - settedTotalWidth;
     var average = getValidWidthByNumber(leftWidth / unsetWidthIndex.length);
     unsetWidthIndex.map(function (item) {
-      var _widthMap$get2;
+      var _widthMap$get$isSpeci2, _widthMap$get2;
 
       return widthMap.set(item, {
-        isSpecific: (_widthMap$get2 = widthMap.get(item)) === null || _widthMap$get2 === void 0 ? void 0 : _widthMap$get2.isSpecific,
+        isSpecific: (_widthMap$get$isSpeci2 = (_widthMap$get2 = widthMap.get(item)) === null || _widthMap$get2 === void 0 ? void 0 : _widthMap$get2.isSpecific) !== null && _widthMap$get$isSpeci2 !== void 0 ? _widthMap$get$isSpeci2 : false,
         width: average
       });
     });
@@ -130,7 +130,10 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap // 容器
 
     var key = index.toString();
     var width = (_widthMap$get3 = widthMap.get(key)) === null || _widthMap$get3 === void 0 ? void 0 : _widthMap$get3.width;
-    totalColumnWidth += width;
+
+    if (width !== undefined) {
+      totalColumnWidth += width;
+    }
   });
   return {
     columnsWidthMap: widthMap,

package/dist/Tree/index.d.ts

@@ -5,8 +5,8 @@ import { BasicDataNode } from 'rc-tree/lib/interface';
 import React, { ForwardedRef } from 'react';
 export type { DataNode, EventDataNode } from 'antd/lib/tree';
 export type { DirectoryTreeProps, ExpandAction as DirectoryTreeExpandAction, } from 'antd/lib/tree/DirectoryTree';
-export type { TreeProps, AntTreeNode, AntTreeNodeMouseEvent, AntTreeNodeExpandedEvent, AntTreeNodeCheckedEvent, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, AntTreeNodeProps, };
-declare type TreeProps<T extends BasicDataNode = DataNode> = Omit<AntdTreeProps<T>, 'switcherIcon'>;
+export type { AntTreeNode, AntTreeNodeMouseEvent, AntTreeNodeExpandedEvent, AntTreeNodeCheckedEvent, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, AntTreeNodeProps, };
+export declare type TreeProps<T extends BasicDataNode = DataNode> = Omit<AntdTreeProps<T>, 'switcherIcon'>;
 declare const _default: <T extends BasicDataNode = DataNode>(props: TreeProps<T> & {
     ref?: React.ForwardedRef<RcTree<DataNode>> | undefined;
 }) => React.ReactElement;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { MenuClickEventHandler } from 'rc-menu/lib/interface';
+export { default as AldTable } from './AldTable';
+export type { ITableColumn, ITableProps as IAldTableProps, } from './AldTable/types';
 export { default as Alert } from './Alert';
 export type { AlertProps } from './Alert';
 export { default as App } from './App';
@@ -55,6 +57,7 @@ export type { ModalFuncProps, ModalProps } from './Modal';
 export { default as Navigator } from './Navigator';
 export type { IMenuItem as NavigatorMenu, INavigatorProps as NavigatorProps, ISelectedMenuInfo as SelectedMenuInfo, } from './Navigator';
 export { default as notification } from './notification';
+export { default as Pagination } from './Pagination';
 export { default as Popconfirm } from './Popconfirm';
 export type { PopconfirmProps } from './Popconfirm';
 export { default as Popover } from './Popover';

package/dist/index.js

@@ -1,5 +1,6 @@
 // / <reference path="../typings.d.ts" />
 export { MenuClickEventHandler } from 'rc-menu/lib/interface';
+export { default as AldTable } from "./AldTable";
 export { default as Alert } from "./Alert";
 export { default as App } from "./App";
 export { default as AProgress } from "./AProgress";
@@ -32,6 +33,7 @@ export { default as message } from "./message"; // alias, keep API the same as a
 export { default as Modal } from "./Modal";
 export { default as Navigator } from "./Navigator";
 export { default as notification } from "./notification";
+export { default as Pagination } from "./Pagination";
 export { default as Popconfirm } from "./Popconfirm";
 export { default as Popover } from "./Popover";
 export { default as Progress } from "./Progress";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",
@@ -81,6 +81,7 @@
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.4.0",
     "@types/lodash": "^4.14.191",
+    "@types/react-table": "^7.7.14",
     "@umijs/lint": "^4.0.0",
     "babel-jest": "^29.4.2",
     "babel-plugin-import": "^1.13.5",