- {needHeader &&
{group.title(currentKey, groupItems)}
}
-
{itemRender(item, index)}
+
+ {group.title(groupKey, groupItems)}
);
},
- [group, itemRender, data, groupSegments, itemHeight],
+ [group, groupKeyToItems],
);
+ // onEndReached via native onScroll with px offset
+ const handleOnScroll = useOnEndReached({
+ enabled: !!onEndReached,
+ offsetPx: onEndReachedOffset ?? 0,
+ onEndReached,
+ containerRef,
+ });
+
return (
- {(item, index, props) => renderItem(item, index, props)}
+ {(row: Row) =>
+ row.type === 'header'
+ ? renderHeaderRow(row.groupKey)
+ : itemRender(row.item, row.index)}
);
@@ -259,6 +120,6 @@ function Listy
(props: ListyProps, ref: React.Ref) {
const ListyWithForwardRef = forwardRef(Listy) as (
props: ListyProps & { ref?: React.Ref },
-) => ReturnType;
+) => React.ReactElement;
export default ListyWithForwardRef;
diff --git a/src/hooks/useFlattenRows.ts b/src/hooks/useFlattenRows.ts
new file mode 100644
index 0000000..538e5d1
--- /dev/null
+++ b/src/hooks/useFlattenRows.ts
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { Group } from '../interface';
+import type { GroupSegment } from './useGroupSegments';
+
+export type Row =
+ | { type: 'header'; groupKey: React.Key }
+ | { type: 'item'; item: T; index: number };
+
+export interface FlattenRowsResult {
+ rows: Array>;
+ headerRows: Array<{ groupKey: React.Key; rowIndex: number }>;
+ groupKeyToSeg: Map;
+}
+
+export function useFlattenRows(
+ items: T[],
+ group: Group | undefined,
+ segments: GroupSegment[],
+): FlattenRowsResult {
+ return React.useMemo(() => {
+ const flatRows: Row[] = [];
+ const headerRows: Array<{ groupKey: React.Key; rowIndex: number }> = [];
+ const groupKeyToSeg = new Map();
+
+ if (!group || !segments.length) {
+ for (let i = 0; i < items.length; i += 1) {
+ flatRows.push({ type: 'item', item: items[i], index: i });
+ }
+ return { rows: flatRows, headerRows, groupKeyToSeg };
+ }
+
+ for (let s = 0; s < segments.length; s += 1) {
+ const seg = segments[s];
+ groupKeyToSeg.set(seg.key, { startIndex: seg.startIndex, endIndex: seg.endIndex });
+
+ headerRows.push({ groupKey: seg.key, rowIndex: flatRows.length });
+ flatRows.push({ type: 'header', groupKey: seg.key });
+
+ for (let i = seg.startIndex; i <= seg.endIndex; i += 1) {
+ flatRows.push({ type: 'item', item: items[i], index: i });
+ }
+ }
+
+ return { rows: flatRows, headerRows, groupKeyToSeg };
+ }, [items, group, segments]);
+}
+
+export default useFlattenRows;
+
+
diff --git a/src/hooks/useGroupSegments.ts b/src/hooks/useGroupSegments.ts
new file mode 100644
index 0000000..7ae3d49
--- /dev/null
+++ b/src/hooks/useGroupSegments.ts
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { Group } from '../interface';
+
+export interface GroupSegment {
+ key: React.Key;
+ startIndex: number;
+ endIndex: number;
+}
+
+export function useGroupSegments(items: T[], group?: Group): GroupSegment[] {
+ return React.useMemo(() => {
+ if (!group || !items?.length) return [] as GroupSegment[];
+
+ const segments: GroupSegment[] = [];
+ let currentKey: React.Key | null = null;
+ let currentStart = -1;
+
+ const getGroupKey = (item: T): React.Key =>
+ typeof group.key === 'function' ? group.key(item) : group.key;
+
+ for (let i = 0; i < items.length; i += 1) {
+ const gk = getGroupKey(items[i]);
+ if (currentKey === null) {
+ currentKey = gk;
+ currentStart = i;
+ } else if (gk !== currentKey) {
+ segments.push({ key: currentKey, startIndex: currentStart, endIndex: i - 1 });
+ currentKey = gk;
+ currentStart = i;
+ }
+ }
+
+ if (currentKey !== null) {
+ segments.push({ key: currentKey, startIndex: currentStart, endIndex: items.length - 1 });
+ }
+
+ return segments;
+ }, [items, group]);
+}
+
+export default useGroupSegments;
+
+
diff --git a/src/hooks/useOnEndReached.ts b/src/hooks/useOnEndReached.ts
new file mode 100644
index 0000000..22d7362
--- /dev/null
+++ b/src/hooks/useOnEndReached.ts
@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+export interface UseOnEndReachedParams {
+ enabled: boolean;
+ offsetPx?: number;
+ onEndReached?: () => void;
+ containerRef?: React.RefObject;
+}
+
+export function useOnEndReached(params: UseOnEndReachedParams) {
+ const { enabled, offsetPx = 0, onEndReached, containerRef } = params;
+
+ const hasReachedRef = React.useRef(false);
+
+ const onScroll = React.useCallback>(
+ (e) => {
+ const target = (e?.currentTarget as HTMLElement) || containerRef?.current;
+ if (!target) return;
+
+ const { scrollTop, clientHeight, scrollHeight } = target;
+ const distanceToBottom = scrollHeight - (scrollTop + clientHeight);
+
+ if (!enabled || !onEndReached) {
+ hasReachedRef.current = false;
+ return;
+ }
+
+ if (distanceToBottom <= offsetPx) {
+ if (!hasReachedRef.current) {
+ hasReachedRef.current = true;
+ onEndReached();
+ }
+ } else {
+ hasReachedRef.current = false;
+ }
+ },
+ [enabled, offsetPx, onEndReached, containerRef],
+ );
+
+ return onScroll;
+}
+
+export default useOnEndReached;
+
+
diff --git a/src/hooks/useStickyGroupHeader.tsx b/src/hooks/useStickyGroupHeader.tsx
new file mode 100644
index 0000000..488322a
--- /dev/null
+++ b/src/hooks/useStickyGroupHeader.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import Portal from '@rc-component/portal';
+import type { ExtraRenderInfo } from 'rc-virtual-list/lib/interface';
+import type { Group } from '../interface';
+
+export interface StickyHeaderParams {
+ enabled: boolean;
+ group: Group | undefined;
+ headerRows: Array<{ groupKey: React.Key; rowIndex: number }>;
+ groupKeyToSeg: Map;
+ items: T[];
+ containerRef: React.RefObject;
+}
+
+export function useStickyGroupHeader(params: StickyHeaderParams) {
+ const { enabled, group, headerRows, groupKeyToSeg, items, containerRef } = params;
+
+ const extraRender = React.useCallback(
+ (info: ExtraRenderInfo) => {
+ const { start, virtual } = info;
+
+ if (!virtual || !enabled || !group || !headerRows.length) {
+ return null;
+ }
+
+ let currHeaderIdx = 0;
+ for (let i = 0; i < headerRows.length; i += 1) {
+ if (headerRows[i].rowIndex <= start) currHeaderIdx = i;
+ else break;
+ }
+
+ const currHeader = headerRows[currHeaderIdx];
+ const seg = groupKeyToSeg.get(currHeader.groupKey);
+ const groupItems = seg ? items.slice(seg.startIndex, seg.endIndex + 1) : [];
+
+ const headerNode = (
+
+ {group.title(currHeader.groupKey, groupItems)}
+
+ );
+
+ return (
+ containerRef.current}>
+ {headerNode}
+
+ );
+ },
+ [enabled, group, headerRows, groupKeyToSeg, items, containerRef],
+ );
+
+ return extraRender;
+}
+
+export default useStickyGroupHeader;
+
+
diff --git a/src/interface.ts b/src/interface.ts
index e4b2857..f1a106b 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -26,7 +26,7 @@ export interface ListyProps {
rowKey?: ((item: T) => React.Key) | Extract;
group?: Group;
virtual?: boolean;
- onStartReached?: () => void;
onEndReached?: () => void;
+ onEndReachedOffset?: number;
itemRender: (item: T, index: number) => React.ReactNode;
}
\ No newline at end of file
diff --git a/tests/listy.test.tsx b/tests/listy.test.tsx
new file mode 100644
index 0000000..aaaf418
--- /dev/null
+++ b/tests/listy.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Listy from "@rc-component/listy";
+import { render, screen } from "@testing-library/react";
+
+describe("Listy", () => {
+ it("should render", () => {
+ render( {item.id}
} />);
+ expect(screen.getByText("1")).toBeInTheDocument();
+ });
+});
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 2939056..c487900 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
"@/*": ["src/*"],
"@@/*": [".dumi/tmp/*"],
"@rc-component/listy": ["src/index.ts"]
- }
+ },
+ "types": ["@testing-library/jest-dom"]
}
}
From a9896721eed776c5ef9c516a4eeddecec8894992 Mon Sep 17 00:00:00 2001
From: aojunhao123 <1844749591@qq.com>
Date: Sat, 8 Nov 2025 00:52:56 +0800
Subject: [PATCH 05/24] update
---
assets/index.less | 19 +++++++
docs/demos/on-end-reached.md | 8 +++
docs/examples/basic.tsx | 1 +
docs/examples/group.tsx | 1 +
docs/examples/on-end-reached.tsx | 83 ++++++++++++++++++++++++++++++
index.js | 4 +-
package.json | 5 +-
src/List.tsx | 26 ++++++----
src/hooks/useOnEndReached.ts | 12 ++---
src/hooks/useStickyGroupHeader.tsx | 16 ++----
src/interface.ts | 2 +-
src/util.ts | 0
12 files changed, 139 insertions(+), 38 deletions(-)
create mode 100644 docs/demos/on-end-reached.md
create mode 100644 docs/examples/on-end-reached.tsx
delete mode 100644 src/util.ts
diff --git a/assets/index.less b/assets/index.less
index e69de29..4a4b63b 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -0,0 +1,19 @@
+@listy-prefix-cls: ~'rc-listy';
+
+.@{listy-prefix-cls} {
+ position: relative;
+
+ &-group-header {
+ background-color: #fff;
+ }
+
+ &-sticky-header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ transform: translateY(0);
+ background-color: #fff;
+ z-index: 1;
+ }
+}
diff --git a/docs/demos/on-end-reached.md b/docs/demos/on-end-reached.md
new file mode 100644
index 0000000..c92dbe7
--- /dev/null
+++ b/docs/demos/on-end-reached.md
@@ -0,0 +1,8 @@
+---
+title: On End Reached
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+
(
+ {item.name}
+ )}
+ onEndReached={loadMore}
+ />
+
+
+
+
+ Count: {items.length} / {TOTAL}
+
+ {loading && Loading…}
+ {!hasMore && · No more}
+
+
+
{group.title(groupKey, groupItems)}
);
},
- [group, groupKeyToItems],
+ [group, groupKeyToItems, prefixCls],
);
- // onEndReached via native onScroll with px offset
const handleOnScroll = useOnEndReached({
enabled: !!onEndReached,
- offsetPx: onEndReachedOffset ?? 0,
onEndReached,
containerRef,
});
return (
-
+
(props: ListyProps, ref: React.Ref) {
itemKey={getRowKey}
height={height}
extraRender={extraRender}
- onScroll={handleOnScroll as any}
+ onScroll={handleOnScroll}
>
{(row: Row) =>
row.type === 'header'
? renderHeaderRow(row.groupKey)
- : itemRender(row.item, row.index)}
+ : itemRender(row.item, row.index)
+ }
);
diff --git a/src/hooks/useOnEndReached.ts b/src/hooks/useOnEndReached.ts
index 22d7362..0e1d0dc 100644
--- a/src/hooks/useOnEndReached.ts
+++ b/src/hooks/useOnEndReached.ts
@@ -2,20 +2,18 @@ import * as React from 'react';
export interface UseOnEndReachedParams {
enabled: boolean;
- offsetPx?: number;
onEndReached?: () => void;
containerRef?: React.RefObject
;
}
export function useOnEndReached(params: UseOnEndReachedParams) {
- const { enabled, offsetPx = 0, onEndReached, containerRef } = params;
+ const { enabled, onEndReached, containerRef } = params;
const hasReachedRef = React.useRef(false);
const onScroll = React.useCallback>(
(e) => {
- const target = (e?.currentTarget as HTMLElement) || containerRef?.current;
- if (!target) return;
+ const target = e.currentTarget;
const { scrollTop, clientHeight, scrollHeight } = target;
const distanceToBottom = scrollHeight - (scrollTop + clientHeight);
@@ -25,7 +23,7 @@ export function useOnEndReached(params: UseOnEndReachedParams) {
return;
}
- if (distanceToBottom <= offsetPx) {
+ if (distanceToBottom <= 0) {
if (!hasReachedRef.current) {
hasReachedRef.current = true;
onEndReached();
@@ -34,12 +32,10 @@ export function useOnEndReached(params: UseOnEndReachedParams) {
hasReachedRef.current = false;
}
},
- [enabled, offsetPx, onEndReached, containerRef],
+ [enabled, onEndReached],
);
return onScroll;
}
export default useOnEndReached;
-
-
diff --git a/src/hooks/useStickyGroupHeader.tsx b/src/hooks/useStickyGroupHeader.tsx
index 488322a..74828b3 100644
--- a/src/hooks/useStickyGroupHeader.tsx
+++ b/src/hooks/useStickyGroupHeader.tsx
@@ -10,10 +10,11 @@ export interface StickyHeaderParams {
groupKeyToSeg: Map;
items: T[];
containerRef: React.RefObject;
+ prefixCls: string;
}
export function useStickyGroupHeader(params: StickyHeaderParams) {
- const { enabled, group, headerRows, groupKeyToSeg, items, containerRef } = params;
+ const { enabled, group, headerRows, groupKeyToSeg, items, containerRef, prefixCls } = params;
const extraRender = React.useCallback(
(info: ExtraRenderInfo) => {
@@ -34,16 +35,7 @@ export function useStickyGroupHeader(params: StickyHeaderParams) {
const groupItems = seg ? items.slice(seg.startIndex, seg.endIndex + 1) : [];
const headerNode = (
-
+
{group.title(currHeader.groupKey, groupItems)}
);
@@ -54,7 +46,7 @@ export function useStickyGroupHeader
(params: StickyHeaderParams) {
);
},
- [enabled, group, headerRows, groupKeyToSeg, items, containerRef],
+ [enabled, group, headerRows, groupKeyToSeg, items, containerRef, prefixCls],
);
return extraRender;
diff --git a/src/interface.ts b/src/interface.ts
index f1a106b..6825ba4 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -27,6 +27,6 @@ export interface ListyProps {
group?: Group;
virtual?: boolean;
onEndReached?: () => void;
- onEndReachedOffset?: number;
itemRender: (item: T, index: number) => React.ReactNode;
+ prefixCls?: string;
}
\ No newline at end of file
diff --git a/src/util.ts b/src/util.ts
deleted file mode 100644
index e69de29..0000000
From b711d86a8ba512fe1bec031769a74b6fae4f8563 Mon Sep 17 00:00:00 2001
From: aojunhao123 <1844749591@qq.com>
Date: Sun, 9 Nov 2025 22:26:31 +0800
Subject: [PATCH 06/24] code format
---
src/hooks/useFlattenRows.ts | 12 ++++++++----
src/hooks/useGroupSegments.ts | 23 +++++++++++++++++------
src/hooks/useOnEndReached.ts | 2 +-
src/hooks/useStickyGroupHeader.tsx | 23 +++++++++++++++++------
src/index.ts | 2 +-
src/interface.ts | 11 ++++-------
6 files changed, 48 insertions(+), 25 deletions(-)
diff --git a/src/hooks/useFlattenRows.ts b/src/hooks/useFlattenRows.ts
index 538e5d1..569a6d3 100644
--- a/src/hooks/useFlattenRows.ts
+++ b/src/hooks/useFlattenRows.ts
@@ -20,7 +20,10 @@ export function useFlattenRows(
return React.useMemo(() => {
const flatRows: Row[] = [];
const headerRows: Array<{ groupKey: React.Key; rowIndex: number }> = [];
- const groupKeyToSeg = new Map();
+ const groupKeyToSeg = new Map<
+ React.Key,
+ { startIndex: number; endIndex: number }
+ >();
if (!group || !segments.length) {
for (let i = 0; i < items.length; i += 1) {
@@ -31,7 +34,10 @@ export function useFlattenRows(
for (let s = 0; s < segments.length; s += 1) {
const seg = segments[s];
- groupKeyToSeg.set(seg.key, { startIndex: seg.startIndex, endIndex: seg.endIndex });
+ groupKeyToSeg.set(seg.key, {
+ startIndex: seg.startIndex,
+ endIndex: seg.endIndex,
+ });
headerRows.push({ groupKey: seg.key, rowIndex: flatRows.length });
flatRows.push({ type: 'header', groupKey: seg.key });
@@ -46,5 +52,3 @@ export function useFlattenRows(
}
export default useFlattenRows;
-
-
diff --git a/src/hooks/useGroupSegments.ts b/src/hooks/useGroupSegments.ts
index 7ae3d49..fe2cc27 100644
--- a/src/hooks/useGroupSegments.ts
+++ b/src/hooks/useGroupSegments.ts
@@ -7,9 +7,14 @@ export interface GroupSegment {
endIndex: number;
}
-export function useGroupSegments(items: T[], group?: Group): GroupSegment[] {
+export function useGroupSegments(
+ items: T[],
+ group?: Group,
+): GroupSegment[] {
return React.useMemo(() => {
- if (!group || !items?.length) return [] as GroupSegment[];
+ if (!group || !items?.length) {
+ return [];
+ }
const segments: GroupSegment[] = [];
let currentKey: React.Key | null = null;
@@ -24,14 +29,22 @@ export function useGroupSegments(items: T[], group?: Group): GroupSegment[
currentKey = gk;
currentStart = i;
} else if (gk !== currentKey) {
- segments.push({ key: currentKey, startIndex: currentStart, endIndex: i - 1 });
+ segments.push({
+ key: currentKey,
+ startIndex: currentStart,
+ endIndex: i - 1,
+ });
currentKey = gk;
currentStart = i;
}
}
if (currentKey !== null) {
- segments.push({ key: currentKey, startIndex: currentStart, endIndex: items.length - 1 });
+ segments.push({
+ key: currentKey,
+ startIndex: currentStart,
+ endIndex: items.length - 1,
+ });
}
return segments;
@@ -39,5 +52,3 @@ export function useGroupSegments(items: T[], group?: Group): GroupSegment[
}
export default useGroupSegments;
-
-
diff --git a/src/hooks/useOnEndReached.ts b/src/hooks/useOnEndReached.ts
index 0e1d0dc..9b85cff 100644
--- a/src/hooks/useOnEndReached.ts
+++ b/src/hooks/useOnEndReached.ts
@@ -7,7 +7,7 @@ export interface UseOnEndReachedParams {
}
export function useOnEndReached(params: UseOnEndReachedParams) {
- const { enabled, onEndReached, containerRef } = params;
+ const { enabled, onEndReached } = params;
const hasReachedRef = React.useRef(false);
diff --git a/src/hooks/useStickyGroupHeader.tsx b/src/hooks/useStickyGroupHeader.tsx
index 74828b3..7c4e39f 100644
--- a/src/hooks/useStickyGroupHeader.tsx
+++ b/src/hooks/useStickyGroupHeader.tsx
@@ -14,7 +14,15 @@ export interface StickyHeaderParams {
}
export function useStickyGroupHeader(params: StickyHeaderParams) {
- const { enabled, group, headerRows, groupKeyToSeg, items, containerRef, prefixCls } = params;
+ const {
+ enabled,
+ group,
+ headerRows,
+ groupKeyToSeg,
+ items,
+ containerRef,
+ prefixCls,
+ } = params;
const extraRender = React.useCallback(
(info: ExtraRenderInfo) => {
@@ -26,13 +34,18 @@ export function useStickyGroupHeader(params: StickyHeaderParams) {
let currHeaderIdx = 0;
for (let i = 0; i < headerRows.length; i += 1) {
- if (headerRows[i].rowIndex <= start) currHeaderIdx = i;
- else break;
+ if (headerRows[i].rowIndex <= start) {
+ currHeaderIdx = i;
+ } else {
+ break;
+ }
}
const currHeader = headerRows[currHeaderIdx];
const seg = groupKeyToSeg.get(currHeader.groupKey);
- const groupItems = seg ? items.slice(seg.startIndex, seg.endIndex + 1) : [];
+ const groupItems = seg
+ ? items.slice(seg.startIndex, seg.endIndex + 1)
+ : [];
const headerNode = (
@@ -53,5 +66,3 @@ export function useStickyGroupHeader
(params: StickyHeaderParams) {
}
export default useStickyGroupHeader;
-
-
diff --git a/src/index.ts b/src/index.ts
index 76acf49..d6d300d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,4 +2,4 @@ import Listy from './List';
export type { ListyRef, ListyProps } from './interface';
-export default Listy;
\ No newline at end of file
+export default Listy;
diff --git a/src/interface.ts b/src/interface.ts
index 6825ba4..9dddf59 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1,5 +1,5 @@
-import * as React from "react";
-import { ScrollTo } from "rc-virtual-list/lib/List";
+import * as React from 'react';
+import { ScrollTo } from 'rc-virtual-list/lib/List';
export interface ListyRef {
scrollTo: ScrollTo;
@@ -7,10 +7,7 @@ export interface ListyRef {
export interface Group {
key: React.Key | ((item: T) => React.Key);
- title: (
- groupKey: React.Key,
- items: T[]
- ) => React.ReactNode;
+ title: (groupKey: React.Key, items: T[]) => React.ReactNode;
}
export interface ListyItemProps {
@@ -29,4 +26,4 @@ export interface ListyProps {
onEndReached?: () => void;
itemRender: (item: T, index: number) => React.ReactNode;
prefixCls?: string;
-}
\ No newline at end of file
+}
From 16baea6cf3505f03e73c71189fb1f49e1a0514c3 Mon Sep 17 00:00:00 2001
From: aojunhao123 <1844749591@qq.com>
Date: Sun, 9 Nov 2025 23:02:37 +0800
Subject: [PATCH 07/24] update
---
package.json | 46 ++++++++++++++++++------------------
src/List.tsx | 15 ++++++++----
src/hooks/useOnEndReached.ts | 6 ++---
3 files changed, 37 insertions(+), 30 deletions(-)
diff --git a/package.json b/package.json
index 77d050d..1a30e0f 100644
--- a/package.json
+++ b/package.json
@@ -42,32 +42,32 @@
"@rc-component/motion": "^1.1.4",
"@rc-component/portal": "^2.0.0",
"@rc-component/resize-observer": "^1.0.0",
- "@rc-component/util": "^1.2.1",
- "classnames": "^2.3.2",
- "rc-virtual-list": "^3.0.0"
+ "@rc-component/util": "^1.3.1",
+ "classnames": "^2.5.1",
+ "rc-virtual-list": "^3.19.2"
},
"devDependencies": {
- "@rc-component/father-plugin": "^2.0.0",
- "@rc-component/np": "^1.0.3",
- "@testing-library/jest-dom": "^6.1.4",
- "@testing-library/react": "^16.0.0",
- "@types/classnames": "^2.2.10",
- "@types/jest": "^29.5.2",
- "@types/node": "^24.0.3",
- "@types/react": "^19.1.2",
- "@types/react-dom": "^19.1.2",
+ "@rc-component/father-plugin": "^2.1.3",
+ "@rc-component/np": "^1.0.4",
+ "@testing-library/jest-dom": "^6.9.1",
+ "@testing-library/react": "^16.3.0",
+ "@types/classnames": "^2.3.4",
+ "@types/jest": "^29.5.14",
+ "@types/node": "^24.10.0",
+ "@types/react": "^19.2.2",
+ "@types/react-dom": "^19.2.2",
"@umijs/fabric": "^4.0.1",
- "cross-env": "^7.0.1",
- "dumi": "^2.1.0",
- "eslint": "^8.51.0",
- "father": "^4.0.0",
- "less": "^4.2.0",
- "prettier": "^3.3.3",
- "rc-test": "^7.0.13",
- "react": "^19.1.0",
- "react-dom": "^19.1.0",
- "regenerator-runtime": "^0.14.0",
- "typescript": "^5.9.2"
+ "cross-env": "^7.0.3",
+ "dumi": "^2.4.21",
+ "eslint": "^8.57.1",
+ "father": "^4.6.7",
+ "less": "^4.4.2",
+ "prettier": "^3.6.2",
+ "rc-test": "^7.1.2",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0",
+ "regenerator-runtime": "^0.14.1",
+ "typescript": "^5.9.3"
},
"peerDependencies": {
"react": ">=18.0.0",
diff --git a/src/List.tsx b/src/List.tsx
index 68a30fe..baf307c 100644
--- a/src/List.tsx
+++ b/src/List.tsx
@@ -34,9 +34,14 @@ function Listy(props: ListyProps, ref: React.Ref) {
const getItemKey = React.useCallback(
(item: T): React.Key => {
- if (!rowKey) return undefined;
- if (typeof rowKey === 'function') return rowKey(item);
- return (item as any)[rowKey];
+ if (!rowKey) {
+ return undefined;
+ }
+ if (typeof rowKey === 'function') {
+ return rowKey(item);
+ }
+ // @ts-ignore
+ return item[rowKey];
},
[rowKey],
);
@@ -74,7 +79,9 @@ function Listy(props: ListyProps, ref: React.Ref) {
// Pre-compute each group's items to simplify header rendering
const groupKeyToItems = React.useMemo(() => {
const map = new Map();
- if (!group) return map;
+ if (!group) {
+ return map;
+ }
groupKeyToSeg.forEach(({ startIndex, endIndex }, key) => {
map.set(key, data.slice(startIndex, endIndex + 1));
});
diff --git a/src/hooks/useOnEndReached.ts b/src/hooks/useOnEndReached.ts
index 9b85cff..b84c19f 100644
--- a/src/hooks/useOnEndReached.ts
+++ b/src/hooks/useOnEndReached.ts
@@ -1,4 +1,5 @@
import * as React from 'react';
+import { useEvent } from '@rc-component/util';
export interface UseOnEndReachedParams {
enabled: boolean;
@@ -11,7 +12,7 @@ export function useOnEndReached(params: UseOnEndReachedParams) {
const hasReachedRef = React.useRef(false);
- const onScroll = React.useCallback>(
+ const onScroll = useEvent>(
(e) => {
const target = e.currentTarget;
@@ -31,8 +32,7 @@ export function useOnEndReached(params: UseOnEndReachedParams) {
} else {
hasReachedRef.current = false;
}
- },
- [enabled, onEndReached],
+ }
);
return onScroll;
From b55dd0daa51fd2b9b18a08fd8097f13f67ea175f Mon Sep 17 00:00:00 2001
From: aojunhao123 <1844749591@qq.com>
Date: Sun, 9 Nov 2025 23:46:02 +0800
Subject: [PATCH 08/24] update prevent onEndReached re-trigger logic
---
docs/examples/on-end-reached.tsx | 2 +-
src/List.tsx | 1 -
src/hooks/useOnEndReached.ts | 33 ++++++++++++++------------------
3 files changed, 15 insertions(+), 21 deletions(-)
diff --git a/docs/examples/on-end-reached.tsx b/docs/examples/on-end-reached.tsx
index 67040ae..2daa109 100644
--- a/docs/examples/on-end-reached.tsx
+++ b/docs/examples/on-end-reached.tsx
@@ -65,7 +65,7 @@ export default () => {