chore: bump rc-virtual-list and modify logic

Author: linxianxi

package.json

@@ -58,7 +58,7 @@
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.37.0",
-    "rc-virtual-list": "^3.12.0"
+    "rc-virtual-list": "^3.13.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",

src/VirtualTable/BodyGrid.tsx

@@ -31,7 +31,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     childrenColumnName,
     emptyNode,
     scrollX,
-    componentWidth,
   } = useContext(TableContext, [
     'flattenColumns',
     'onColumnResize',
@@ -41,13 +40,11 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     'childrenColumnName',
     'emptyNode',
     'scrollX',
-    'componentWidth',
   ]);
   const {
     sticky,
     scrollY,
     listItemHeight,
-    horizontalVirtual,
     getComponent,
     onScroll: onTablePropScroll,
   } = useContext(StaticContext);
@@ -72,8 +69,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     [columnsWidth],
   );
 
-  const [scrollLeft, setScrollLeft] = React.useState(0);
-
   React.useEffect(() => {
     columnsWidth.forEach(([key, width]) => {
       onColumnResize(key, width);
@@ -92,12 +87,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       get: () => listRef.current?.getScrollInfo().x || 0,
 
       set: (value: number) => {
-        if (horizontalVirtual) {
-          const max = (scrollX as number) - componentWidth;
-          let left = Math.max(value, 0);
-          left = Math.min(left, max);
-          setScrollLeft(left);
-        }
         listRef.current?.scrollTo({
           left: value,
         });
@@ -120,7 +109,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
   };
 
   const extraRender: ListProps<any>['extraRender'] = info => {
-    const { start, end, getSize, offsetY } = info;
+    const { start, end, getSize, offsetX, offsetY } = info;
 
     // Do nothing if no data
     if (end < 0) {
@@ -200,9 +189,9 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
           style={{
             top: -offsetY + sizeInfo.top,
           }}
+          offsetX={offsetX}
           extra
           getHeight={getHeight}
-          scrollLeft={scrollLeft}
         />
       );
     });
@@ -247,9 +236,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         component={wrapperComponent}
         scrollWidth={scrollX as number}
         onVirtualScroll={({ x }) => {
-          if (horizontalVirtual) {
-            setScrollLeft(x);
-          }
           onScroll({
             scrollLeft: x,
           });
@@ -259,15 +245,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       >
         {(item, index, itemProps) => {
           const rowKey = getRowKey(item.record, index);
-          return (
-            <BodyLine
-              data={item}
-              rowKey={rowKey}
-              index={index}
-              scrollLeft={scrollLeft}
-              {...itemProps}
-            />
-          );
+          return <BodyLine data={item} rowKey={rowKey} index={index} {...itemProps} />;
         }}
       </VirtualList>
     );

src/VirtualTable/BodyLine.tsx

@@ -16,16 +16,15 @@ export interface BodyLineProps<RecordType = any> {
   className?: string;
   style?: React.CSSProperties;
   rowKey: React.Key;
-  scrollLeft: number;
+  offsetX: number;
 
   /** Render cell only when it has `rowSpan > 1` */
   extra?: boolean;
   getHeight?: (rowSpan: number) => number;
 }
 
 const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) => {
-  const { data, index, className, rowKey, style, extra, getHeight, scrollLeft, ...restProps } =
-    props;
+  const { data, index, className, rowKey, style, extra, getHeight, offsetX, ...restProps } = props;
   const { record, indent, index: renderIndex } = data;
 
   const { scrollX, flattenColumns, prefixCls, fixColumn, componentWidth } = useContext(
@@ -122,7 +121,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
       {horizontalVirtual ? (
         <VirtualRow
           cellPropsCollections={cellPropsCollections}
-          scrollLeft={scrollLeft}
+          offsetX={offsetX}
           {...shareCellProps}
         />
       ) : (

src/VirtualTable/VirtualRow.tsx

@@ -9,7 +9,7 @@ import type { CustomizeComponent } from '../interface';
 
 export interface VirtualRowProps {
   cellPropsCollections: ReturnType<typeof getCellProps>[];
-  scrollLeft: number;
+  offsetX: number;
   index: number;
   renderIndex: number;
   inverse: boolean;
@@ -21,14 +21,14 @@ export interface VirtualRowProps {
 
 export default function VirtualRow({
   cellPropsCollections,
-  scrollLeft,
+  offsetX,
   ...restProps
 }: VirtualRowProps) {
   const { flattenColumns } = useContext(TableContext, ['flattenColumns']);
 
   const [startIndex, virtualOffset, showColumnIndexes] = useHorizontalVirtual(
     cellPropsCollections,
-    scrollLeft,
+    offsetX,
   );
 
   return showColumnIndexes.map(colIndex => (

src/VirtualTable/useHorizontalVirtual.ts

@@ -9,7 +9,7 @@ function generateRange(start: number, end: number) {
 
 export default function useHorizontalVirtual(
   cellPropsCollections: ReturnType<typeof getCellProps>[],
-  scrollLeft: number,
+  offsetX: number,
 ) {
   const { flattenColumns, componentWidth } = useContext(TableContext, [
     'flattenColumns',
@@ -26,20 +26,20 @@ export default function useHorizontalVirtual(
 
   const startIndex = useMemo(() => {
     let virtualStartIndex = flattenColumns.findIndex(col => col.fixed !== 'left');
-    let tempScrollLeft = scrollLeft;
+    let tempOffsetX = offsetX;
     for (let i = virtualStartIndex; i < flattenColumns.length; i++) {
       const colSpan = cellColSpanCollections[i];
       const width = flattenColumns
         .slice(i, i + colSpan)
         .reduce((total, col) => total + (col.width as number), 0);
-      tempScrollLeft = tempScrollLeft - width;
+      tempOffsetX = tempOffsetX - width;
       virtualStartIndex = i;
-      if (tempScrollLeft < 0) {
+      if (tempOffsetX < 0) {
         break;
       }
     }
     return virtualStartIndex;
-  }, [flattenColumns, scrollLeft, cellColSpanCollections]);
+  }, [flattenColumns, offsetX, cellColSpanCollections]);
 
   const virtualOffset = useMemo(
     () =>
@@ -65,7 +65,7 @@ export default function useHorizontalVirtual(
 
     //  计算当前这个右边部分的距离
     const firstRightWidth =
-      (flattenColumns[startIndex].width as number) - (scrollLeft - virtualOffset);
+      (flattenColumns[startIndex].width as number) - (offsetX - virtualOffset);
 
     for (let i = startIndex; i < flattenColumns.length; i++) {
       if (i === startIndex) {
@@ -79,7 +79,7 @@ export default function useHorizontalVirtual(
       }
     }
     return virtualEndIndex;
-  }, [componentWidth, flattenColumns, scrollLeft, virtualOffset, startIndex]);
+  }, [componentWidth, flattenColumns, offsetX, virtualOffset, startIndex]);
 
   const showColumnIndexes = useMemo(() => {
     const fixedLeftIndexes = [];