Skip to content

feat:renderItem params add "index" #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/Item.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
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
const UNDEFINED = undefined;

export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
prefixCls: string;
item?: ItemType;
item?: ItemWithIndex<ItemType>;
className?: string;
style?: React.CSSProperties;
renderItem?: (item: ItemType) => React.ReactNode;
renderItem?: (item: ItemWithIndex<ItemType>) => React.ReactNode;
responsive?: boolean;
// https://github.com/ant-design/ant-design/issues/35475
/**
Expand Down
14 changes: 8 additions & 6 deletions src/Overflow.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -16,6 +16,8 @@ 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;
Expand All @@ -24,7 +26,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: ItemWithIndex<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;
Expand Down Expand Up @@ -341,13 +343,13 @@ 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={item}
item={propsItem}
renderItem={mergedRenderItem}
itemKey={key}
registerSize={registerSize}
Expand Down
17 changes: 17 additions & 0 deletions tests/index.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<Overflow
data={testData}
renderItem={(item) => {
return `${item.label}-${item.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
Loading