feat(table): 虚拟列表下，支持设置滚动位置 (#3044) (#3045)

* feat(table): 设置滚动位置(#3044) * chore(table): 规范代码结构(#3044) * chore(table): 规范代码结构(#3044) --------- Co-authored-by: wanjinping <[email protected]>
XiaoMi · Nov 19, 2024 · 26a081f · 26a081f
1 parent cc8c3a2
commit 26a081f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 4 deletions.
diff --git a/.changeset/moody-bikes-raise.md b/.changeset/moody-bikes-raise.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/table": minor
+"@hi-ui/hiui": minor
+---
+
+feat(table): 虚拟列表下，支持设置滚动位置(#3044)
diff --git 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<HTMLDivElement | null, TableBodyProps>(
       measureRowElementRef,
       scrollbar,
       scrollLeft,
+      innerRef,
     } = useTableContext()
     const virtualListRef = useRef(null)
+    const listRef = useRef<ListRef>(null)
+
     const cls = cx(`${prefixCls}-body`)
 
     const getRequiredProps = useLatestCallback(
@@ -56,6 +59,10 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
       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<HTMLDivElement | null, TableBodyProps>(
               style={{ width: '100%', position: 'sticky', left: 0, maxHeight }}
             >
               <VirtualList
+                ref={listRef}
                 prefixCls={`${cls}--virtual`}
                 data={transitionData}
                 height={vMaxHeight}

diff --git a/packages/ui/table/src/types.ts b/packages/ui/table/src/types.ts
@@ -304,3 +304,21 @@ export interface TableRowRequiredProps {
 }
 
 export type TableRowRecord = Record<string, any>
+
+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
+}
diff --git 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) => {
   /**
@@ -701,6 +703,7 @@ export const useTable = ({
     rowClassName,
     cellClassName,
     onHighlightedCol,
+    innerRef,
   }
 }
 
@@ -918,6 +921,10 @@ export interface UseTableProps {
     },
     highlightedColKeys: string[]
   ) => void
+  /**
+   * 提供辅助方法的内部引用
+   */
+  innerRef?: React.Ref<TableHelper>
 }
 
 export type UseTableReturn = ReturnType<typeof useTable>
diff --git 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,28 @@ export const Virtual = () => {
     },
   ])
   const [data] = React.useState(MockData)
+  const tableRef = React.useRef<TableHelper>(null)
 
   return (
     <>
       <h1>Virtual for Table</h1>
       <div className="table-virtual__wrap" style={{ minWidth: 660, background: '#fff' }}>
+        <div style={{ marginBottom: '1em' }}>
+          <Button
+            onClick={() => {
+              // key 为节点 id
+              tableRef.current?.scrollTo?.({ key: '小米-1000', align: 'top' })
+            }}
+          >
+            scroll to key: 小米-1000
+          </Button>
+        </div>
         <Table
           fieldKey="name"
           columns={column}
           data={data}
           virtual={true}
+          innerRef={tableRef}
           // virtual={{
           //   onVisibleChange(...args) {
           //     console.log('onVisibleChange', ...args)