feat(table): virtual 模式增加 onVisibleChange api (#2989)

XiaoMi · Sep 9, 2024 · f3b4ea4 · f3b4ea4
1 parent 07f9c77
commit f3b4ea4
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 7 deletions.
diff --git a/.changeset/grumpy-swans-sing.md b/.changeset/grumpy-swans-sing.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": minor
+---
+
+feat: virtual 模式增加 onVisibleChange api
diff --git a/.changeset/plenty-jeans-guess.md b/.changeset/plenty-jeans-guess.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(table): virtual 模式增加 onVisibleChange api
diff --git a/packages/ui/table/src/TableBody.tsx b/packages/ui/table/src/TableBody.tsx
@@ -58,7 +58,8 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
 
     if (virtual) {
       // TODO： avg和summay row的逻辑
-      const realHeight = (virtualListRef.current as (HTMLTableElement | null))?.getBoundingClientRect().height
+      const realHeight = (virtualListRef.current as HTMLTableElement | null)?.getBoundingClientRect()
+        .height
       const maxHeightNumStr = String(maxHeight).replace(/px$/, '')
       const vMaxHeight = maxHeight
         ? !isNaN(Number(maxHeightNumStr))
@@ -86,14 +87,22 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
             style={{ height: 2, marginTop: -1, background: 'transparent', width: rowWidth }}
           ></div>
           {isArrayNonEmpty(transitionData) ? (
-            <div ref={virtualListRef} style={{ width: '100%', position: 'sticky', left: 0, maxHeight}}>
+            <div
+              ref={virtualListRef}
+              style={{ width: '100%', position: 'sticky', left: 0, maxHeight }}
+            >
               <VirtualList
                 prefixCls={`${cls}--virtual`}
                 data={transitionData}
                 height={vMaxHeight}
                 fullHeight={false}
                 itemHeight={10}
                 itemKey="id"
+                onVisibleChange={(...args) => {
+                  isObject(virtual) &&
+                    typeof virtual?.onVisibleChange === 'function' &&
+                    virtual?.onVisibleChange(...args)
+                }}
                 children={(row, index) => {
                   return (
                     <div

diff --git a/packages/ui/table/src/context.ts b/packages/ui/table/src/context.ts
@@ -14,7 +14,20 @@ const TableContext = createContext<
         hasSumColumn: boolean
         onRow?: (rowData: Record<string, any> | null, index: number) => TableOnRowReturn
         striped: boolean
-        virtual?: boolean
+        virtual?:
+          | boolean
+          | {
+              onVisibleChange?: (
+                visibleList: any[],
+                fullList: any[],
+                virtualInfo: {
+                  start: number
+                  end: number
+                  scrollTop: number
+                  heights: number[]
+                }
+              ) => void
+            }
         onResizeStop?: (
           evt: SyntheticEvent,
           size: ResizeCallbackData['size'],

diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts
@@ -192,7 +192,7 @@ export const useTable = ({
     data,
     columns,
     resizable,
-    virtual: virtual,
+    virtual: !!virtual,
   })
 
   // ************************ 列冻结 ************************ //
@@ -776,7 +776,20 @@ export interface UseTableProps {
    * -Cell: colspan，rowspan
    * -统计：平局行，总数行
    */
-  virtual?: boolean
+  virtual?:
+    | boolean
+    | {
+        onVisibleChange?: (
+          visibleList: any[],
+          fullList: any[],
+          virtualInfo: {
+            start: number
+            end: number
+            scrollTop: number
+            heights: number[]
+          }
+        ) => void
+      }
   /**
    *  加载中状态
    */

diff --git a/packages/ui/table/stories/virtual.stories.tsx b/packages/ui/table/stories/virtual.stories.tsx
@@ -55,6 +55,11 @@ export const Virtual = () => {
           columns={column}
           data={data}
           virtual={true}
+          // virtual={{
+          //   onVisibleChange(...args) {
+          //     console.log('onVisibleChange', ...args)
+          //   },
+          // }}
           fixedToColumn={{ right: 'operation' }}
         />
       </div>

diff --git a/patches/rc-virtual-list+3.4.8.patch b/patches/rc-virtual-list+3.4.8.patch
@@ -1,5 +1,41 @@
+diff --git a/node_modules/rc-virtual-list/es/List.d.ts b/node_modules/rc-virtual-list/es/List.d.ts
+index 116f737..6480fef 100644
+--- a/node_modules/rc-virtual-list/es/List.d.ts
++++ b/node_modules/rc-virtual-list/es/List.d.ts
+@@ -28,7 +28,12 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
+     virtual?: boolean;
+     onScroll?: React.UIEventHandler<HTMLElement>;
+     /** Trigger when render list item changed */
+-    onVisibleChange?: (visibleList: T[], fullList: T[]) => void;
++    onVisibleChange?: (visibleList: T[], fullList: T[], virtualInfo: {
++      start: number
++      end: number
++      scrollTop: number
++      heights: number[]
++    }) => void;
+ }
+ export declare function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>): JSX.Element;
+ declare const _default: <Item = any>(props: ListProps<Item> & {
+diff --git a/node_modules/rc-virtual-list/es/List.js b/node_modules/rc-virtual-list/es/List.js
+index ff61435..768eafe 100644
+--- a/node_modules/rc-virtual-list/es/List.js
++++ b/node_modules/rc-virtual-list/es/List.js
+@@ -309,7 +309,12 @@ export function RawList(props, ref) {
+   useLayoutEffect(function () {
+     if (onVisibleChange) {
+       var renderList = mergedData.slice(start, end + 1);
+-      onVisibleChange(renderList, mergedData);
++      onVisibleChange(renderList, mergedData, {
++        start,
++        end,
++        scrollTop,
++        heights,
++      });
+     }
+   }, [start, end, mergedData]); // ================================ Render ================================
+
 diff --git a/node_modules/rc-virtual-list/es/hooks/useHeights.js b/node_modules/rc-virtual-list/es/hooks/useHeights.js
-index 2557625..e81f056 100644
+index 2557625..71d2cef 100644
 --- a/node_modules/rc-virtual-list/es/hooks/useHeights.js
 +++ b/node_modules/rc-virtual-list/es/hooks/useHeights.js
 @@ -15,6 +15,18 @@ import { useRef, useEffect } from 'react';
@@ -35,8 +71,44 @@ index 2557625..e81f056 100644
            }
          }
        }); // Always trigger update mark to tell parent that should re-calculate heights when resized
+diff --git a/node_modules/rc-virtual-list/lib/List.d.ts b/node_modules/rc-virtual-list/lib/List.d.ts
+index 116f737..6480fef 100644
+--- a/node_modules/rc-virtual-list/lib/List.d.ts
++++ b/node_modules/rc-virtual-list/lib/List.d.ts
+@@ -28,7 +28,12 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
+     virtual?: boolean;
+     onScroll?: React.UIEventHandler<HTMLElement>;
+     /** Trigger when render list item changed */
+-    onVisibleChange?: (visibleList: T[], fullList: T[]) => void;
++    onVisibleChange?: (visibleList: T[], fullList: T[], virtualInfo: {
++      start: number
++      end: number
++      scrollTop: number
++      heights: number[]
++    }) => void;
+ }
+ export declare function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>): JSX.Element;
+ declare const _default: <Item = any>(props: ListProps<Item> & {
+diff --git a/node_modules/rc-virtual-list/lib/List.js b/node_modules/rc-virtual-list/lib/List.js
+index 5d191af..26dbc70 100644
+--- a/node_modules/rc-virtual-list/lib/List.js
++++ b/node_modules/rc-virtual-list/lib/List.js
+@@ -337,7 +337,12 @@ function RawList(props, ref) {
+   (0, _useLayoutEffect.default)(function () {
+     if (onVisibleChange) {
+       var renderList = mergedData.slice(start, end + 1);
+-      onVisibleChange(renderList, mergedData);
++      onVisibleChange(renderList, mergedData, {
++        start,
++        end,
++        scrollTop,
++        heights,
++      });
+     }
+   }, [start, end, mergedData]); // ================================ Render ================================
+
 diff --git a/node_modules/rc-virtual-list/lib/hooks/useHeights.js b/node_modules/rc-virtual-list/lib/hooks/useHeights.js
-index 13d5d07..8f9e56c 100644
+index 13d5d07..592ee02 100644
 --- a/node_modules/rc-virtual-list/lib/hooks/useHeights.js
 +++ b/node_modules/rc-virtual-list/lib/hooks/useHeights.js
 @@ -33,6 +33,17 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy