@are-visual/virtual-table 0.11.4 → 0.11.5-beta.0

package/index.d.ts

@@ -30,6 +30,7 @@ interface RowProps<T> extends Omit<NativeProps$1, 'children'> {
 declare const _default$3: <T>(props: RowProps<T>) => ReactElement;
 
 interface TableBodyProps<T> extends Omit<NecessaryProps<T>, 'columns'>, Pick<RowProps<T>, 'onRow' | 'renderRow' | 'renderCell'> {
+    debugKey?: string;
     className?: string;
     style?: CSSProperties;
     defaultColumnWidth: number;
@@ -69,6 +70,7 @@ interface UseTablePipelineOptions<T = any> {
 declare function useTablePipeline<T = any>(options: UseTablePipelineOptions<T>): TablePipeline<T>;
 
 interface VirtualTableCoreProps<T> extends NecessaryProps<T>, Pick<TableBodyProps<T>, 'rowClassName' | 'onRow'> {
+    debugKey?: string;
     bodyRootRef?: Ref<HTMLTableElement>;
     instance?: TableInstance;
     className?: string;
@@ -361,9 +363,9 @@ interface TableRowManagerContextType {
     /**
      * @param rowKey
      * @param key 唯一的 key，用于去重
-     * @param height 行高
+     * @param getHeight 行高
      */
-    setRowHeightByRowKey: (rowKey: Key, key: Key, height: number) => void;
+    setRowHeightByRowKey: (rowKey: Key, key: Key, getHeight: () => number | undefined) => void;
 }
 declare function useTableRowManager(): TableRowManagerContextType;
 

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useRef, createContext, useContext, useMemo, memo, useEffect, useState, useLayoutEffect, useCallback, Fragment, createElement, forwardRef } from 'react';
+import { useRef, createContext, useContext, useMemo, memo, useEffect, useState, useCallback, useLayoutEffect, Fragment, createElement, forwardRef } from 'react';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -558,6 +558,161 @@ function onResize(target, callback) {
   }
 }
 
+function useLazyRef(initial) {
+  var ref = useRef();
+  if (ref.current == null) {
+    ref.current = initial();
+  }
+  return ref;
+}
+
+var NormalRowHeightKey = 'NormalRow';
+/**
+ * 记录的所有行高信息
+ * 一个 Row 可能有多个行高。例如：默认情况下，只有一个行高，展开后，展开面板的高度也被认为是同一个 Row 的
+ * 所以可展开时，行高有多个，所有行高之和，则为 Row 的高度
+ * 行高之间使用唯一的 key 作为区分
+ * Record<rowKey, Map<key, height>>
+ */
+function useRowHeightMap(initial) {
+  var heightMap = useRef(null);
+  if (heightMap.current == null) {
+    var result = new Map();
+    heightMap.current = initial(result);
+  } else {
+    heightMap.current = initial(heightMap.current);
+  }
+  return heightMap;
+}
+function useRowHeight(options) {
+  var debugKey = options.debugKey,
+    estimateSize = options.estimateSize,
+    dataSource = options.dataSource,
+    rowKey = options.rowKey,
+    nodeHeightValid = options.nodeHeightValid;
+  var _useState = useState(function () {
+      return new Map();
+    }),
+    rowHeightByRowKey = _useState[0],
+    setRowHeightByRowKey = _useState[1];
+  var rowHeightByRowKeyRef = useRowHeightMap(function (state) {
+    // 行高信息（先填充预估高度，DOM渲染后再更新成实际高度）
+    if (dataSource.length === 0) {
+      state.clear();
+      return state;
+    }
+    dataSource.forEach(function (item) {
+      var _state$get;
+      var key = getRowKey(item, rowKey);
+      var row = (_state$get = state.get(key)) != null ? _state$get : new Map();
+      var target = row.get(NormalRowHeightKey);
+      if (target == null) {
+        row.set(NormalRowHeightKey, estimateSize);
+      }
+      state.set(key, row);
+    });
+    return state;
+  });
+  var calcRowHeights = function calcRowHeights() {
+    var heights = [];
+    dataSource.forEach(function (item) {
+      var key = getRowKey(item, rowKey);
+      var row = rowHeightByRowKeyRef.current.get(key);
+      if (row == null) {
+        heights.push(estimateSize);
+      } else {
+        var height = 0;
+        row.forEach(function (x) {
+          return height += x;
+        });
+        heights.push(height);
+      }
+    });
+    return heights;
+  };
+  var _useState2 = useState(calcRowHeights),
+    rowHeights = _useState2[0],
+    setRowHeights = _useState2[1];
+  // 布局信息（也就是锚点元素需要的信息，top,bottom,height,index）
+  var calcRowRects = function calcRowRects() {
+    var _dataSource$reduce = dataSource.reduce(function (result, rowData, index) {
+        var _rowHeightByRowKeyRef;
+        var key = getRowKey(rowData, rowKey);
+        var height = 0;
+        (_rowHeightByRowKeyRef = rowHeightByRowKeyRef.current.get(key)) == null || _rowHeightByRowKeyRef.forEach(function (item) {
+          height += item;
+        });
+        var nextTop = result.top + height;
+        result.rects.push({
+          index: index,
+          top: result.top,
+          height: height,
+          bottom: nextTop
+        });
+        result.top = nextTop;
+        return result;
+      }, {
+        top: 0,
+        rects: []
+      }),
+      rects = _dataSource$reduce.rects;
+    return rects;
+  };
+  var rowRectsRef = useLazyRef(calcRowRects);
+  var measureTask = useRef(new Map());
+  var measureRowHeightByRowKey = useCallback(function (rowKey, key, height) {
+    var _measureTask$current$;
+    var row = (_measureTask$current$ = measureTask.current.get(rowKey)) != null ? _measureTask$current$ : new Map();
+    row.set(key, height);
+    measureTask.current.set(rowKey, row);
+  }, []);
+  useLayoutEffect(function () {
+    if (!nodeHeightValid()) return;
+    var needRender = false;
+    measureTask.current.forEach(function (currentRow, rowKey) {
+      var _rowHeightByRowKeyRef2;
+      var row = (_rowHeightByRowKeyRef2 = rowHeightByRowKeyRef.current.get(rowKey)) != null ? _rowHeightByRowKeyRef2 : new Map();
+      currentRow.forEach(function (getHeight, key) {
+        var height = getHeight();
+        if (debugKey === 'demo1') {
+          if (height === 0) {
+            // console.log('demo1.row.0', rowKey, key, height)
+            debugger;
+            getHeight();
+          }
+        }
+        var oldHeight = row.get(key);
+        if (height != null && (oldHeight == null || oldHeight !== height)) {
+          needRender = true;
+          row.set(key, height);
+          if (debugKey === 'demo1') {
+            if (height === 0) {
+              debugger;
+            }
+            // console.log(rowKey, key, oldHeight, height)
+          }
+        }
+        rowHeightByRowKeyRef.current.set(rowKey, row);
+      });
+    });
+    measureTask.current.clear();
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (needRender || dataSource.length !== rowHeights.length) {
+      needRender = false;
+      setRowHeightByRowKey(new Map(rowHeightByRowKeyRef.current));
+      setRowHeights(calcRowHeights());
+      rowRectsRef.current = calcRowRects();
+    }
+  });
+  return {
+    rowHeightByRowKey: rowHeightByRowKey,
+    rowHeightByRowKeyRef: rowHeightByRowKeyRef,
+    setRowHeightByRowKey: measureRowHeightByRowKey,
+    rowHeights: rowHeights,
+    rowRectsRef: rowRectsRef
+  };
+}
+
 function anchorQuery$1(rects, scrollTop) {
   var left = 0;
   var right = rects.length - 1;
@@ -576,15 +731,26 @@ function anchorQuery$1(rects, scrollTop) {
   }
   return rects[index];
 }
-var NormalRowHeightKey = 'NormalRow';
 function useRowVirtualize(options) {
-  var nodeHeightValid = options.nodeHeightValid,
+  var debugKey = options.debugKey,
+    nodeHeightValid = options.nodeHeightValid,
     getOffsetTop = options.getOffsetTop,
     rowKey = options.rowKey,
     rawData = options.dataSource,
     getScroller = options.getScroller,
     estimateSize = options.estimateSize,
     overscan = options.overscan;
+  var _useRowHeight = useRowHeight({
+      dataSource: rawData,
+      rowKey: rowKey,
+      debugKey: debugKey,
+      estimateSize: estimateSize,
+      nodeHeightValid: nodeHeightValid
+    }),
+    rowHeightByRowKeyRef = _useRowHeight.rowHeightByRowKeyRef,
+    setRowHeightByRowKey = _useRowHeight.setRowHeightByRowKey,
+    rowRectsRef = _useRowHeight.rowRectsRef,
+    rowHeights = _useRowHeight.rowHeights;
   var _useState = useState(0),
     startIndex = _useState[0],
     setStartIndex = _useState[1];
@@ -595,6 +761,13 @@ function useRowVirtualize(options) {
   // 在 scroll 事件中获取到当前的 node 高度为 0 就认为节点不可见，
   // 就不需要触发 updateBoundary
   // 把它推迟到下一次渲染检测 node 高度不为 0 的时候
+  // 场景：
+  // <Tabs /> 组件展示两个 Tab
+  // tab1 是以 window 为滚动容器的 table
+  // tab2 仅展示一行文字
+  // 滚动 tab1 让 startIndex 变化（假设是100），再切换到 tab2，此时由于内容变了
+  // 滚动条被重置为 0，再切换回 tab1 的时候，需要重新计算 startIndex，
+  // 否则 startIndex 还停留在上一次的 100，造成白屏
   var reUpdateBoundary = useRef();
   useLayoutEffect(function () {
     var reUpdate = reUpdateBoundary.current;
@@ -607,100 +780,6 @@ function useRowVirtualize(options) {
   var dataSlice = useMemo(function () {
     return rawData.slice(startIndex, endIndex);
   }, [rawData, startIndex, endIndex]);
-  /**
-   * 记录的所有行高信息
-   * 一个 Row 可能有多个行高。例如：默认情况下，只有一个行高，展开后，展开面板的高度也被认为是同一个 Row 的
-   * 所以可展开时，行高有多个，所有行高之和，则为 Row 的高度
-   * 行高之间使用唯一的 key 作为区分
-   * Record<rowKey, Map<key, height>>
-   */
-  var rowHeightByRowKey = useRef(new Map());
-  var setRowHeightByRowKey = useCallback(function (rowKey, key, height) {
-    var _rowHeightByRowKey$cu;
-    var target = (_rowHeightByRowKey$cu = rowHeightByRowKey.current.get(rowKey)) != null ? _rowHeightByRowKey$cu : new Map();
-    target.set(key, height);
-    rowHeightByRowKey.current.set(rowKey, target);
-  }, []);
-  var getAllRowHeights = function getAllRowHeights() {
-    var heights = [];
-    rawData.forEach(function (item) {
-      var key = getRowKey(item, rowKey);
-      var row = rowHeightByRowKey.current.get(key);
-      if (row == null) {
-        heights.push(estimateSize);
-      } else {
-        var height = 0;
-        row.forEach(function (x) {
-          return height += x;
-        });
-        heights.push(height);
-      }
-    });
-    return heights;
-  };
-  // 行高信息（先填充预估高度，DOM渲染后再更新成实际高度）
-  var fillRowHeights = function fillRowHeights() {
-    if (rawData.length === 0) {
-      rowHeightByRowKey.current.clear();
-      return;
-    }
-    rawData.forEach(function (item) {
-      var _rowHeightByRowKey$cu2;
-      var key = getRowKey(item, rowKey);
-      var row = (_rowHeightByRowKey$cu2 = rowHeightByRowKey.current.get(key)) != null ? _rowHeightByRowKey$cu2 : new Map();
-      var target = row.get(NormalRowHeightKey);
-      if (target == null) {
-        row.set(NormalRowHeightKey, estimateSize);
-      }
-      rowHeightByRowKey.current.set(key, row);
-    });
-  };
-  fillRowHeights();
-  // 强制设置类型为 number[]，在后面会初始化，只是为了减少 getAllRowHeights 的调用
-  var rowHeights = useRef();
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (rowHeights.current == null) {
-    rowHeights.current = getAllRowHeights();
-  } else if (rawData.length !== rowHeights.current.length) {
-    // 这个判断条件主要是为了处理：空数据切换为有数据时 tbody 上 padding 缺失的问题
-    rowHeights.current = getAllRowHeights();
-  }
-  // 布局信息（也就是锚点元素需要的信息，top,bottom,height,index）
-  var rowRects = useRef([]);
-  var updateRowRects = function updateRowRects() {
-    var _rawData$reduce = rawData.reduce(function (result, rowData, index) {
-        var _rowHeightByRowKey$cu3;
-        var key = getRowKey(rowData, rowKey);
-        var height = 0;
-        (_rowHeightByRowKey$cu3 = rowHeightByRowKey.current.get(key)) == null || _rowHeightByRowKey$cu3.forEach(function (item) {
-          height += item;
-        });
-        var nextTop = result.top + height;
-        result.rects.push({
-          index: index,
-          top: result.top,
-          height: height,
-          bottom: nextTop
-        });
-        result.top = nextTop;
-        return result;
-      }, {
-        top: 0,
-        rects: []
-      }),
-      rects = _rawData$reduce.rects;
-    rowRects.current = rects;
-  };
-  /** 刷新布局信息，行高变化的时候调用，要重新组织布局信息(rowRects) */
-  var flushLayout = function flushLayout(fn) {
-    fn == null || fn();
-    updateRowRects();
-    // 组件渲染后会触发 flushLayout，表示行高有更新所以需要更新一下 rowHeights
-    // 避免展开行之后记录的还是之前的行高信息，否则滚动后底部会出现空白区域
-    rowHeights.current = rowRects.current.map(function (x) {
-      return x.height;
-    });
-  };
   // 锚点元素，当前虚拟列表中，最接近滚动容器顶部的元素
   var anchorRef = useRef({
     index: 0,
@@ -740,7 +819,7 @@ function useRowVirtualize(options) {
       };
     };
     var updateBoundary = function updateBoundary(scrollTop) {
-      var anchor = anchorQuery$1(rowRects.current, scrollTop);
+      var anchor = anchorQuery$1(rowRectsRef.current, scrollTop);
       if (anchor != null) {
         anchorRef.current = anchor;
         setStartIndex(Math.max(0, anchor.index - overscan));
@@ -808,9 +887,9 @@ function useRowVirtualize(options) {
       stopListen();
       container.removeEventListener('scroll', onScroll);
     };
-  }, [estimateSize, getOffsetTop, getScroller, overscan, updateBoundaryFlagDep, nodeHeightValid]);
+  }, [estimateSize, getOffsetTop, getScroller, overscan, updateBoundaryFlagDep, nodeHeightValid, rowRectsRef]);
   var sum = function sum(startIndex, endIndex) {
-    return rowHeights.current.slice(startIndex, endIndex).reduce(function (a, b) {
+    return rowHeights.slice(startIndex, endIndex).reduce(function (a, b) {
       return a + b;
     }, 0);
   };
@@ -821,8 +900,7 @@ function useRowVirtualize(options) {
     startIndex: startIndex,
     endIndex: endIndex,
     rowHeightList: rowHeights,
-    flushLayout: flushLayout,
-    rowHeightByRowKey: rowHeightByRowKey,
+    rowHeightByRowKeyRef: rowHeightByRowKeyRef,
     setRowHeightByRowKey: setRowHeightByRowKey,
     topBlank: topBlank,
     bottomBlank: bottomBlank,
@@ -1173,7 +1251,8 @@ function useNodeHeight() {
 }
 
 function TableBody(props) {
-  var bodyWrapperRef = props.bodyWrapperRef,
+  var debugKey = props.debugKey,
+    bodyWrapperRef = props.bodyWrapperRef,
     bodyRootRef = props.bodyRootRef,
     bodyRef = props.bodyRef,
     className = props.className,
@@ -1199,6 +1278,7 @@ function TableBody(props) {
     tbodyNode = _useNodeHeight[0],
     nodeHeightValid = _useNodeHeight[1];
   var _useRowVirtualize = useRowVirtualize({
+      debugKey: debugKey,
       nodeHeightValid: nodeHeightValid,
       getOffsetTop: getOffsetTop,
       rowKey: rowKey,
@@ -1210,9 +1290,8 @@ function TableBody(props) {
     startIndex = _useRowVirtualize.startIndex,
     endIndex = _useRowVirtualize.endIndex,
     dataSource = _useRowVirtualize.dataSlice,
-    rowHeightByRowKey = _useRowVirtualize.rowHeightByRowKey,
+    rowHeightByRowKeyRef = _useRowVirtualize.rowHeightByRowKeyRef,
     setRowHeightByRowKey = _useRowVirtualize.setRowHeightByRowKey,
-    flushLayout = _useRowVirtualize.flushLayout,
     rowHeightList = _useRowVirtualize.rowHeightList,
     topBlank = _useRowVirtualize.topBlank,
     bottomBlank = _useRowVirtualize.bottomBlank;
@@ -1226,24 +1305,18 @@ function TableBody(props) {
       };
     },
     getRowHeightMap: function getRowHeightMap() {
-      return rowHeightByRowKey.current;
+      return rowHeightByRowKeyRef.current;
     }
   });
-  var tbodyRef = useMergedRef(bodyRef, tbodyNode, function (elm) {
-    if (elm == null) return;
-    var bodyHeight = elm.offsetHeight;
-    if (bodyHeight === 0) return;
-    // body 的 ref 回调函数中，说明 body 渲染完成，也就意味着所有的 tr 也已经渲染完成，
-    // 现在可以记录所有 tr 的高度
-    flushLayout();
-  });
+  var tbodyRef = useMergedRef(bodyRef, tbodyNode);
   // 测量行高
   var onMeasureRowHeight = useCallback(function (args) {
     var node = args.node,
       rowKey = args.rowKey;
-    if (node == null) return;
-    // 小心陷阱：当 table 父元素为 display: none 时，依然会触发，并设置高度为 0
-    setRowHeightByRowKey(rowKey, NormalRowHeightKey, node.offsetHeight);
+    setRowHeightByRowKey(rowKey, NormalRowHeightKey, function () {
+      if (node == null) return;
+      return node.offsetHeight;
+    });
   }, [setRowHeightByRowKey]);
   var columns = columnDescriptor.columns,
     descriptor = columnDescriptor.descriptor;
@@ -1310,7 +1383,7 @@ function TableBody(props) {
       } else {
         offset = Number.isFinite(stickyHeader) ? stickyHeader * -1 : 0;
       }
-      var targetScrollTop = rowHeightList.current.slice(0, index).reduce(function (a, b) {
+      var targetScrollTop = rowHeightList.slice(0, index).reduce(function (a, b) {
         return a + b;
       }, 0);
       return targetScrollTop + getOffsetTop() + offset;
@@ -1324,10 +1397,10 @@ function TableBody(props) {
   });
   var rowManageState = useMemo(function () {
     return {
-      setRowHeightByRowKey: setRowHeightByRowKey,
       getRowHeightList: function getRowHeightList() {
-        return rowHeightList.current;
-      }
+        return rowHeightList;
+      },
+      setRowHeightByRowKey: setRowHeightByRowKey
     };
   }, [rowHeightList, setRowHeightByRowKey]);
   return jsx(TableRowManager.Provider, {
@@ -1818,7 +1891,8 @@ function TableRoot(props, ref) {
 var TableRoot$1 = /*#__PURE__*/forwardRef(TableRoot);
 
 function VirtualTableCore(props, ref) {
-  var bodyRootRef = props.bodyRootRef,
+  var debugKey = props.debugKey,
+    bodyRootRef = props.bodyRootRef,
     rawInstance = props.instance,
     className = props.className,
     style = props.style,
@@ -2065,6 +2139,7 @@ function VirtualTableCore(props, ref) {
       renderHeaderRow: renderHeaderRow,
       renderHeaderCell: renderHeaderCell
     }), jsx(TableBody, {
+      debugKey: debugKey,
       instance: instance,
       bodyWrapperRef: bodyWrapperRef,
       bodyRootRef: mergedBodyRootRef,