From a2e44700a101470dad54cbd024190b24e434213c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <lh01217311@antgroup.com>
Date: Tue, 7 Jan 2025 15:19:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9index=E8=B5=8B=E5=80=BC?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Item.tsx         | 5 +++--
 src/Overflow.tsx     | 8 +++++---
 tests/index.spec.tsx | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Item.tsx b/src/Item.tsx
index e1870b0..172e88c 100644
--- a/src/Item.tsx
+++ b/src/Item.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
+import type { ItemWithIndex } from './Overflow';
 import type { ComponentType } from './RawItem';
 
 // Use shared variable to save bundle size
@@ -8,10 +9,10 @@ const UNDEFINED = undefined;
 
 export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
   prefixCls: string;
-  item?: ItemType;
+  item?: ItemWithIndex<ItemType>;
   className?: string;
   style?: React.CSSProperties;
-  renderItem?: (item: ItemType) => React.ReactNode;
+  renderItem?: (item: ItemWithIndex<ItemType>) => React.ReactNode;
   responsive?: boolean;
   // https://github.com/ant-design/ant-design/issues/35475
   /**
diff --git a/src/Overflow.tsx b/src/Overflow.tsx
index cf933c2..42c509c 100644
--- a/src/Overflow.tsx
+++ b/src/Overflow.tsx
@@ -16,6 +16,8 @@ export { OverflowContext } from './context';
 
 export type { ComponentType } from './RawItem';
 
+export type ItemWithIndex<ItemType> = ItemType & { index?: number };
+
 export interface OverflowProps<ItemType> extends React.HTMLAttributes<any> {
   prefixCls?: string;
   className?: string;
@@ -24,7 +26,7 @@ export interface OverflowProps<ItemType> extends React.HTMLAttributes<any> {
   itemKey?: React.Key | ((item: ItemType) => React.Key);
   /** Used for `responsive`. It will limit render node to avoid perf issue */
   itemWidth?: number;
-  renderItem?: (item: ItemType) => React.ReactNode;
+  renderItem?: (item: ItemWithIndex<ItemType>) => React.ReactNode;
   /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
   renderRawItem?: (item: ItemType, index: number) => React.ReactElement;
   maxCount?: number | typeof RESPONSIVE | typeof INVALIDATE;
@@ -341,13 +343,13 @@ function Overflow<ItemType = any>(
       }
     : (item: ItemType, index: number) => {
         const key = getKey(item, index);
-
+        const propsItem: ItemWithIndex<ItemType> = { ...item, index };
         return (
           <Item
             {...itemSharedProps}
             order={index}
             key={key}
-            item={{ ...item, index }}
+            item={propsItem}
             renderItem={mergedRenderItem}
             itemKey={key}
             registerSize={registerSize}
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index b3dba59..c50e08a 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -56,8 +56,8 @@ describe('Overflow.Basic', () => {
     const wrapper = mount(
       <Overflow
         data={testData}
-        renderItem={(item, order) => {
-          return `${item.label}-${order}-test`;
+        renderItem={(item) => {
+          return `${item.label}-${item.index}-test`;
         }}
       />,
     );