diff --git a/.changeset/grumpy-swans-sing.md b/.changeset/grumpy-swans-sing.md new file mode 100644 index 000000000..1ac21243c --- /dev/null +++ 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 new file mode 100644 index 000000000..7616b750d --- /dev/null +++ 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 index 3c9bb1cc7..962d493c8 100644 --- a/packages/ui/table/src/TableBody.tsx +++ b/packages/ui/table/src/TableBody.tsx @@ -58,7 +58,8 @@ export const TableBody = forwardRef( 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,7 +87,10 @@ export const TableBody = forwardRef( style={{ height: 2, marginTop: -1, background: 'transparent', width: rowWidth }} > {isArrayNonEmpty(transitionData) ? ( -
+
( fullHeight={false} itemHeight={10} itemKey="id" + onVisibleChange={(...args) => { + isObject(virtual) && + typeof virtual?.onVisibleChange === 'function' && + virtual?.onVisibleChange(...args) + }} children={(row, index) => { return (
| 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 index 24cbd7f6a..b299f5904 100644 --- 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 index ea16f9703..e20a662a0 100644 --- 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' }} />
diff --git a/patches/rc-virtual-list+3.4.8.patch b/patches/rc-virtual-list+3.4.8.patch index c7f54b4d6..0bfa42f94 100644 --- 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 extends Omit, 'children' + virtual?: boolean; + onScroll?: React.UIEventHandler; + /** 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(props: ListProps, ref: React.Ref): JSX.Element; + declare const _default: (props: ListProps & { +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 extends Omit, 'children' + virtual?: boolean; + onScroll?: React.UIEventHandler; + /** 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(props: ListProps, ref: React.Ref): JSX.Element; + declare const _default: (props: ListProps & { +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