From 4627de9e5b39fd3e081323420d7c7951f61a818e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 7 Jan 2025 11:27:26 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=E7=BB=99renderItem=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E4=B8=80=E4=B8=AAindex=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Item.tsx | 4 ++-- src/Overflow.tsx | 2 +- tests/index.spec.tsx | 17 +++++++++++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/Item.tsx b/src/Item.tsx index e1870b0..1a82aff 100644 --- a/src/Item.tsx +++ b/src/Item.tsx @@ -11,7 +11,7 @@ export interface ItemProps extends React.HTMLAttributes { item?: ItemType; className?: string; style?: React.CSSProperties; - renderItem?: (item: ItemType) => React.ReactNode; + renderItem?: (item: ItemType, order: number) => React.ReactNode; responsive?: boolean; // https://github.com/ant-design/ant-design/issues/35475 /** @@ -66,7 +66,7 @@ function InternalItem( // ================================ Render ================================ const childNode = - renderItem && item !== UNDEFINED ? renderItem(item) : children; + renderItem && item !== UNDEFINED ? renderItem(item, order) : children; let overflowStyle: React.CSSProperties | undefined; if (!invalidate) { diff --git a/src/Overflow.tsx b/src/Overflow.tsx index acc850c..3ce1a9e 100644 --- a/src/Overflow.tsx +++ b/src/Overflow.tsx @@ -24,7 +24,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: ItemType, order: 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..b3dba59 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -51,6 +51,23 @@ describe('Overflow.Basic', () => { expect(wrapper.find('Item').text()).toEqual('Bamboo Is Light'); }); + it('renderItem params have "order"', () => { + const testData = getData(3); + const wrapper = mount( + { + return `${item.label}-${order}-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( From a25df5a90f15723710380f8a85b91a6b1110fdd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 7 Jan 2025 14:48:21 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=E5=B0=86index=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=88=B0=E5=88=B0renderItem=E5=8F=82=E6=95=B0=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Item.tsx | 4 ++-- src/Overflow.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Item.tsx b/src/Item.tsx index 1a82aff..e1870b0 100644 --- a/src/Item.tsx +++ b/src/Item.tsx @@ -11,7 +11,7 @@ export interface ItemProps extends React.HTMLAttributes { item?: ItemType; className?: string; style?: React.CSSProperties; - renderItem?: (item: ItemType, order: number) => React.ReactNode; + renderItem?: (item: ItemType) => React.ReactNode; responsive?: boolean; // https://github.com/ant-design/ant-design/issues/35475 /** @@ -66,7 +66,7 @@ function InternalItem( // ================================ Render ================================ const childNode = - renderItem && item !== UNDEFINED ? renderItem(item, order) : children; + renderItem && item !== UNDEFINED ? renderItem(item) : children; let overflowStyle: React.CSSProperties | undefined; if (!invalidate) { diff --git a/src/Overflow.tsx b/src/Overflow.tsx index 3ce1a9e..cf933c2 100644 --- a/src/Overflow.tsx +++ b/src/Overflow.tsx @@ -1,13 +1,13 @@ -import * as React from 'react'; -import { useState, useMemo, useCallback } from 'react'; import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import * as React from 'react'; +import { useCallback, useMemo, useState } from 'react'; import Item from './Item'; -import useEffectState, { useBatcher } from './hooks/useEffectState'; import type { ComponentType } from './RawItem'; import RawItem from './RawItem'; import { OverflowContext } from './context'; +import useEffectState, { useBatcher } from './hooks/useEffectState'; const RESPONSIVE = 'responsive' as const; const INVALIDATE = 'invalidate' as const; @@ -24,7 +24,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, order: number) => React.ReactNode; + renderItem?: (item: 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; @@ -347,7 +347,7 @@ function Overflow( {...itemSharedProps} order={index} key={key} - item={item} + item={{ ...item, index }} renderItem={mergedRenderItem} itemKey={key} registerSize={registerSize} From a2e44700a101470dad54cbd024190b24e434213c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 7 Jan 2025 15:19:46 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9index=E8=B5=8B?= =?UTF-8?q?=E5=80=BC=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 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`; }} />, ); From a09d6454fe1a8d760e616abe7bab472a3fa9cea9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 7 Jan 2025 16:33:48 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat=EF=BC=9A=E4=BF=AE=E6=94=B9renderItem?= =?UTF-8?q?=20=E7=9A=84index=E5=8F=82=E6=95=B0=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Item.tsx | 11 ++++++----- src/Overflow.tsx | 51 ++++++++++++++++++++++++------------------------ 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/Item.tsx b/src/Item.tsx index 172e88c..35eeafd 100644 --- a/src/Item.tsx +++ b/src/Item.tsx @@ -1,7 +1,6 @@ -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 @@ -9,10 +8,10 @@ const UNDEFINED = undefined; export interface ItemProps extends React.HTMLAttributes { prefixCls: string; - item?: ItemWithIndex; + item?: ItemType; className?: string; style?: React.CSSProperties; - renderItem?: (item: ItemWithIndex) => 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( // ================================ 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 42c509c..f2a405f 100644 --- a/src/Overflow.tsx +++ b/src/Overflow.tsx @@ -16,8 +16,6 @@ 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; @@ -26,7 +24,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: ItemWithIndex) => 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( } : (item: ItemType, index: number) => { const key = getKey(item, index); - const propsItem: ItemWithIndex = { ...item, index }; return ( ( const mergedRenderRest = renderRest || defaultRenderRest; - const restNode = renderRawRest ? ( - - {renderRawRest(omittedItems)} - - ) : ( - - {typeof mergedRenderRest === 'function' - ? mergedRenderRest(omittedItems) - : mergedRenderRest} - - ); + const restNode = renderRawRest ? ( + + {renderRawRest(omittedItems)} + + ) : ( + + {typeof mergedRenderRest === 'function' + ? mergedRenderRest(omittedItems) + : mergedRenderRest} + + ); const overflowNode = ( ( {overflowNode} - ) : overflowNode; + ) : ( + overflowNode + ); } const ForwardOverflow = React.forwardRef(Overflow); From 22b39b20600289921e051afcfbbc761207dd6079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 7 Jan 2025 16:42:57 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=20feat=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=AF=B9?= =?UTF-8?q?=E5=BA=94=E7=9A=84=E5=8D=95=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/index.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index c50e08a..ccfc01c 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -56,8 +56,8 @@ describe('Overflow.Basic', () => { const wrapper = mount( { - return `${item.label}-${item.index}-test`; + renderItem={(item,info) => { + return `${item.label}-${info.index}-test`; }} />, );