feat: expose item index in rowKey callback

README.md

@@ -53,7 +53,7 @@ export default () => (
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
 | `items` | List data source. | `T[]` | `[]` |
-| `rowKey` | Resolve item identity. | `keyof T \| (item: T) => React.Key` | required |
+| `rowKey` | Resolve item identity. | `keyof T \| (item: T, index: number) => React.Key` | required |
 | `itemRender` | Render each item. | `(item: T, index: number) => React.ReactNode` | required |
 | `height` | Viewport height. | `number` | - |
 | `itemHeight` | Estimated item height. | `number` | - |

README.zh-CN.md

@@ -53,7 +53,7 @@ export default () => (
 | 名称 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `items` | 列表数据源。 | `T[]` | `[]` |
-| `rowKey` | 解析列表项唯一标识。 | `keyof T \| (item: T) => React.Key` | 必填 |
+| `rowKey` | 解析列表项唯一标识。 | `keyof T \| (item: T, index: number) => React.Key` | 必填 |
 | `itemRender` | 渲染每一项。 | `(item: T, index: number) => React.ReactNode` | 必填 |
 | `height` | 可视区域高度。 | `number` | - |
 | `itemHeight` | 预估项高度。 | `number` | - |

src/List.tsx

@@ -5,7 +5,7 @@ import VirtualList from './VirtualList';
 import type { Group } from './hooks/useGroupSegments';
 
 // ============================== Types ===============================
-export type RowKey<T> = keyof T | ((item: T) => React.Key);
+export type RowKey<T> = keyof T | ((item: T, index: number) => React.Key);
 
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
 

src/RawList/index.tsx

@@ -51,7 +51,7 @@ function RawList<T, K extends React.Key = React.Key>(
   // ============================ Render Item ===========================
   const renderItem = React.useCallback(
     (item: T, index: number) => {
-      const key = getItemKey(item);
+      const key = getItemKey(item, index);
       const scrollTargetProps = getScrollTargetProps(key, 'item');
 
       return (

src/VirtualList/useFlattenRows.ts

@@ -23,7 +23,7 @@ export interface FlattenRowsResult<T, K extends React.Key = React.Key> {
 export default function useFlattenRows<T, K extends React.Key = React.Key>(
   data: T[],
   groupData: Map<K, GroupSegmentItem<T>[]>,
-  getItemKey: (item: T) => React.Key,
+  getItemKey: (item: T, index: number) => React.Key,
   group?: Group<T, K>,
 ): FlattenRowsResult<T, K> {
   return React.useMemo(() => {
@@ -36,7 +36,7 @@ export default function useFlattenRows<T, K extends React.Key = React.Key>(
       type: 'item',
       item,
       index,
-      taggedKey: toTaggedKey(getItemKey(item), 'item'),
+      taggedKey: toTaggedKey(getItemKey(item, index), 'item'),
     });
 
     // ============================ No Group ==============================

src/hooks/useItemKey.ts

@@ -3,7 +3,9 @@ import { useEvent } from '@rc-component/util';
 import type { RowKey } from '../List';
 
 export default function useItemKey<T>(rowKey: RowKey<T>) {
-  return useEvent((item: T): React.Key =>
-    typeof rowKey === 'function' ? rowKey(item) : (item[rowKey] as React.Key),
+  return useEvent((item: T, index: number): React.Key =>
+    typeof rowKey === 'function'
+      ? rowKey(item, index)
+      : (item[rowKey] as React.Key),
   );
 }

tests/listy.test.tsx

@@ -38,8 +38,8 @@ describe('Listy', () => {
 
     expect(screen.getByText('foo')).toBeInTheDocument();
     expect(screen.getByText('bar')).toBeInTheDocument();
-    expect(rowKey).toHaveBeenCalledWith(items[0]);
-    expect(rowKey).toHaveBeenCalledWith(items[1]);
+    expect(rowKey).toHaveBeenCalledWith(items[0], 0);
+    expect(rowKey).toHaveBeenCalledWith(items[1], 1);
   });
 
   it('renders group headers with title callback', () => {