@aloudata/aloudata-design 2.15.9 → 2.15.11

package/dist/Table/index.js

@@ -27,7 +27,7 @@ import useScroll from "./hooks/useScroll";
 var HEADER_HEIGHT = 41;
 var FOOTER_HEIGHT = 52;
 function Table(props, ref) {
-  var _classnames, _classnames5, _classnames7;
+  var _classnames2, _classnames5, _classnames7;
   var data = props.data,
     bordered = props.bordered,
     rowKey = props.rowKey,
@@ -129,35 +129,121 @@ function Table(props, ref) {
     // 总列宽改变时，重新计算是否需要显示固定列的阴影
     changeIsPing();
   }, [changeIsPing, totalColumnsWidth]);
+  var renderHeaderCell = useCallback(function (header, index) {
+    // 选择行的列不能拖动宽度
+    var showResizer = columnSizing && !(!!rowSelectionInfo.isRowSelectionEnabled && index === 0);
+    var _getColumnFixedInfo = getColumnFixedInfo(index, true),
+      fixedClassName = _getColumnFixedInfo.className,
+      fixedStyle = _getColumnFixedInfo.style;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(prefixCls('th'), fixedClassName),
+      style: _objectSpread({
+        width: header.getSize()
+      }, fixedStyle),
+      key: header.id
+    }, flexRender(header.column.columnDef.header, header.getContext()), showResizer && /*#__PURE__*/React.createElement("div", {
+      onMouseDown: header.getResizeHandler(),
+      onTouchStart: header.getResizeHandler(),
+      className: classnames(prefixCls('resizer'), _defineProperty({}, prefixCls('self-resizing'), header.column.getIsResizing()))
+    }));
+  }, [columnSizing, rowSelectionInfo, getColumnFixedInfo]);
+  var visibleColumns = tableInstance.getVisibleLeafColumns();
+  var columnVirtualizer = useVirtualizer({
+    count: tableColumns.length,
+    estimateSize: function estimateSize(index) {
+      return visibleColumns[index].getSize();
+    },
+    getScrollElement: function getScrollElement() {
+      return bodyRef.current;
+    },
+    horizontal: true,
+    overscan: 5
+  });
+  var virtualColumns = columnVirtualizer.getVirtualItems();
+
+  //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
+  var virtualPaddingLeft;
+  var virtualPaddingRight;
+  if (columnVirtualizer && virtualColumns !== null && virtualColumns !== void 0 && virtualColumns.length) {
+    var _virtualColumns$0$sta, _virtualColumns$, _virtualColumns$end, _virtualColumns;
+    virtualPaddingLeft = (_virtualColumns$0$sta = (_virtualColumns$ = virtualColumns[0]) === null || _virtualColumns$ === void 0 ? void 0 : _virtualColumns$.start) !== null && _virtualColumns$0$sta !== void 0 ? _virtualColumns$0$sta : 0;
+    virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_virtualColumns$end = (_virtualColumns = virtualColumns[virtualColumns.length - 1]) === null || _virtualColumns === void 0 ? void 0 : _virtualColumns.end) !== null && _virtualColumns$end !== void 0 ? _virtualColumns$end : 0);
+  }
   var headerContent = /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('overflow-x'), true), _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _defineProperty(_classnames, prefixCls('resizing'), tableInstance.getState().columnSizingInfo.isResizingColumn), _classnames)),
+    className: classnames(prefixCls('header'), (_classnames2 = {}, _defineProperty(_classnames2, prefixCls('overflow-x'), true), _defineProperty(_classnames2, prefixCls('sticky'), isStickyWork), _defineProperty(_classnames2, prefixCls('resizing'), tableInstance.getState().columnSizingInfo.isResizingColumn), _classnames2)),
     ref: headerRef,
     style: headerStyle
   }, _.map(headerGroups, function (headerGroup) {
+    var allHeaderCells = headerGroup.headers;
+    var virtualColumns = columnVirtualizer.getVirtualItems();
+    var middleVirtualColumns = [];
+    // 将固定列单独拎出来，固定列不受列虚拟化影响，必须要渲染
+    var leftFixedColumns = [];
+    var rightFixedColumns = [];
+    var content = null;
+    if (virtual) {
+      _.forEach(allHeaderCells, function (header, index) {
+        var fixedInfo = getColumnFixedInfo(index);
+        if (fixedInfo.fixed === 'left') {
+          leftFixedColumns.push({
+            header: header,
+            index: index
+          });
+        }
+        if (fixedInfo.fixed === 'right') {
+          rightFixedColumns.push({
+            header: header,
+            index: index
+          });
+        }
+      });
+      _.forEach(virtualColumns, function (virtualColumn) {
+        var colIndex = virtualColumn.index;
+        var fixedInfo = getColumnFixedInfo(colIndex);
+        if (fixedInfo.fixed !== 'left' && fixedInfo.fixed !== 'right') {
+          middleVirtualColumns.push(virtualColumn);
+        }
+      });
+      content = /*#__PURE__*/React.createElement(React.Fragment, null, virtualPaddingLeft ?
+      /*#__PURE__*/
+      //fake empty column to the left for virtualization scroll padding
+      React.createElement("div", {
+        className: prefixCls('virtual-padding-left'),
+        style: {
+          width: virtualPaddingLeft
+        }
+      }) : null, leftFixedColumns.map(function (_ref) {
+        var header = _ref.header,
+          index = _ref.index;
+        return renderHeaderCell(header, index);
+      }), _.map(middleVirtualColumns, function (virtualColumn) {
+        var header = allHeaderCells[virtualColumn.index];
+        return renderHeaderCell(header, virtualColumn.index);
+      }), rightFixedColumns.map(function (_ref2) {
+        var header = _ref2.header,
+          index = _ref2.index;
+        return renderHeaderCell(header, index);
+      }), virtualPaddingRight ?
+      /*#__PURE__*/
+      //fake empty column to the right for virtualization scroll padding
+      React.createElement("div", {
+        className: prefixCls('virtual-padding-right'),
+        style: {
+          width: virtualPaddingRight
+        }
+      }) : null);
+    } else {
+      content = _.map(allHeaderCells, function (header, index) {
+        return renderHeaderCell(header, index);
+      });
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls('tr'),
       key: headerGroup.id,
       style: {
         width: totalColumnsWidth
       }
-    }, _.map(headerGroup.headers, function (header, index) {
-      // 选择行的列不能拖动宽度
-      var showResizer = columnSizing && !(!!rowSelectionInfo.isRowSelectionEnabled && index === 0);
-      var _getColumnFixedInfo = getColumnFixedInfo(index, true),
-        fixedClassName = _getColumnFixedInfo.className,
-        fixedStyle = _getColumnFixedInfo.style;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(prefixCls('th'), fixedClassName),
-        style: _objectSpread({
-          width: header.getSize()
-        }, fixedStyle),
-        key: header.id
-      }, flexRender(header.column.columnDef.header, header.getContext()), showResizer && /*#__PURE__*/React.createElement("div", {
-        onMouseDown: header.getResizeHandler(),
-        onTouchStart: header.getResizeHandler(),
-        className: classnames(prefixCls('resizer'), _defineProperty({}, prefixCls('self-resizing'), header.column.getIsResizing()))
-      }));
-    }), y !== undefined && /*#__PURE__*/React.createElement("div", {
+    }, content, y !== undefined && /*#__PURE__*/React.createElement("div", {
       className: prefixCls('header-scroll-placeholder'),
       style: {
         flexBasis: scrollbarWidth
@@ -201,6 +287,24 @@ function Table(props, ref) {
     overscan: 5
   });
   var tableRows = virtual ? rowVirtualizer.getVirtualItems() : rows;
+  var renderBodyCell = useCallback(function (row, cell, colIndex) {
+    var _getColumnFixedInfo2 = getColumnFixedInfo(colIndex),
+      fixedClassName = _getColumnFixedInfo2.className,
+      fixedStyle = _getColumnFixedInfo2.style;
+    var tdContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(prefixCls('td'), fixedClassName),
+      key: cell.id,
+      style: _objectSpread({
+        width: cell.column.getSize()
+      }, fixedStyle)
+    }, expandableInfo.isExpandable && colIndex === 0 ? /*#__PURE__*/React.createElement(ExpandCell, {
+      expandableInfo: expandableInfo,
+      expandable: expandable,
+      data: row.original,
+      rowKey: rowKey
+    }, tdContent) : tdContent);
+  }, [expandableInfo, expandable, rowKey, getColumnFixedInfo]);
 
   // 渲染 body
   var bodyContent = /*#__PURE__*/React.createElement("div", {
@@ -221,6 +325,70 @@ function Table(props, ref) {
   }))) : _.reduce(tableRows, function (rowList, rowData, rowIndex) {
     var _classnames4;
     var row = virtual ? rows[rowData.index] : rowData;
+    var allRowCells = row.getVisibleCells();
+    var content = null;
+    // 将固定列单独拎出来，固定列不受列虚拟化影响，必须要渲染
+    var leftFixedColumns = [];
+    var rightFixedColumns = [];
+    if (virtual) {
+      var _virtualColumns2 = columnVirtualizer.getVirtualItems();
+      var middleVirtualColumns = [];
+      _.forEach(allRowCells, function (cell, index) {
+        var fixedInfo = getColumnFixedInfo(index);
+        if (fixedInfo.fixed === 'left') {
+          leftFixedColumns.push({
+            cell: cell,
+            index: index
+          });
+        }
+        if (fixedInfo.fixed === 'right') {
+          rightFixedColumns.push({
+            cell: cell,
+            index: index
+          });
+        }
+      });
+      _.forEach(_virtualColumns2, function (virtualColumn) {
+        var colIndex = virtualColumn.index;
+        var fixedInfo = getColumnFixedInfo(colIndex);
+        if (fixedInfo.fixed !== 'left' && fixedInfo.fixed !== 'right') {
+          middleVirtualColumns.push(virtualColumn);
+        }
+      });
+      content = /*#__PURE__*/React.createElement(React.Fragment, null, virtualPaddingLeft ?
+      /*#__PURE__*/
+      //fake empty column to the left for virtualization scroll padding
+      React.createElement("div", {
+        className: prefixCls('virtual-padding-left'),
+        style: {
+          width: virtualPaddingLeft
+        }
+      }) : null, leftFixedColumns.map(function (_ref3) {
+        var cell = _ref3.cell,
+          index = _ref3.index;
+        return renderBodyCell(row, cell, index);
+      }), middleVirtualColumns.map(function (virtualColumn) {
+        var colIndex = virtualColumn.index;
+        var cell = allRowCells[colIndex];
+        return renderBodyCell(row, cell, colIndex);
+      }), rightFixedColumns.map(function (_ref4) {
+        var cell = _ref4.cell,
+          index = _ref4.index;
+        return renderBodyCell(row, cell, index);
+      }), virtualPaddingRight ?
+      /*#__PURE__*/
+      //fake empty column to the right for virtualization scroll padding
+      React.createElement("div", {
+        className: prefixCls('virtual-padding-right'),
+        style: {
+          width: virtualPaddingRight
+        }
+      }) : null);
+    } else {
+      content = allRowCells.map(function (cell, index) {
+        return renderBodyCell(row, cell, index);
+      });
+    }
     var rowId = row.id;
     var rowNode = /*#__PURE__*/React.createElement("div", {
       key: rowId,
@@ -240,24 +408,7 @@ function Table(props, ref) {
         position: 'absolute',
         transform: "translateY(".concat(rowData.start, "px)")
       } : {}
-    }, _.map(row.getVisibleCells(), function (cell, colIndex) {
-      var _getColumnFixedInfo2 = getColumnFixedInfo(colIndex),
-        fixedClassName = _getColumnFixedInfo2.className,
-        fixedStyle = _getColumnFixedInfo2.style;
-      var tdContent = flexRender(cell.column.columnDef.cell, cell.getContext());
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(prefixCls('td'), fixedClassName),
-        key: cell.id,
-        style: _objectSpread({
-          width: cell.column.getSize()
-        }, fixedStyle)
-      }, expandableInfo.isExpandable && colIndex === 0 ? /*#__PURE__*/React.createElement(ExpandCell, {
-        expandableInfo: expandableInfo,
-        expandable: expandable,
-        data: row.original,
-        rowKey: rowKey
-      }, tdContent) : tdContent);
-    }));
+    }, content);
     rowList.push(rowNode);
 
     // 渲染额外展开的行

package/dist/Table/style/index.less

@@ -392,3 +392,10 @@
   align-items: center;
   flex: 1 1 auto;
 }
+
+.ald-table-virtual-padding-left,
+.ald-table-virtual-padding-right {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+}