feat: horizontal virtual

linxianxi · linxianxi · commit cefe7d8a5826 · 2024-04-29T17:29:28.000+08:00
diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import '../../assets/index.less';
 import { VirtualTable } from '../../src';
 import type { ColumnsType, Reference } from '../../src/interface';
@@ -11,7 +11,7 @@ interface RecordType {
   indexKey: string;
 }
 
-const columns: ColumnsType = [
+const defaultColumns: ColumnsType = [
   // { title: 'title1', dataIndex: 'a', key: 'a', width: 100,},
   // { title: 'title1', dataIndex: 'a', key: 'a', width: 100, },
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
@@ -162,15 +162,6 @@ const columns: ColumnsType = [
   },
 ];
 
-export function cleanOnCell(cols: any = []) {
-  cols.forEach(col => {
-    delete (col as any).onCell;
-
-    cleanOnCell((col as any).children);
-  });
-}
-cleanOnCell(columns);
-
 const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
   a: `a${index}`,
   b: `b${index}`,
@@ -190,9 +181,21 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
 
 const Demo = () => {
   const tblRef = React.useRef<Reference>();
+  const [enableColRowSpan, setEnableColRowSpan] = useState(false);
+
+  function cleanOnCell(cols: ColumnsType) {
+    return cols?.map(({ onCell, ...col }: any) => {
+      return { ...col, children: cleanOnCell(col.children) };
+    });
+  }
+
+  const columns = enableColRowSpan ? defaultColumns : cleanOnCell(defaultColumns);
 
   return (
     <div style={{ width: 800, padding: `0 64px` }}>
+      <button onClick={() => setEnableColRowSpan(!enableColRowSpan)}>
+        Toggle RowSpan and ColSpan
+      </button>
       <button
         onClick={() => {
           tblRef.current?.scrollTo({
@@ -214,6 +217,7 @@ const Demo = () => {
       </button>
 
       <VirtualTable
+        virtual={{ x: true }}
         columns={columns}
         // expandedRowRender={({ b, c }) => b || c}
         scroll={{ x: 1300, y: 200 }}
diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx
@@ -31,6 +31,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     childrenColumnName,
     emptyNode,
     scrollX,
+    componentWidth,
   } = useContext(TableContext, [
     'flattenColumns',
     'onColumnResize',
@@ -40,11 +41,13 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     'childrenColumnName',
     'emptyNode',
     'scrollX',
+    'componentWidth',
   ]);
   const {
     sticky,
     scrollY,
     listItemHeight,
+    horizontalVirtual,
     getComponent,
     onScroll: onTablePropScroll,
   } = useContext(StaticContext);
@@ -69,6 +72,8 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     [columnsWidth],
   );
 
+  const [scrollLeft, setScrollLeft] = React.useState(0);
+
   React.useEffect(() => {
     columnsWidth.forEach(([key, width]) => {
       onColumnResize(key, width);
@@ -87,6 +92,12 @@ 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,
         });
@@ -191,6 +202,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
           }}
           extra
           getHeight={getHeight}
+          scrollLeft={scrollLeft}
         />
       );
     });
@@ -235,6 +247,9 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         component={wrapperComponent}
         scrollWidth={scrollX as number}
         onVirtualScroll={({ x }) => {
+          if (horizontalVirtual) {
+            setScrollLeft(x);
+          }
           onScroll({
             scrollLeft: x,
           });
@@ -244,7 +259,15 @@ 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} {...itemProps} />;
+          return (
+            <BodyLine
+              data={item}
+              rowKey={rowKey}
+              index={index}
+              scrollLeft={scrollLeft}
+              {...itemProps}
+            />
+          );
         }}
       </VirtualList>
     );
diff --git a/src/VirtualTable/BodyLine.tsx b/src/VirtualTable/BodyLine.tsx
@@ -7,31 +7,42 @@ import type { FlattenData } from '../hooks/useFlattenRecords';
 import useRowInfo from '../hooks/useRowInfo';
 import VirtualCell from './VirtualCell';
 import { StaticContext } from './context';
+import { getCellProps } from '../Body/BodyRow';
+import VirtualRow from './VirtualRow';
 
 export interface BodyLineProps<RecordType = any> {
   data: FlattenData<RecordType>;
   index: number;
   className?: string;
   style?: React.CSSProperties;
   rowKey: React.Key;
+  scrollLeft: 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, ...restProps } = props;
+  const { data, index, className, rowKey, style, extra, getHeight, scrollLeft, ...restProps } =
+    props;
   const { record, indent, index: renderIndex } = data;
 
   const { scrollX, flattenColumns, prefixCls, fixColumn, componentWidth } = useContext(
     TableContext,
     ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX'],
   );
-  const { getComponent } = useContext(StaticContext, ['getComponent']);
+  const { getComponent, horizontalVirtual } = useContext(StaticContext, [
+    'getComponent',
+    'horizontalVirtual',
+  ]);
 
   const rowInfo = useRowInfo(record, rowKey, index, indent);
 
+  const cellPropsCollections = flattenColumns.map((column, colIndex) =>
+    getCellProps(rowInfo, column, colIndex, indent, index),
+  );
+
   const RowComponent = getComponent(['body', 'row'], 'div');
   const cellComponent = getComponent(['body', 'cell'], 'div');
 
@@ -87,6 +98,16 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
     rowStyle.pointerEvents = 'none';
   }
 
+  const shareCellProps = {
+    index,
+    renderIndex,
+    inverse: extra,
+    record,
+    rowInfo,
+    component: cellComponent,
+    getHeight,
+  };
+
   const rowNode = (
     <RowComponent
       {...rowProps}
@@ -98,23 +119,23 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
       })}
       style={{ ...rowStyle, ...rowProps?.style }}
     >
-      {flattenColumns.map((column, colIndex) => {
-        return (
+      {horizontalVirtual ? (
+        <VirtualRow
+          cellPropsCollections={cellPropsCollections}
+          scrollLeft={scrollLeft}
+          {...shareCellProps}
+        />
+      ) : (
+        flattenColumns.map((column, colIndex) => (
           <VirtualCell
             key={colIndex}
-            component={cellComponent}
-            rowInfo={rowInfo}
             column={column}
             colIndex={colIndex}
-            indent={indent}
-            index={index}
-            renderIndex={renderIndex}
-            record={record}
-            inverse={extra}
-            getHeight={getHeight}
+            cellProps={cellPropsCollections[colIndex]}
+            {...shareCellProps}
           />
-        );
-      })}
+        ))
+      )}
     </RowComponent>
   );
 
diff --git a/src/VirtualTable/VirtualCell.tsx b/src/VirtualTable/VirtualCell.tsx
@@ -1,7 +1,7 @@
 import { useContext } from '@rc-component/context';
 import classNames from 'classnames';
 import * as React from 'react';
-import { getCellProps } from '../Body/BodyRow';
+import type { getCellProps } from '../Body/BodyRow';
 import Cell from '../Cell';
 import type useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent } from '../interface';
@@ -11,12 +11,12 @@ export interface VirtualCellProps<RecordType> {
   rowInfo: ReturnType<typeof useRowInfo<RecordType>>;
   column: ColumnType<RecordType>;
   colIndex: number;
-  indent: number;
   index: number;
   component?: CustomizeComponent;
   /** Used for `column.render` */
   renderIndex: number;
   record: RecordType;
+  cellProps: ReturnType<typeof getCellProps>;
 
   // Follow props is used for RowSpanVirtualCell only
   style?: React.CSSProperties;
@@ -41,28 +41,22 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
     rowInfo,
     column,
     colIndex,
-    indent,
     index,
     component,
     renderIndex,
     record,
     style,
     className,
     inverse,
+    cellProps,
     getHeight,
   } = props;
 
   const { render, dataIndex, className: columnClassName, width: colWidth } = column;
 
   const { columnsOffset } = useContext(GridContext, ['columnsOffset']);
 
-  const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
-    rowInfo,
-    column,
-    colIndex,
-    indent,
-    index,
-  );
+  const { key, fixedInfo, appendCellNode, additionalCellProps } = cellProps;
 
   const { style: cellStyle, colSpan = 1, rowSpan = 1 } = additionalCellProps;
 
diff --git a/src/VirtualTable/VirtualRow.tsx b/src/VirtualTable/VirtualRow.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useContext } from '@rc-component/context';
+import TableContext from '../context/TableContext';
+import useHorizontalVirtual from './useHorizontalVirtual';
+import type { getCellProps } from '../Body/BodyRow';
+import VirtualCell from './VirtualCell';
+import type useRowInfo from '../hooks/useRowInfo';
+import type { CustomizeComponent } from '../interface';
+
+export interface VirtualRowProps {
+  cellPropsCollections: ReturnType<typeof getCellProps>[];
+  scrollLeft: number;
+  index: number;
+  renderIndex: number;
+  inverse: boolean;
+  record: any;
+  rowInfo: ReturnType<typeof useRowInfo>;
+  component: CustomizeComponent;
+  getHeight: (rowSpan: number) => number;
+}
+
+export default function VirtualRow({
+  cellPropsCollections,
+  scrollLeft,
+  ...restProps
+}: VirtualRowProps) {
+  const { flattenColumns } = useContext(TableContext, ['flattenColumns']);
+
+  const [startIndex, virtualOffset, showColumnIndexes] = useHorizontalVirtual(
+    cellPropsCollections,
+    scrollLeft,
+  );
+
+  return showColumnIndexes.map(colIndex => (
+    <VirtualCell
+      key={colIndex}
+      column={flattenColumns[colIndex]}
+      colIndex={colIndex}
+      style={startIndex === colIndex ? { marginLeft: virtualOffset } : {}}
+      cellProps={cellPropsCollections[colIndex]}
+      {...restProps}
+    />
+  ));
+}
diff --git a/src/VirtualTable/context.ts b/src/VirtualTable/context.ts
@@ -5,6 +5,7 @@ export interface StaticContextProps {
   scrollY: number;
   listItemHeight: number;
   sticky: boolean | TableSticky;
+  horizontalVirtual: boolean;
   getComponent: GetComponent;
   onScroll?: React.UIEventHandler<HTMLDivElement>;
 }
diff --git a/src/VirtualTable/index.tsx b/src/VirtualTable/index.tsx
@@ -21,6 +21,7 @@ export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordTyp
     x?: number;
     y: number;
   };
+  virtual?: { x?: boolean };
   listItemHeight?: number;
 }
 
@@ -33,6 +34,7 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
     className,
     listItemHeight,
     components,
+    virtual,
     onScroll,
   } = props;
 
@@ -63,10 +65,19 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
   // Memo this
   const onInternalScroll = useEvent(onScroll);
 
+  const horizontalVirtual = !!virtual?.x;
+
   // ========================= Context ==========================
   const context = React.useMemo(
-    () => ({ sticky, scrollY, listItemHeight, getComponent, onScroll: onInternalScroll }),
-    [sticky, scrollY, listItemHeight, getComponent, onInternalScroll],
+    () => ({
+      sticky,
+      scrollY,
+      listItemHeight,
+      horizontalVirtual,
+      getComponent,
+      onScroll: onInternalScroll,
+    }),
+    [sticky, scrollY, listItemHeight, horizontalVirtual, getComponent, onInternalScroll],
   );
 
   // ========================== Render ==========================
@@ -93,7 +104,7 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
 }
 
 export type ForwardGenericVirtualTable = (<RecordType>(
-  props: TableProps<RecordType> & React.RefAttributes<Reference>,
+  props: VirtualTableProps<RecordType> & React.RefAttributes<Reference>,
 ) => React.ReactElement) & { displayName?: string };
 
 const RefVirtualTable = React.forwardRef(VirtualTable) as ForwardGenericVirtualTable;
diff --git a/src/VirtualTable/useHorizontalVirtual.ts b/src/VirtualTable/useHorizontalVirtual.ts
diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ export interface StaticContextProps {`
`5`	`5`	`scrollY: number;`
`6`	`6`	`listItemHeight: number;`
`7`	`7`	`sticky: boolean \| TableSticky;`
	`8`	`+ horizontalVirtual: boolean;`
`8`	`9`	`getComponent: GetComponent;`
`9`	`10`	`onScroll?: React.UIEventHandler<HTMLDivElement>;`
`10`	`11`	`}`