@are-visual/virtual-table 0.11.3 → 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

@@ -558,60 +558,66 @@ function onResize(target, callback) {
   }
 }
 
-function anchorQuery$1(rects, scrollTop) {
-  var left = 0;
-  var right = rects.length - 1;
-  var index = -1;
-  while (left <= right) {
-    var mid = Math.floor((left + right) / 2);
-    if (rects[mid].bottom > scrollTop) {
-      index = mid;
-      right = mid - 1;
-    } else {
-      left = mid + 1;
-    }
+function useLazyRef(initial) {
+  var ref = useRef();
+  if (ref.current == null) {
+    ref.current = initial();
   }
-  if (index === -1) {
-    return undefined;
-  }
-  return rects[index];
+  return ref;
 }
+
 var NormalRowHeightKey = 'NormalRow';
-function useRowVirtualize(options) {
-  var getOffsetTop = options.getOffsetTop,
-    rowKey = options.rowKey,
-    rawData = options.dataSource,
-    getScroller = options.getScroller,
+/**
+ * 记录的所有行高信息
+ * 一个 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,
-    overscan = options.overscan;
-  var _useState = useState(0),
-    startIndex = _useState[0],
-    setStartIndex = _useState[1];
-  var _useState2 = useState(0),
-    endIndex = _useState2[0],
-    setEndIndex = _useState2[1];
-  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() {
+    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 = [];
-    rawData.forEach(function (item) {
+    dataSource.forEach(function (item) {
       var key = getRowKey(item, rowKey);
-      var row = rowHeightByRowKey.current.get(key);
+      var row = rowHeightByRowKeyRef.current.get(key);
       if (row == null) {
         heights.push(estimateSize);
       } else {
@@ -624,41 +630,16 @@ function useRowVirtualize(options) {
     });
     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();
-  }
+  var _useState2 = useState(calcRowHeights),
+    rowHeights = _useState2[0],
+    setRowHeights = _useState2[1];
   // 布局信息（也就是锚点元素需要的信息，top,bottom,height,index）
-  var rowRects = useRef([]);
-  var updateRowRects = function updateRowRects() {
-    var _rawData$reduce = rawData.reduce(function (result, rowData, index) {
-        var _rowHeightByRowKey$cu3;
+  var calcRowRects = function calcRowRects() {
+    var _dataSource$reduce = dataSource.reduce(function (result, rowData, index) {
+        var _rowHeightByRowKeyRef;
         var key = getRowKey(rowData, rowKey);
         var height = 0;
-        (_rowHeightByRowKey$cu3 = rowHeightByRowKey.current.get(key)) == null || _rowHeightByRowKey$cu3.forEach(function (item) {
+        (_rowHeightByRowKeyRef = rowHeightByRowKeyRef.current.get(key)) == null || _rowHeightByRowKeyRef.forEach(function (item) {
           height += item;
         });
         var nextTop = result.top + height;
@@ -674,19 +655,131 @@ function useRowVirtualize(options) {
         top: 0,
         rects: []
       }),
-      rects = _rawData$reduce.rects;
-    rowRects.current = rects;
+      rects = _dataSource$reduce.rects;
+    return rects;
   };
-  /** 刷新布局信息，行高变化的时候调用，要重新组织布局信息(rowRects) */
-  var flushLayout = function flushLayout(fn) {
-    fn == null || fn();
-    updateRowRects();
-    // 组件渲染后会触发 flushLayout，表示行高有更新所以需要更新一下 rowHeights
-    // 避免展开行之后记录的还是之前的行高信息，否则滚动后底部会出现空白区域
-    rowHeights.current = rowRects.current.map(function (x) {
-      return x.height;
+  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;
+  var index = -1;
+  while (left <= right) {
+    var mid = Math.floor((left + right) / 2);
+    if (rects[mid].bottom > scrollTop) {
+      index = mid;
+      right = mid - 1;
+    } else {
+      left = mid + 1;
+    }
+  }
+  if (index === -1) {
+    return undefined;
+  }
+  return rects[index];
+}
+function useRowVirtualize(options) {
+  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];
+  var _useState2 = useState(0),
+    endIndex = _useState2[0],
+    setEndIndex = _useState2[1];
+  // 解决 PR #5 的问题
+  // 在 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;
+    if (reUpdate == null) return;
+    if (nodeHeightValid()) {
+      reUpdate();
+      reUpdateBoundary.current = undefined;
+    }
+  });
+  var dataSlice = useMemo(function () {
+    return rawData.slice(startIndex, endIndex);
+  }, [rawData, startIndex, endIndex]);
   // 锚点元素，当前虚拟列表中，最接近滚动容器顶部的元素
   var anchorRef = useRef({
     index: 0,
@@ -726,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));
@@ -742,18 +835,33 @@ function useRowVirtualize(options) {
       if (isScrollDown) {
         // 如果滚动距离比较小，没有超出锚点元素的边界，就不需要计算 startIndex、endIndex 了
         if (scrollTop > anchorRef.current.bottom) {
-          updateBoundary(scrollTop);
+          if (!nodeHeightValid()) {
+            reUpdateBoundary.current = function () {
+              return updateBoundary(scrollTop);
+            };
+          } else {
+            updateBoundary(scrollTop);
+          }
         }
       } else {
         if (scrollTop < anchorRef.current.top) {
-          updateBoundary(scrollTop);
+          if (!nodeHeightValid()) {
+            reUpdateBoundary.current = function () {
+              return updateBoundary(scrollTop);
+            };
+          } else {
+            updateBoundary(scrollTop);
+          }
         }
       }
       scrollTopRef.current = scrollTop;
     };
     var prevHeight = 0;
     var stopListen = onResize(container, function (rect) {
-      // 处理父元素 display:none 容器高度丢失，导致显示 row 不准确
+      // 使用 div 作为滚动容器时，并且放置在 <Tabs> 组件内，当前 tab 切换到非激活状态时，
+      // 父元素会被设置 display:none，导致容器高度变为 0，导致调用 updateBoundary
+      // 来回切换会发现每一次都会往下移动几个 row
+      // 这里加一个判断，rect.height 为0时，不处理本次的 resize 事件（这就是 display:none）
       if (rect.height === prevHeight || rect.height === 0) {
         return;
       }
@@ -779,9 +887,9 @@ function useRowVirtualize(options) {
       stopListen();
       container.removeEventListener('scroll', onScroll);
     };
-  }, [estimateSize, getOffsetTop, getScroller, overscan, updateBoundaryFlagDep]);
+  }, [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);
   };
@@ -792,8 +900,7 @@ function useRowVirtualize(options) {
     startIndex: startIndex,
     endIndex: endIndex,
     rowHeightList: rowHeights,
-    flushLayout: flushLayout,
-    rowHeightByRowKey: rowHeightByRowKey,
+    rowHeightByRowKeyRef: rowHeightByRowKeyRef,
     setRowHeightByRowKey: setRowHeightByRowKey,
     topBlank: topBlank,
     bottomBlank: bottomBlank,
@@ -1133,8 +1240,19 @@ function useMergedRef() {
   return useCallback(mergeRefs.apply(void 0, refs), refs);
 }
 
+function useNodeHeight() {
+  var nodeRef = useRef(null);
+  var getIsVisible = useStableFn(function () {
+    var node = nodeRef.current;
+    if (node == null) return false;
+    return node.offsetHeight > 0;
+  });
+  return [nodeRef, getIsVisible];
+}
+
 function TableBody(props) {
-  var bodyWrapperRef = props.bodyWrapperRef,
+  var debugKey = props.debugKey,
+    bodyWrapperRef = props.bodyWrapperRef,
     bodyRootRef = props.bodyRootRef,
     bodyRef = props.bodyRef,
     className = props.className,
@@ -1156,7 +1274,12 @@ function TableBody(props) {
     renderBodyContent = props.renderBodyContent,
     renderRow = props.renderRow,
     renderCell = props.renderCell;
+  var _useNodeHeight = useNodeHeight(),
+    tbodyNode = _useNodeHeight[0],
+    nodeHeightValid = _useNodeHeight[1];
   var _useRowVirtualize = useRowVirtualize({
+      debugKey: debugKey,
+      nodeHeightValid: nodeHeightValid,
       getOffsetTop: getOffsetTop,
       rowKey: rowKey,
       dataSource: rawData,
@@ -1167,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;
@@ -1183,24 +1305,18 @@ function TableBody(props) {
       };
     },
     getRowHeightMap: function getRowHeightMap() {
-      return rowHeightByRowKey.current;
+      return rowHeightByRowKeyRef.current;
     }
   });
-  var tbodyRef = useMergedRef(bodyRef, 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;
@@ -1267,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;
@@ -1281,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, {
@@ -1775,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,
@@ -2022,6 +2139,7 @@ function VirtualTableCore(props, ref) {
       renderHeaderRow: renderHeaderRow,
       renderHeaderCell: renderHeaderCell
     }), jsx(TableBody, {
+      debugKey: debugKey,
       instance: instance,
       bodyWrapperRef: bodyWrapperRef,
       bodyRootRef: mergedBodyRootRef,