feat：修改renderItem 的index参数位置

Author: 刘欢

src/Item.tsx

@@ -1,18 +1,17 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-import type { ItemWithIndex } from './Overflow';
+import * as React from 'react';
 import type { ComponentType } from './RawItem';
 
 // Use shared variable to save bundle size
 const UNDEFINED = undefined;
 
 export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
   prefixCls: string;
-  item?: ItemWithIndex<ItemType>;
+  item?: ItemType;
   className?: string;
   style?: React.CSSProperties;
-  renderItem?: (item: ItemWithIndex<ItemType>) => React.ReactNode;
+  renderItem?: (item: ItemType, info: { index: number }) => React.ReactNode;
   responsive?: boolean;
   // https://github.com/ant-design/ant-design/issues/35475
   /**
@@ -67,7 +66,9 @@ 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) {

src/Overflow.tsx

@@ -16,8 +16,6 @@ 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;
@@ -26,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: ItemWithIndex<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;
@@ -343,13 +341,12 @@ 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={propsItem}
+            item={item}
             renderItem={mergedRenderItem}
             itemKey={key}
             registerSize={registerSize}
@@ -368,26 +365,26 @@ function Overflow<ItemType = any>(
 
   const mergedRenderRest = renderRest || defaultRenderRest;
 
-    const restNode = renderRawRest ? (
-      <OverflowContext.Provider
-        value={{
-          ...itemSharedProps,
-          ...restContextProps,
-        }}
-      >
-        {renderRawRest(omittedItems)}
-      </OverflowContext.Provider>
-    ) : (
-      <Item
-        {...itemSharedProps}
-        // When not show, order should be the last
-        {...restContextProps}
-      >
-        {typeof mergedRenderRest === 'function'
-          ? mergedRenderRest(omittedItems)
-          : mergedRenderRest}
-      </Item>
-    );
+  const restNode = renderRawRest ? (
+    <OverflowContext.Provider
+      value={{
+        ...itemSharedProps,
+        ...restContextProps,
+      }}
+    >
+      {renderRawRest(omittedItems)}
+    </OverflowContext.Provider>
+  ) : (
+    <Item
+      {...itemSharedProps}
+      // When not show, order should be the last
+      {...restContextProps}
+    >
+      {typeof mergedRenderRest === 'function'
+        ? mergedRenderRest(omittedItems)
+        : mergedRenderRest}
+    </Item>
+  );
 
   const overflowNode = (
     <Component
@@ -423,7 +420,9 @@ function Overflow<ItemType = any>(
     <ResizeObserver onResize={onOverflowResize} disabled={!shouldResponsive}>
       {overflowNode}
     </ResizeObserver>
-  ) : overflowNode;
+  ) : (
+    overflowNode
+  );
 }
 
 const ForwardOverflow = React.forwardRef(Overflow);