feat: support virtual components.body (#1069)

* feat: support virtual components.body

* test: add test case

* demo: restore

* perf: perf context

* fix: remove unused code

Author: linxianxi

src/VirtualTable/BodyGrid.tsx

@@ -41,7 +41,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     'emptyNode',
     'scrollX',
   ]);
-  const { sticky, scrollY, listItemHeight } = useContext(StaticContext);
+  const { sticky, scrollY, listItemHeight, getComponent } = useContext(StaticContext);
 
   // =========================== Ref ============================
   const listRef = React.useRef<ListRef>();
@@ -198,6 +198,11 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
   // ========================== Render ==========================
   const tblPrefixCls = `${prefixCls}-tbody`;
 
+  // default 'div' in rc-virtual-list
+  const wrapperComponent = getComponent(['body', 'wrapper']);
+  const RowComponent = getComponent(['body', 'row'], 'div');
+  const cellComponent = getComponent(['body', 'cell'], 'div');
+
   let bodyContent: React.ReactNode;
   if (flattenData.length) {
     // ========================== Sticky Scroll Bar ==========================
@@ -220,6 +225,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         itemHeight={listItemHeight || 24}
         data={flattenData}
         itemKey={item => getRowKey(item.record)}
+        component={wrapperComponent}
         scrollWidth={scrollX as number}
         onVirtualScroll={({ x }) => {
           onScroll({
@@ -236,11 +242,11 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     );
   } else {
     bodyContent = (
-      <div className={classNames(`${prefixCls}-placeholder`)}>
-        <Cell component="div" prefixCls={prefixCls}>
+      <RowComponent className={classNames(`${prefixCls}-placeholder`)}>
+        <Cell component={cellComponent} prefixCls={prefixCls}>
           {emptyNode}
         </Cell>
-      </div>
+      </RowComponent>
     );
   }
 

src/VirtualTable/BodyLine.tsx

@@ -6,6 +6,7 @@ import TableContext, { responseImmutable } from '../context/TableContext';
 import type { FlattenData } from '../hooks/useFlattenRecords';
 import useRowInfo from '../hooks/useRowInfo';
 import VirtualCell from './VirtualCell';
+import { StaticContext } from './context';
 
 export interface BodyLineProps<RecordType = any> {
   data: FlattenData<RecordType>;
@@ -27,9 +28,13 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
     TableContext,
     ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX'],
   );
+  const { getComponent } = useContext(StaticContext, ['getComponent']);
 
   const rowInfo = useRowInfo(record, rowKey, index, indent);
 
+  const RowComponent = getComponent(['body', 'row'], 'div');
+  const cellComponent = getComponent(['body', 'cell'], 'div');
+
   // ========================== Expand ==========================
   const { rowSupportExpand, expanded, rowProps, expandedRowRender, expandedRowClassName } = rowInfo;
 
@@ -50,15 +55,15 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
     const rowCellCls = `${prefixCls}-expanded-row-cell`;
 
     expandRowNode = (
-      <div
+      <RowComponent
         className={classNames(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
           computedExpandedRowClassName,
         )}
       >
         <Cell
-          component="div"
+          component={cellComponent}
           prefixCls={prefixCls}
           className={classNames(rowCellCls, {
             [`${rowCellCls}-fixed`]: fixColumn,
@@ -67,12 +72,11 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
         >
           {expandContent}
         </Cell>
-      </div>
+      </RowComponent>
     );
   }
 
   // ========================== Render ==========================
-
   const rowStyle: React.CSSProperties = {
     ...style,
     width: scrollX as number,
@@ -84,7 +88,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   }
 
   const rowNode = (
-    <div
+    <RowComponent
       {...rowProps}
       {...restProps}
       ref={rowSupportExpand ? null : ref}
@@ -97,6 +101,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
         return (
           <VirtualCell
             key={colIndex}
+            component={cellComponent}
             rowInfo={rowInfo}
             column={column}
             colIndex={colIndex}
@@ -109,7 +114,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
           />
         );
       })}
-    </div>
+    </RowComponent>
   );
 
   if (rowSupportExpand) {

src/VirtualTable/VirtualCell.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { getCellProps } from '../Body/BodyRow';
 import Cell from '../Cell';
 import type useRowInfo from '../hooks/useRowInfo';
-import type { ColumnType } from '../interface';
+import type { ColumnType, CustomizeComponent } from '../interface';
 import { GridContext } from './context';
 
 export interface VirtualCellProps<RecordType> {
@@ -13,6 +13,7 @@ export interface VirtualCellProps<RecordType> {
   colIndex: number;
   indent: number;
   index: number;
+  component?: CustomizeComponent;
   /** Used for `column.render` */
   renderIndex: number;
   record: RecordType;
@@ -42,6 +43,7 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
     colIndex,
     indent,
     index,
+    component,
     renderIndex,
     record,
     style,
@@ -114,7 +116,7 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
       ellipsis={column.ellipsis}
       align={column.align}
       scope={column.rowScope}
-      component="div"
+      component={component}
       prefixCls={rowInfo.prefixCls}
       key={key}
       record={record}

src/VirtualTable/context.ts

@@ -1,10 +1,11 @@
 import { createContext } from '@rc-component/context';
-import type { TableSticky } from '../interface';
+import type { GetComponent, TableSticky } from '../interface';
 
 export interface StaticContextProps {
   scrollY: number;
   listItemHeight: number;
   sticky: boolean | TableSticky;
+  getComponent: GetComponent;
 }
 
 export const StaticContext = createContext<StaticContextProps>(null);

src/VirtualTable/index.tsx

@@ -1,13 +1,14 @@
 import type { CompareProps } from '@rc-component/context/lib/Immutable';
 import classNames from 'classnames';
-import { warning } from 'rc-util';
+import { useEvent, warning } from 'rc-util';
 import * as React from 'react';
 import { INTERNAL_HOOKS } from '../constant';
 import { makeImmutable } from '../context/TableContext';
-import type { CustomizeScrollBody, Reference } from '../interface';
+import type { CustomizeScrollBody, GetComponent, Reference } from '../interface';
 import Table, { DEFAULT_PREFIX, type TableProps } from '../Table';
 import Grid from './BodyGrid';
 import { StaticContext } from './context';
+import getValue from 'rc-util/lib/utils/get';
 
 const renderBody: CustomizeScrollBody<any> = (rawData, props) => {
   const { ref, onScroll } = props;
@@ -54,10 +55,14 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
     }
   }
 
+  const getComponent = useEvent<GetComponent>(
+    (path, defaultComponent) => getValue(components, path) || defaultComponent,
+  );
+
   // ========================= Context ==========================
   const context = React.useMemo(
-    () => ({ sticky, scrollY, listItemHeight }),
-    [sticky, scrollY, listItemHeight],
+    () => ({ sticky, scrollY, listItemHeight, getComponent }),
+    [sticky, scrollY, listItemHeight, getComponent],
   );
 
   // ========================== Render ==========================

tests/Virtual.spec.tsx

@@ -398,18 +398,36 @@ describe('Table.Virtual', () => {
   });
 
   it('components', async () => {
+    const Wrapper = React.forwardRef((props, ref: React.Ref<HTMLDivElement>) => (
+      <div {...props} ref={ref} data-mark="my-wrapper" />
+    ));
+
     const { container } = getTable({
       components: {
         header: {
           cell: function MyTh(props: any) {
             return <th {...props} data-mark="my-th" />;
           },
         },
+        body: {
+          wrapper: Wrapper,
+          row: (props: any) => <div {...props} data-mark="my-row" />,
+          cell: (props: any) => <div {...props} data-mark="my-cell" />,
+        },
       },
     });
 
     await waitFakeTimer();
 
     expect(container.querySelector('thead th')).toHaveAttribute('data-mark', 'my-th');
+    expect(container.querySelector('.rc-virtual-list-holder')).toHaveAttribute(
+      'data-mark',
+      'my-wrapper',
+    );
+    expect(container.querySelector('.rc-table-row')).toHaveAttribute('data-mark', 'my-row');
+    expect(container.querySelector('.rc-table-row .rc-table-cell')).toHaveAttribute(
+      'data-mark',
+      'my-cell',
+    );
   });
 });