Skip to content

Commit

Permalink
feat:renderItem params add "index" (#52)
Browse files Browse the repository at this point in the history
* feat:renderItem 入参增加 index

* chore:更新jest配置

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

---------

Co-authored-by: 刘欢 <[email protected]>
  • Loading branch information
EmilyyyLiu and 刘欢 authored Jan 8, 2025
1 parent 64ea78f commit 2058c4b
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 3 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
},
"overrides": {
"cheerio":"1.0.0-rc.12"
},
"cnpm": {
"mode": "npm"
},
Expand Down
4 changes: 2 additions & 2 deletions src/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
/**
Expand Down Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/Overflow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 16 additions & 0 deletions tests/index.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down

0 comments on commit 2058c4b

Please sign in to comment.