refactor: use ref (#1031)

* refactor: move to merge into ref

* chore: clean up

Author: zombieJ

docs/examples/scrollY.tsx

@@ -60,7 +60,7 @@ const Test = () => {
         Scroll To key 9
       </button>
       <Table
-        reference={tblRef}
+        ref={tblRef}
         columns={columns}
         data={data}
         scroll={{ y: 300 }}

docs/examples/virtual.tsx

@@ -236,7 +236,7 @@ const Demo = () => {
 
           return mergedWidth;
         }}
-        reference={tblRef}
+        ref={tblRef}
       />
     </div>
   );

src/Table.tsx

@@ -121,8 +121,6 @@ export interface TableProps<RecordType = unknown>
 
   sticky?: boolean | TableSticky;
 
-  reference?: React.Ref<Reference>;
-
   // =================================== Internal ===================================
   /**
    * @private Internal usage, may remove by refactor. Should always use `columns` instead.
@@ -170,7 +168,10 @@ function defaultEmpty() {
   return 'No Data';
 }
 
-function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<RecordType>) {
+function Table<RecordType extends DefaultRecordType>(
+  tableProps: TableProps<RecordType>,
+  ref: React.Ref<Reference>,
+) {
   const props = {
     rowKey: 'key',
     prefixCls: DEFAULT_PREFIX,
@@ -188,7 +189,6 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     scroll,
     tableLayout,
     direction,
-    reference,
 
     // Additional Part
     title,
@@ -314,7 +314,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
   const scrollBodyRef = React.useRef<HTMLDivElement>();
   const scrollBodyContainerRef = React.useRef<HTMLDivElement>();
 
-  React.useImperativeHandle(reference, () => {
+  React.useImperativeHandle(ref, () => {
     return {
       nativeElement: fullTableRef.current,
       scrollTo: config => {
@@ -876,8 +876,20 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
   return <TableContext.Provider value={TableContextValue}>{fullTable}</TableContext.Provider>;
 }
 
-export function genTable(shouldTriggerRender?: CompareProps<typeof Table>): typeof Table {
-  return makeImmutable(Table, shouldTriggerRender);
+export type ForwardGenericTable = (<RecordType extends DefaultRecordType = any>(
+  props: TableProps<RecordType> & { ref?: React.Ref<Reference> },
+) => React.ReactElement) & {
+  displayName?: string;
+};
+
+const RefTable = React.forwardRef(Table) as ForwardGenericTable;
+
+if (process.env.NODE_ENV !== 'production') {
+  RefTable.displayName = 'Table';
+}
+
+export function genTable(shouldTriggerRender?: CompareProps<typeof Table>) {
+  return makeImmutable(RefTable, shouldTriggerRender) as ForwardGenericTable;
 }
 
 const ImmutableTable = genTable();

src/VirtualTable/BodyGrid.tsx

@@ -73,7 +73,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
   React.useImperativeHandle(ref, () => {
     const obj = {
       scrollTo: (config: ScrollConfig) => {
-        console.log('!!!!', config);
         listRef.current?.scrollTo(config);
       },
     } as unknown as GridRef;

src/VirtualTable/index.tsx

@@ -4,7 +4,7 @@ import { warning } from 'rc-util';
 import * as React from 'react';
 import { INTERNAL_HOOKS } from '../constant';
 import { makeImmutable } from '../context/TableContext';
-import type { CustomizeScrollBody } from '../interface';
+import type { CustomizeScrollBody, Reference } from '../interface';
 import Table, { DEFAULT_PREFIX, type TableProps } from '../Table';
 import Grid from './BodyGrid';
 import { StaticContext } from './context';
@@ -23,7 +23,7 @@ export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordTyp
   listItemHeight?: number;
 }
 
-function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>) {
+function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: React.Ref<Reference>) {
   const { columns, scroll, sticky, prefixCls = DEFAULT_PREFIX, className, listItemHeight } = props;
 
   let { x: scrollX, y: scrollY } = scroll || {};
@@ -68,15 +68,26 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>) {
         columns={columns}
         internalHooks={INTERNAL_HOOKS}
         tailor
+        ref={ref}
       />
     </StaticContext.Provider>
   );
 }
 
-export function genVirtualTable(
-  shouldTriggerRender?: CompareProps<typeof Table>,
-): typeof VirtualTable {
-  return makeImmutable(VirtualTable, shouldTriggerRender);
+export type ForwardGenericVirtualTable = (<RecordType>(
+  props: TableProps<RecordType> & { ref?: React.Ref<Reference> },
+) => React.ReactElement) & {
+  displayName?: string;
+};
+
+const RefVirtualTable = React.forwardRef(VirtualTable) as ForwardGenericVirtualTable;
+
+if (process.env.NODE_ENV !== 'production') {
+  RefVirtualTable.displayName = 'VirtualTable';
+}
+
+export function genVirtualTable(shouldTriggerRender?: CompareProps<typeof Table>) {
+  return makeImmutable(RefVirtualTable, shouldTriggerRender) as ForwardGenericVirtualTable;
 }
 
 export default genVirtualTable();

tests/Virtual.spec.tsx

@@ -77,7 +77,7 @@ describe('Table.Virtual', () => {
     });
   }
 
-  function getTable(props?: Partial<VirtualTableProps<any>>) {
+  function getTable(props?: Partial<VirtualTableProps<any>> & { ref?: React.Ref<Reference> }) {
     return render(
       <VirtualTable
         columns={[
@@ -311,7 +311,7 @@ describe('Table.Virtual', () => {
 
   it('scrollTo should pass', async () => {
     const tblRef = React.createRef<Reference>();
-    getTable({ reference: tblRef });
+    getTable({ ref: tblRef });
 
     tblRef.current.scrollTo({
       index: 99,

tests/refs.spec.tsx

@@ -34,7 +34,7 @@ describe('Table.Ref', () => {
             dataIndex: 'key',
           },
         ]}
-        reference={ref}
+        ref={ref}
         scroll={{
           y: 10,
         }}