@aloudata/aloudata-design 1.9.17 → 1.10.0

package/dist/Table/helper.js

@@ -0,0 +1,121 @@
+import _ from 'lodash';
+import Cell from "./components/Cell";
+import Header from "./components/Header";
+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 不能为 ''
+      accessorKey: col.dataIndex || "column-".concat(index),
+      header: Header,
+      cell: Cell,
+      size: columnWidths[index],
+      meta: col
+    };
+  });
+}
+
+/**
+ * 计算
+ * @param columns
+ * @param columnSizing
+ * @param totalWidth
+ * @returns
+ */
+export function getColumnWidths(columns, columnSizing, totalWidth) {
+  // 可改变列宽情况，react-table 可拖动列宽要求列宽值必须是数字，因为将百分比列宽转换为数字
+  var DEFAULT_WIDTH = 150;
+  // 计算出每个列的具体宽度值
+  var columnWidthInfos = _.map(columns, function (col) {
+    var width = col.width;
+    if (typeof width === 'number') {
+      return {
+        width: width,
+        isSpecific: true
+      };
+    }
+    if (typeof width === 'string' && isPercentage(width)) {
+      var widthNum = getNumberFromPercentageStr(width);
+      return {
+        width: widthNum * totalWidth / 100,
+        isSpecific: false
+      };
+    }
+    return {
+      width: DEFAULT_WIDTH,
+      isSpecific: false,
+      radio: 0
+    };
+  });
+  var totalColumnWidth = _.sum(columnWidthInfos.map(function (col) {
+    return col.width;
+  }));
+  if (totalWidth !== totalColumnWidth) {
+    // 如果实际宽度不等于列总宽度之和，则将差额的宽度按列宽的比例分配给各个没有设置具体宽度值的列
+
+    // 指定了具体值的列的总宽度
+    var specificWidth = _.sum(_.filter(columnWidthInfos, function (col) {
+      return col.isSpecific;
+    }).map(function (col) {
+      return col.width;
+    }));
+    var offset = totalWidth - totalColumnWidth;
+
+    // 计算每个没有设置具体宽度值的列应该分到的差值的占比
+    var totalOffsetWidth = totalColumnWidth - specificWidth;
+    var newColumnWidths = columnWidthInfos.map(function (colWidthInfo) {
+      if (colWidthInfo.isSpecific) {
+        return colWidthInfo.width;
+      }
+      // 未指定具体宽度值的列，分配差值
+      if (totalOffsetWidth !== 0) {
+        var radio = colWidthInfo.width / totalOffsetWidth;
+        return colWidthInfo.width + offset * radio;
+      }
+      return 0;
+    });
+
+    // 计算新的列宽度总和
+    var newTotalColumnWidth = _.sum(newColumnWidths);
+
+    // 计算并处理可能存在的误差
+    var errorWidth = totalWidth - newTotalColumnWidth;
+
+    // 将误差加到最后一个没有指定具体值的列上
+    var colIndex = _.findLastIndex(columnWidthInfos, function (columnWidthInfo) {
+      return !columnWidthInfo.isSpecific;
+    });
+    if (colIndex !== -1) {
+      var newWidth = newColumnWidths[colIndex] + errorWidth;
+      if (newWidth >= 0) {
+        newColumnWidths[colIndex] += errorWidth;
+      }
+    }
+    return newColumnWidths;
+  } else {
+    return _.map(columnWidthInfos, function (columnWidthInfo) {
+      return columnWidthInfo.width;
+    });
+  }
+}
+export 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-table';
+export function prefixCls(className) {
+  return "".concat(ALD_PREFIX, "-").concat(className);
+}

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { IScroll } from '../types';
+/**
+ * 横向滚动条相关逻辑
+ * @param props
+ * @returns
+ */
+export default function useScrollX(props: IProps): {
+    realWidth: number | undefined;
+    headerRef: import("react").RefObject<HTMLDivElement>;
+    onBodyScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+};
+interface IProps {
+    scroll: IScroll;
+    totalSize: {
+        width: number;
+        height: number;
+    } | null;
+}
+/**
+ * 获取可用实际宽度
+ * @param scrollX 横向宽度值
+ * @param width 容器的宽度
+ */
+export declare function getRealWidth(scrollX: IScroll['x'], width: number): number;
+export {};

package/dist/Table/hooks/useScroll.js

@@ -0,0 +1,57 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { getNumberFromPercentageStr } from "../helper";
+/**
+ * 横向滚动条相关逻辑
+ * @param props
+ * @returns
+ */
+export default function useScrollX(props) {
+  var scroll = props.scroll,
+    totalSize = props.totalSize;
+  var headerRef = useRef(null);
+  var animationFrameId = useRef(null);
+  var x = scroll.x;
+  var realWidth = useMemo(function () {
+    if (!totalSize) {
+      return;
+    }
+    return getRealWidth(x, totalSize.width);
+  }, [x, totalSize]);
+  var onBodyScroll = useCallback(function (e) {
+    // animationFrame 可以保证横向滚动时，header 和 body 不会出现不同步的情况
+    if (animationFrameId.current !== null) {
+      window.cancelAnimationFrame(animationFrameId.current);
+    }
+    var scrollLeft = e.target.scrollLeft;
+    animationFrameId.current = window.requestAnimationFrame(function () {
+      var _headerRef$current;
+      (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.scrollTo({
+        left: scrollLeft
+      });
+    });
+  }, []);
+  return {
+    realWidth: realWidth,
+    headerRef: headerRef,
+    onBodyScroll: onBodyScroll
+  };
+}
+/**
+ * 获取可用实际宽度
+ * @param scrollX 横向宽度值
+ * @param width 容器的宽度
+ */
+export function getRealWidth(scrollX, width) {
+  if (typeof scrollX === 'string') {
+    var percent = getNumberFromPercentageStr(scrollX);
+    if (isNaN(percent)) {
+      console.error('scroll.x is not percentage string');
+      return width;
+    }
+    return percent * width / 100;
+  }
+  if (typeof scrollX === 'number') {
+    return scrollX;
+  }
+  return width;
+}

package/dist/Table/index.d.ts

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

package/dist/Table/index.js

@@ -1,2 +1,177 @@
-import Table from "./Table";
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import classnames from 'classnames';
+import _ from 'lodash';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useMemo, useState } from 'react';
+import { Empty, Pagination, ScrollArea, Spin } from '..';
+import { getTableColumns, prefixCls } from "./helper";
+import useScrollX from "./hooks/useScroll";
+// 32 行高 + 1 底线高度
+var HEADER_HEIGHT = 33;
+function Table(props) {
+  var _classnames;
+  var columns = props.columns,
+    data = props.data,
+    rowKey = props.rowKey,
+    columnSizing = props.columnSizing,
+    sticky = props.sticky,
+    loading = props.loading,
+    pagination = props.pagination,
+    _props$scroll = props.scroll,
+    scroll = _props$scroll === void 0 ? {} : _props$scroll,
+    emptyComponent = props.empty,
+    _props$rowClassName = props.rowClassName,
+    rowClassName = _props$rowClassName === void 0 ? function () {
+      return '';
+    } : _props$rowClassName;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    totalSize = _useState2[0],
+    setTotalSize = _useState2[1];
+  var y = scroll.y;
+  var _useScrollX = useScrollX({
+      totalSize: totalSize,
+      scroll: scroll
+    }),
+    realWidth = _useScrollX.realWidth,
+    onBodyScroll = _useScrollX.onBodyScroll,
+    headerRef = _useScrollX.headerRef;
+  var tableColumns = useMemo(function () {
+    if (!totalSize || !realWidth) {
+      return [];
+    }
+    return getTableColumns({
+      columns: columns,
+      columnSizing: !!columnSizing,
+      totalWidth: realWidth
+    });
+  }, [columns, totalSize, columnSizing, realWidth]);
+  var tableInstance = useReactTable({
+    columns: tableColumns,
+    data: data,
+    getCoreRowModel: getCoreRowModel(),
+    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);
+    },
+    columnResizeMode: 'onChange'
+  });
+
+  // 渲染 header
+  var headerGroups = tableInstance.getHeaderGroups();
+  var _tableInstance$getRow = tableInstance.getRowModel(),
+    rows = _tableInstance$getRow.rows;
+  var isStickyWork = !!sticky && y === undefined;
+  var headerStyle = {};
+  if (isStickyWork && _.get(sticky, 'offsetHeader')) {
+    headerStyle.top = _.get(sticky, 'offsetHeader', 0);
+  }
+  var headerContent = /*#__PURE__*/React.createElement("div", {
+    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _defineProperty(_classnames, prefixCls('overflow-x'), true), _classnames)),
+    ref: headerRef,
+    style: headerStyle
+  }, _.map(headerGroups, function (headerGroup) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls('tr'),
+      key: headerGroup.id
+    }, _.map(headerGroup.headers, function (header) {
+      var _classnames2;
+      return /*#__PURE__*/React.createElement("div", {
+        className: prefixCls('th'),
+        style: {
+          width: header.getSize()
+        },
+        key: header.id
+      }, flexRender(header.column.columnDef.header, header.getContext()), columnSizing && /*#__PURE__*/React.createElement("div", {
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        className: classnames(prefixCls('resizer'), (_classnames2 = {}, _defineProperty(_classnames2, prefixCls('self-resizing'), header.column.getIsResizing()), _defineProperty(_classnames2, prefixCls('resizing'), tableInstance.getState().columnSizingInfo.isResizingColumn), _classnames2))
+      }));
+    }));
+  }));
+
+  // 渲染 body
+  var bodyContent = /*#__PURE__*/React.createElement(Spin, {
+    spinning: !!loading,
+    tip: "Loading..."
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('body'),
+    style: {
+      width: tableInstance.getTotalSize()
+    }
+  }, rows.length === 0 && !loading ? emptyComponent || /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('empty')
+  }, /*#__PURE__*/React.createElement(Empty, {
+    title: "No Data",
+    image: Empty.PRESENTED_IMAGE_SEARCH
+  })) : _.map(rows, function (row, rowIndex) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: row.id,
+      className: classnames(prefixCls('tr'), rowClassName(row.original, rowIndex))
+    }, _.map(row.getVisibleCells(), function (cell) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: prefixCls('td'),
+        key: cell.id,
+        style: {
+          width: cell.column.getSize()
+        }
+      }, flexRender(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  })));
+  var tableContent = y && totalSize ? /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('content')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('header'),
+    style: {
+      height: HEADER_HEIGHT
+    }
+  }, headerContent), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: totalSize.height - HEADER_HEIGHT
+    },
+    className: prefixCls('body-scroll')
+  }, /*#__PURE__*/React.createElement(ScrollArea, {
+    onViewportScroll: onBodyScroll
+  }, bodyContent))) : /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('content')
+  }, headerContent, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ScrollArea, {
+    onViewportScroll: onBodyScroll
+  }, bodyContent)));
+  var tableStyle = {};
+  if (y) {
+    tableStyle.height = y;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('container'),
+    style: tableStyle
+  }, /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(size) {
+      // 在 Modal 中使用表格组件，偶现 width 和 offsetWidth 不一致的情况，导致表格宽度不正确，具体原因未找到
+      // 实践发现 offsetWidth 一直是正确的宽度
+      setTotalSize({
+        width: size.offsetWidth,
+        height: size.offsetHeight
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(prefixCls('main'), _defineProperty({}, prefixCls('overflow-hidden'), !!y))
+  }, tableContent)), pagination && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('pagination')
+  }, /*#__PURE__*/React.createElement(Pagination, pagination)));
+}
 export default Table;