From cd3041af1a155d601c5005a88b1ec0f991cf3880 Mon Sep 17 00:00:00 2001 From: wanjinping Date: Wed, 13 Nov 2024 14:51:12 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(table):=20=E8=AE=BE=E7=BD=AE=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E4=BD=8D=E7=BD=AE(#3044)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/moody-bikes-raise.md | 6 ++++++ packages/ui/table/src/TableBody.tsx | 12 ++++++++++-- packages/ui/table/src/types.ts | 3 +++ packages/ui/table/src/use-table.ts | 7 +++++++ packages/ui/table/stories/virtual.stories.tsx | 14 ++++++++++++-- 5 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 .changeset/moody-bikes-raise.md diff --git a/.changeset/moody-bikes-raise.md b/.changeset/moody-bikes-raise.md new file mode 100644 index 000000000..683ccfd6a --- /dev/null +++ b/.changeset/moody-bikes-raise.md @@ -0,0 +1,6 @@ +--- +"@hi-ui/table": patch +"@hi-ui/hiui": patch +--- + +feat(table): 设置滚动位置(#3044) diff --git a/packages/ui/table/src/TableBody.tsx b/packages/ui/table/src/TableBody.tsx index 962d493c8..fb8058f13 100644 --- a/packages/ui/table/src/TableBody.tsx +++ b/packages/ui/table/src/TableBody.tsx @@ -1,5 +1,5 @@ -import React, { forwardRef, useMemo, useRef } from 'react' -import VirtualList from 'rc-virtual-list' +import React, { forwardRef, useMemo, useRef, useImperativeHandle } from 'react' +import VirtualList, { ListRef } from 'rc-virtual-list' import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { useLatestCallback } from '@hi-ui/use-latest' @@ -32,8 +32,11 @@ export const TableBody = forwardRef( measureRowElementRef, scrollbar, scrollLeft, + innerRef, } = useTableContext() const virtualListRef = useRef(null) + const listRef = useRef(null) + const cls = cx(`${prefixCls}-body`) const getRequiredProps = useLatestCallback( @@ -56,6 +59,10 @@ export const TableBody = forwardRef( return tmpWidth }, [colWidths]) + useImperativeHandle(innerRef, () => ({ + scrollTo: listRef.current?.scrollTo, + })) + if (virtual) { // TODO： avg和summay row的逻辑 const realHeight = (virtualListRef.current as HTMLTableElement | null)?.getBoundingClientRect() @@ -92,6 +99,7 @@ export const TableBody = forwardRef( style={{ width: '100%', position: 'sticky', left: 0, maxHeight }} > + +export type TableHelper = TreeHelper diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 805e1dd07..94ab60914 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -32,6 +32,7 @@ import { TableRowSelection, FlattedTableColumnItemData, FlattedTableRowData, + TableHelper, } from './types' import { SELECTION_DATA_KEY } from './Table' @@ -87,6 +88,7 @@ export const useTable = ({ cellClassName, onChange, onHighlightedCol, + innerRef, ...rootProps }: UseTableProps) => { /** @@ -687,6 +689,7 @@ export const useTable = ({ rowClassName, cellClassName, onHighlightedCol, + innerRef, } } @@ -904,6 +907,10 @@ export interface UseTableProps { }, highlightedColKeys: string[] ) => void + /** + * 提供辅助方法的内部引用 + */ + innerRef?: React.Ref } export type UseTableReturn = ReturnType diff --git a/packages/ui/table/stories/virtual.stories.tsx b/packages/ui/table/stories/virtual.stories.tsx index e20a662a0..c375e3d8a 100644 --- a/packages/ui/table/stories/virtual.stories.tsx +++ b/packages/ui/table/stories/virtual.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' -import Table from '../src' - +import Table, { TableHelper } from '../src' +import Button from '@hi-ui/button' /** * @title 虚拟列表 */ @@ -45,16 +45,26 @@ export const Virtual = () => { }, ]) const [data] = React.useState(MockData) + const tableRef = React.useRef(null) return ( <>

Virtual for Table

+
Date: Mon, 18 Nov 2024 20:09:07 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore(table):=20=E8=A7=84=E8=8C=83=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84(#3044)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/moody-bikes-raise.md | 4 ++-- packages/ui/table/src/types.ts | 19 +++++++++++++++++-- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/.changeset/moody-bikes-raise.md b/.changeset/moody-bikes-raise.md index 683ccfd6a..d38a279fb 100644 --- a/.changeset/moody-bikes-raise.md +++ b/.changeset/moody-bikes-raise.md @@ -1,6 +1,6 @@ --- -"@hi-ui/table": patch -"@hi-ui/hiui": patch +"@hi-ui/table": minor +"@hi-ui/hiui": minor --- feat(table): 设置滚动位置(#3044) diff --git a/packages/ui/table/src/types.ts b/packages/ui/table/src/types.ts index 72be7fd0b..0585662e2 100644 --- a/packages/ui/table/src/types.ts +++ b/packages/ui/table/src/types.ts @@ -1,7 +1,6 @@ import React from 'react' import { PaginationProps } from '@hi-ui/pagination' import { PopperOverlayProps } from '@hi-ui/popper' -import { TreeHelper } from '@hi-ui/tree' export type TableColumnItemAlignEnum = 'left' | 'right' | 'center' @@ -306,4 +305,20 @@ export interface TableRowRequiredProps { export type TableRowRecord = Record -export type TableHelper = TreeHelper +export type ScrollAlign = 'top' | 'bottom' | 'auto' + +export type ScrollConfig = + | { + index: number + align?: ScrollAlign + offset?: number + } + | { + key: React.Key + align?: ScrollAlign + offset?: number + } + +export interface TableHelper { + scrollTo?: (arg: number | ScrollConfig) => void +} From 1dd16c5c4145016e857bd1b1d2b50ce51ed30562 Mon Sep 17 00:00:00 2001 From: wanjinping Date: Tue, 19 Nov 2024 18:27:40 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore(table):=20=E8=A7=84=E8=8C=83=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84(#3044)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/moody-bikes-raise.md | 2 +- packages/ui/table/stories/virtual.stories.tsx | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/.changeset/moody-bikes-raise.md b/.changeset/moody-bikes-raise.md index d38a279fb..2669a64c1 100644 --- a/.changeset/moody-bikes-raise.md +++ b/.changeset/moody-bikes-raise.md @@ -3,4 +3,4 @@ "@hi-ui/hiui": minor --- -feat(table): 设置滚动位置(#3044) +feat(table): 虚拟列表下，支持设置滚动位置(#3044) diff --git a/packages/ui/table/stories/virtual.stories.tsx b/packages/ui/table/stories/virtual.stories.tsx index c375e3d8a..092f3cd50 100644 --- a/packages/ui/table/stories/virtual.stories.tsx +++ b/packages/ui/table/stories/virtual.stories.tsx @@ -50,15 +50,17 @@ export const Virtual = () => { return ( <>

Virtual for Table

-
+
+ +