From 2058c4b30d14cbd165161d0c62dc506506c763e2 Mon Sep 17 00:00:00 2001
From: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Date: Wed, 8 Jan 2025 16:15:53 +0800
Subject: [PATCH] feat:renderItem params add "index" (#52)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat:renderItem 入参增加 index

* chore:更新jest配置

* chore:cheerio 1.0.0版本跑jest有export语法问题，锁定版本为1.0.0-rc.12

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>
---
 package.json         |  3 +++
 src/Item.tsx         |  4 ++--
 src/Overflow.tsx     |  2 +-
 tests/index.spec.tsx | 16 ++++++++++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index bbd61bf..d24fdf6 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,9 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
+  "overrides": {
+    "cheerio":"1.0.0-rc.12"
+  },
   "cnpm": {
     "mode": "npm"
   },
diff --git a/src/Item.tsx b/src/Item.tsx
index e1870b0..fe3ca1f 100644
--- a/src/Item.tsx
+++ b/src/Item.tsx
@@ -11,7 +11,7 @@ export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
   item?: ItemType;
   className?: string;
   style?: React.CSSProperties;
-  renderItem?: (item: ItemType) => React.ReactNode;
+  renderItem?: (item: ItemType, info: { index: number }) => React.ReactNode;
   responsive?: boolean;
   // https://github.com/ant-design/ant-design/issues/35475
   /**
@@ -66,7 +66,7 @@ function InternalItem<ItemType>(
 
   // ================================ Render ================================
   const childNode =
-    renderItem && item !== UNDEFINED ? renderItem(item) : children;
+    renderItem && item !== UNDEFINED ? renderItem(item, { index: order }) : children;
 
   let overflowStyle: React.CSSProperties | undefined;
   if (!invalidate) {
diff --git a/src/Overflow.tsx b/src/Overflow.tsx
index acc850c..e173111 100644
--- a/src/Overflow.tsx
+++ b/src/Overflow.tsx
@@ -24,7 +24,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: ItemType, info: { index: number }) => 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;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index bbfc2a0..a4f42d4 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -51,6 +51,22 @@ describe('Overflow.Basic', () => {
     expect(wrapper.find('Item').text()).toEqual('Bamboo Is Light');
   });
 
+  it('renderItem params have "order"', () => {
+    const testData = getData(3);
+    const wrapper = mount(
+      <Overflow
+        data={testData}
+        renderItem={(item, info) => {
+          return `${item.label}-${info.index}-test`;
+        }}
+      />,
+    );
+    const renderedItems = wrapper.find('.rc-overflow-item');
+    expect(renderedItems).toHaveLength(testData.length);
+    renderedItems.forEach((node, index) => {
+      expect(node.text()).toBe(`${testData[index].label}-${index}-test`);
+    });
+  });
   describe('renderRest', () => {
     it('function', () => {
       const wrapper = mount(