From 7c7fb3ca993aeaee83d1fc38bbb7208b715aa3f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Oct 2023 19:30:54 +0800 Subject: [PATCH 1/2] refactor: move to merge into ref --- docs/examples/scrollY.tsx | 2 +- docs/examples/virtual.tsx | 2 +- src/Table.tsx | 26 +++++++++++++++++++------- src/VirtualTable/index.tsx | 23 +++++++++++++++++------ tests/Virtual.spec.tsx | 4 ++-- tests/refs.spec.tsx | 2 +- 6 files changed, 41 insertions(+), 18 deletions(-) diff --git a/docs/examples/scrollY.tsx b/docs/examples/scrollY.tsx index f82cf846c..8b30845f5 100644 --- a/docs/examples/scrollY.tsx +++ b/docs/examples/scrollY.tsx @@ -60,7 +60,7 @@ const Test = () => { Scroll To key 9 { return mergedWidth; }} - reference={tblRef} + ref={tblRef} /> ); diff --git a/src/Table.tsx b/src/Table.tsx index 9c3c899a5..7b7751554 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -121,8 +121,6 @@ export interface TableProps sticky?: boolean | TableSticky; - reference?: React.Ref; - // =================================== Internal =================================== /** * @private Internal usage, may remove by refactor. Should always use `columns` instead. @@ -170,7 +168,10 @@ function defaultEmpty() { return 'No Data'; } -function Table(tableProps: TableProps) { +function Table( + tableProps: TableProps, + ref: React.Ref, +) { const props = { rowKey: 'key', prefixCls: DEFAULT_PREFIX, @@ -188,7 +189,6 @@ function Table(tableProps: TableProps(tableProps: TableProps(); const scrollBodyContainerRef = React.useRef(); - React.useImperativeHandle(reference, () => { + React.useImperativeHandle(ref, () => { return { nativeElement: fullTableRef.current, scrollTo: config => { @@ -876,8 +876,20 @@ function Table(tableProps: TableProps{fullTable}; } -export function genTable(shouldTriggerRender?: CompareProps): typeof Table { - return makeImmutable(Table, shouldTriggerRender); +export type ForwardGenericTable = (( + props: TableProps & { ref?: React.Ref }, +) => 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) { + return makeImmutable(RefTable, shouldTriggerRender) as ForwardGenericTable; } const ImmutableTable = genTable(); diff --git a/src/VirtualTable/index.tsx b/src/VirtualTable/index.tsx index 89703e203..f6965d366 100644 --- a/src/VirtualTable/index.tsx +++ b/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 extends Omit(props: VirtualTableProps) { +function VirtualTable(props: VirtualTableProps, ref: React.Ref) { const { columns, scroll, sticky, prefixCls = DEFAULT_PREFIX, className, listItemHeight } = props; let { x: scrollX, y: scrollY } = scroll || {}; @@ -68,15 +68,26 @@ function VirtualTable(props: VirtualTableProps) { columns={columns} internalHooks={INTERNAL_HOOKS} tailor + ref={ref} /> ); } -export function genVirtualTable( - shouldTriggerRender?: CompareProps, -): typeof VirtualTable { - return makeImmutable(VirtualTable, shouldTriggerRender); +export type ForwardGenericVirtualTable = (( + props: TableProps & { ref?: React.Ref }, +) => React.ReactElement) & { + displayName?: string; +}; + +const RefVirtualTable = React.forwardRef(Table) as ForwardGenericVirtualTable; + +if (process.env.NODE_ENV !== 'production') { + RefVirtualTable.displayName = 'VirtualTable'; +} + +export function genVirtualTable(shouldTriggerRender?: CompareProps) { + return makeImmutable(VirtualTable, shouldTriggerRender) as ForwardGenericVirtualTable; } export default genVirtualTable(); diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx index 35f332b38..d6557dd13 100644 --- a/tests/Virtual.spec.tsx +++ b/tests/Virtual.spec.tsx @@ -77,7 +77,7 @@ describe('Table.Virtual', () => { }); } - function getTable(props?: Partial>) { + function getTable(props?: Partial> & { ref?: React.Ref }) { return render( { it('scrollTo should pass', async () => { const tblRef = React.createRef(); - getTable({ reference: tblRef }); + getTable({ ref: tblRef }); tblRef.current.scrollTo({ index: 99, diff --git a/tests/refs.spec.tsx b/tests/refs.spec.tsx index 883c7c5fc..f291741e5 100644 --- a/tests/refs.spec.tsx +++ b/tests/refs.spec.tsx @@ -34,7 +34,7 @@ describe('Table.Ref', () => { dataIndex: 'key', }, ]} - reference={ref} + ref={ref} scroll={{ y: 10, }} From 2f3f16fe18fc935daa0334e075d12917399a32d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Oct 2023 19:32:30 +0800 Subject: [PATCH 2/2] chore: clean up --- src/VirtualTable/BodyGrid.tsx | 1 - src/VirtualTable/index.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx index c7840159c..5ea75945c 100644 --- a/src/VirtualTable/BodyGrid.tsx +++ b/src/VirtualTable/BodyGrid.tsx @@ -73,7 +73,6 @@ const Grid = React.forwardRef((props, ref) => { React.useImperativeHandle(ref, () => { const obj = { scrollTo: (config: ScrollConfig) => { - console.log('!!!!', config); listRef.current?.scrollTo(config); }, } as unknown as GridRef; diff --git a/src/VirtualTable/index.tsx b/src/VirtualTable/index.tsx index f6965d366..7f8b07433 100644 --- a/src/VirtualTable/index.tsx +++ b/src/VirtualTable/index.tsx @@ -80,14 +80,14 @@ export type ForwardGenericVirtualTable = (( displayName?: string; }; -const RefVirtualTable = React.forwardRef(Table) as ForwardGenericVirtualTable; +const RefVirtualTable = React.forwardRef(VirtualTable) as ForwardGenericVirtualTable; if (process.env.NODE_ENV !== 'production') { RefVirtualTable.displayName = 'VirtualTable'; } export function genVirtualTable(shouldTriggerRender?: CompareProps) { - return makeImmutable(VirtualTable, shouldTriggerRender) as ForwardGenericVirtualTable; + return makeImmutable(RefVirtualTable, shouldTriggerRender) as ForwardGenericVirtualTable; } export default genVirtualTable();