@aloudata/aloudata-design 2.13.0 → 2.13.2

package/dist/Table/helper.d.ts

@@ -23,7 +23,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "left" | "right" | "center" | undefined;
+        align?: "left" | "center" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
         sortOrder?: "ascend" | "descend" | null | undefined;
     };

package/dist/Table/index.js

@@ -11,6 +11,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { useVirtualizer } from '@tanstack/react-virtual';
 import classnames from 'classnames';
 import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
@@ -37,6 +38,8 @@ function Table(props, ref) {
     _props$scroll = props.scroll,
     scroll = _props$scroll === void 0 ? {} : _props$scroll,
     emptyComponent = props.empty,
+    _props$virtual = props.virtual,
+    virtual = _props$virtual === void 0 ? false : _props$virtual,
     _props$rowClassName = props.rowClassName,
     rowClassName = _props$rowClassName === void 0 ? function () {
       return '';
@@ -178,12 +181,29 @@ function Table(props, ref) {
   var EMPTY_SMALL_SIZE_HEIGHT = 436;
   var isSmallEmpty = totalSize && totalSize.height < EMPTY_SMALL_SIZE_HEIGHT;
   var isEmpty = rows.length === 0 && !loading;
+  var rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    estimateSize: function estimateSize() {
+      return 48;
+    },
+    // estimate row height for accurate scrollbar dragging
+    getScrollElement: function getScrollElement() {
+      return bodyRef.current;
+    },
+    // measure dynamic row height, except in firefox because it measures table border height incorrectly
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? function (element) {
+      return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height;
+    } : undefined,
+    overscan: 5
+  });
+  var tableRows = virtual ? rowVirtualizer.getVirtualItems() : rows;
 
   // 渲染 body
   var bodyContent = /*#__PURE__*/React.createElement("div", {
     className: prefixCls('body'),
     style: {
-      width: totalColumnsWidth
+      width: totalColumnsWidth,
+      height: virtual ? rowVirtualizer.getTotalSize() : 'auto'
     }
   }, isEmpty ? /*#__PURE__*/React.createElement("div", {
     style: {
@@ -194,13 +214,22 @@ function Table(props, ref) {
   }, /*#__PURE__*/React.createElement(Empty, {
     image: isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH,
     size: isSmallEmpty ? 'small' : undefined
-  }))) : _.reduce(rows, function (rowList, row, rowIndex) {
+  }))) : _.reduce(tableRows, function (rowList, rowData, rowIndex) {
     var _classnames4;
+    var row = virtual ? rows[rowData.index] : rowData;
     var rowId = row.id;
     var rowNode = /*#__PURE__*/React.createElement("div", {
       key: rowId,
+      "data-index": virtual ? rowData.index : rowIndex,
       className: classnames(prefixCls('tr'), (_classnames4 = {}, _defineProperty(_classnames4, prefixCls('row-hover'), typeof onRowClick === 'function'), _defineProperty(_classnames4, prefixCls('no-border-tr'), isShowPagination && rowIndex === rows.length - 1), _classnames4), rowClassName(row.original, rowIndex)),
-      onClick: onClickRow(row.original, rowIndex)
+      ref: function ref(node) {
+        return rowVirtualizer.measureElement(node);
+      },
+      onClick: onClickRow(row.original, rowIndex),
+      style: virtual ? {
+        position: 'absolute',
+        transform: "translateY(".concat(rowData.start, "px)")
+      } : {}
     }, _.map(row.getVisibleCells(), function (cell, colIndex) {
       var _getColumnFixedInfo2 = getColumnFixedInfo(colIndex),
         fixedClassName = _getColumnFixedInfo2.className,
@@ -244,13 +273,17 @@ function Table(props, ref) {
     }
     return rowList;
   }, []));
+  var tableContentHeight = useMemo(function () {
+    return y && totalSize ? totalSize.height - HEADER_HEIGHT - (isShowFooter ? FOOTER_HEIGHT : 0) : 'auto';
+  }, [y, totalSize, isShowFooter]);
   var tableContent = /*#__PURE__*/React.createElement(Spin, {
     spinning: !!loading
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls('content')
   }, headerContent, /*#__PURE__*/React.createElement("div", {
     style: {
-      height: y && totalSize ? totalSize.height - HEADER_HEIGHT - (isShowFooter ? FOOTER_HEIGHT : 0) : 'auto'
+      height: tableContentHeight,
+      position: virtual ? 'relative' : undefined
     },
     className: classnames(prefixCls('body-scroll'), (_classnames5 = {}, _defineProperty(_classnames5, prefixCls('scroll-y'), y !== undefined), _defineProperty(_classnames5, prefixCls('scroll-hidden'), isEmpty), _classnames5)),
     ref: bodyRef,

package/dist/Table/types.d.ts

@@ -20,6 +20,7 @@ export interface ITableProps<TDataItem extends object> {
     onSort?: (columnKey: string, order: 'ascend' | 'descend' | null) => void;
     rowSelection?: IRowSelection<TDataItem>;
     bordered?: boolean;
+    virtual?: boolean;
 }
 export type TRowKey<TDataItem extends object> = string | ((record: TDataItem) => string | number);
 export interface ITableCellErrorInfo {

package/dist/Tag/index.d.ts

@@ -31,6 +31,10 @@ export interface TagProps {
      * 是否禁用
      */
     disabled?: boolean;
+    /**
+     * 最大宽度
+     */
+    maxWidth?: number;
     className?: string;
 }
 export default function Tag(props: TagProps): React.JSX.Element;

package/dist/Tag/index.js

@@ -18,6 +18,7 @@ export default function Tag(props) {
     status = props.status,
     mode = props.mode,
     disabled = props.disabled,
+    maxWidth = props.maxWidth,
     className = props.className;
   var tagColor = getColor(color, status);
   var bgColor = mode === 'border' ? '#fff' : convertHexToRGBA(tagColor, mode === 'fill' ? 0.16 : 0.06);
@@ -33,12 +34,14 @@ export default function Tag(props) {
     }
     onClose === null || onClose === void 0 ? void 0 : onClose(e);
   }, [disabled, onClose]);
+  var DEFAULT_MAX_WIDTH = 160;
   return /*#__PURE__*/React.createElement("span", {
     className: classNames(prefixCls('container'), (_classNames = {}, _defineProperty(_classNames, prefixCls('small'), size === 'small'), _defineProperty(_classNames, prefixCls('large'), size === 'large'), _defineProperty(_classNames, prefixCls('clickable'), typeof onClick === 'function'), _defineProperty(_classNames, prefixCls('disabled'), disabled), _classNames), className || ''),
     style: {
       backgroundColor: bgColor,
       color: convertHexToRGBA(tagColor, 1),
-      borderColor: mode === 'fill' ? 'transparent' : convertHexToRGBA(tagColor, 0.32)
+      borderColor: mode === 'fill' ? 'transparent' : convertHexToRGBA(tagColor, 0.32),
+      maxWidth: maxWidth || DEFAULT_MAX_WIDTH
     },
     onClick: onTagClick
   }, icon && /*#__PURE__*/React.createElement("span", {

package/dist/Tag/style/index.less

@@ -10,7 +10,6 @@
   border-radius: var(--alias-radius-50, 4px);
   font-size: 14px;
   line-height: 20px;
-  max-width: 160px;
   overflow: hidden;
 
   &.ald-tag-clickable {