one-design-next 0.0.50 → 0.0.51

package/dist/table/index.d.ts

@@ -93,6 +93,17 @@ export interface TableProps<T = Record<string, unknown>> extends Omit<RcTablePro
         colIndex: number;
     }) => ReturnType<NonNullable<RcColumnType<T>['onHeaderCell']>> | void;
     popoverIcon?: (typeof iconNames)[number];
+    /**
+     * 是否启用虚拟滚动。启用时需要同时设置 scroll.y 为数值（表示可视区域高度）。
+     * 当数据量较大时（如超过 1000 行），推荐开启虚拟滚动以提升性能。
+     */
+    virtual?: boolean;
+    /**
+     * 虚拟滚动每行高度（px），用于计算可视区域内显示的行数。
+     * 仅在 virtual 为 true 时生效。
+     * @default 24
+     */
+    listItemHeight?: number;
 }
-declare const Table: <T extends Record<string, unknown> = Record<string, unknown>>({ dataSource, columns, bordered, striped, loading, rowExpansion, rowSelection, sortBgVisible, getCellProps, getHeaderCellProps, popoverIcon: globalPopoverIcon, className, style, emptyText, ...props }: TableProps<T>) => React.JSX.Element;
+declare const Table: <T extends Record<string, unknown> = Record<string, unknown>>({ dataSource, columns, bordered, striped, loading, rowExpansion, rowSelection, sortBgVisible, getCellProps, getHeaderCellProps, popoverIcon: globalPopoverIcon, className, style, emptyText, virtual, listItemHeight, ...props }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/table/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["dataSource", "columns", "bordered", "striped", "loading", "rowExpansion", "rowSelection", "sortBgVisible", "getCellProps", "getHeaderCellProps", "popoverIcon", "className", "style", "emptyText"],
+var _excluded = ["dataSource", "columns", "bordered", "striped", "loading", "rowExpansion", "rowSelection", "sortBgVisible", "getCellProps", "getHeaderCellProps", "popoverIcon", "className", "style", "emptyText", "virtual", "listItemHeight"],
   _excluded2 = ["onSort", "title", "popover", "popoverProps", "popoverIcon"],
   _excluded3 = ["onSort", "filters", "filteredValue", "filterMultiple", "onFilter", "onFilterChange", "title", "popover", "popoverProps", "popoverIcon", "ellipsisPopoverProps", "sortOrder", "render"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -16,7 +16,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import RcTable from 'rc-table';
+import RcTable, { VirtualTable as RcVirtualTable } from 'rc-table';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Button from "../button";
 import Checkbox from "../checkbox";
@@ -113,6 +113,7 @@ var FilterComponent = function FilterComponent(_ref) {
   }, "\u786E\u5B9A")));
 };
 var Table = function Table(_ref2) {
+  var _props$scroll, _props$scroll2;
   var dataSource = _ref2.dataSource,
     columns = _ref2.columns,
     _ref2$bordered = _ref2.bordered,
@@ -131,6 +132,8 @@ var Table = function Table(_ref2) {
     className = _ref2.className,
     style = _ref2.style,
     emptyText = _ref2.emptyText,
+    virtual = _ref2.virtual,
+    listItemHeight = _ref2.listItemHeight,
     props = _objectWithoutProperties(_ref2, _excluded);
   // 渲染带 popover 的标题
   var renderTitleWithPopover = function renderTitleWithPopover(titleContent, popover, popoverProps, popoverIcon) {
@@ -492,6 +495,12 @@ var Table = function Table(_ref2) {
   // 1. 行选择
   // 2. 行展开
   var trClickable = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectOnRowClick) || (rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.expandOnRowClick);
+
+  // 虚拟模式使用 RcVirtualTable，否则使用 RcTable。
+  // 由于两者 props 类型存在差异（VirtualTableProps 重新定义了 scroll），
+  // 这里统一断言为 RcTable 类型，虚拟模式的专属 props 通过末尾的 spread 覆盖传入。
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var TableComponent = virtual ? RcVirtualTable : RcTable;
   return /*#__PURE__*/React.createElement("div", {
     ref: tableRef,
     "data-odn-table": true,
@@ -501,7 +510,7 @@ var Table = function Table(_ref2) {
     "data-odn-table-loading": loading,
     className: className,
     style: style
-  }, /*#__PURE__*/React.createElement(RcTable, _extends({
+  }, /*#__PURE__*/React.createElement(TableComponent, _extends({
     prefixCls: "odn-table",
     data: dataSource,
     columns: finalColumns,
@@ -857,6 +866,12 @@ var Table = function Table(_ref2) {
       offset: "1",
       stopColor: "#C4C7CC"
     })))), "\u6570\u636E\u4E3A\u7A7A")
-  }, props)));
+  }, props, virtual ? {
+    scroll: {
+      x: (_props$scroll = props.scroll) === null || _props$scroll === void 0 ? void 0 : _props$scroll.x,
+      y: (_props$scroll2 = props.scroll) === null || _props$scroll2 === void 0 ? void 0 : _props$scroll2.y
+    },
+    listItemHeight: listItemHeight
+  } : {})));
 };
 export default Table;

package/dist/table/style/index.css

@@ -342,4 +342,30 @@ tr > .odn-table-cell:last-child {
   height: 0;
   overflow: hidden;
   pointer-events: none;
+}
+
+.odn-table-placeholder .odn-table-expanded-row-fixed {
+  width: 100% !important;
+}
+
+.odn-table-tbody-virtual {
+  font-size: var(--odn-font-size);
+  line-height: var(--odn-line-height);
+}
+.odn-table-tbody-virtual .odn-table-row {
+  display: flex;
+}
+.odn-table-tbody-virtual .odn-table-row-extra {
+  position: absolute;
+  display: flex;
+}
+.odn-table-tbody-virtual .odn-table-cell {
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--odn-table-border-color);
+}
+.odn-table-tbody-virtual .odn-table-row > .odn-table-cell:first-child {
+  padding-left: var(--odn-table-cell-first-padding-x-start);
+}
+.odn-table-tbody-virtual .odn-table-row > .odn-table-cell:last-child {
+  padding-right: var(--odn-table-cell-last-padding-x-end);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "One Design Next from TAD@tencent.com",
   "packageManager": "pnpm@11.8.0",
   "module": "dist/index.js",