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 extends React.HTMLAttributes { prefixCls: string; - item?: ItemType; + item?: ItemWithIndex; className?: string; style?: React.CSSProperties; - renderItem?: (item: ItemType) => React.ReactNode; + renderItem?: (item: ItemWithIndex) => 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 & { index?: number }; + export interface OverflowProps extends React.HTMLAttributes { prefixCls?: string; className?: string; @@ -24,7 +26,7 @@ export interface OverflowProps extends React.HTMLAttributes { 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) => 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( } : (item: ItemType, index: number) => { const key = getKey(item, index); - + const propsItem: ItemWithIndex = { ...item, index }; return ( { const wrapper = mount( { - return `${item.label}-${order}-test`; + renderItem={(item) => { + return `${item.label}-${item.index}-test`; }} />, );