From 3a729ce63a37d8045eb6b06476544a7c814235b0 Mon Sep 17 00:00:00 2001
From: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:17:32 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9AGive=20the=20parameter=20'info'=20?=
=?UTF-8?q?field=20'index'=20of=20the=20renderItem=20method=20in=20rc-over?=
=?UTF-8?q?flow=20to=20the=20tagRender=20method=20(#1102)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat：从rc-overflow的renderItem中获取info参数，后添加到tagRender中
* 修改不正确的类型定义
---------
Co-authored-by: 刘欢 <lh01217311@antgroup.com>
---
package.json | 2 +-
src/BaseSelect/index.tsx | 1 +
src/Selector/MultipleSelector.tsx | 14 ++++++++++++--
src/interface.ts | 1 +
tests/Tags.test.tsx | 22 ++++++++++++++++++++++
5 files changed, 37 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index 1af5ec92..91b72f56 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
"@rc-component/trigger": "^2.1.1",
"classnames": "2.x",
"rc-motion": "^2.0.1",
- "rc-overflow": "^1.3.1",
+ "rc-overflow": "^1.4.0",
"rc-util": "^5.16.1",
"rc-virtual-list": "^3.5.2"
},
diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx
index a2a15e8c..4660bde9 100644
--- a/src/BaseSelect/index.tsx
+++ b/src/BaseSelect/index.tsx
@@ -68,6 +68,7 @@ export type CustomTagProps = {
onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
closable: boolean;
isMaxTag: boolean;
+ index: number;
};
export interface BaseSelectRef {
diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
index 5c7fac70..e6a2643f 100644
--- a/src/Selector/MultipleSelector.tsx
+++ b/src/Selector/MultipleSelector.tsx
@@ -131,6 +131,7 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
closable?: boolean,
onClose?: React.MouseEventHandler,
isMaxTag?: boolean,
+ info?: { index: number },
) => {
const onMouseDown = (e: React.MouseEvent) => {
onPreventMouseDown(e);
@@ -141,6 +142,7 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
{tagRender({
label: content,
value,
+ index: info?.index,
disabled: itemDisabled,
closable,
onClose,
@@ -150,7 +152,7 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
);
};
- const renderItem = (valueItem: DisplayValueType) => {
+ const renderItem = (valueItem: DisplayValueType, info: { index: number }) => {
const { disabled: itemDisabled, label, value } = valueItem;
const closable = !disabled && !itemDisabled;
@@ -173,7 +175,15 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
};
return typeof tagRender === 'function'
- ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose)
+ ? customizeRenderSelector(
+ value,
+ displayLabel,
+ itemDisabled,
+ closable,
+ onClose,
+ undefined,
+ info,
+ )
: defaultRenderSelector(valueItem, displayLabel, itemDisabled, closable, onClose);
};
diff --git a/src/interface.ts b/src/interface.ts
index 0f3b3eef..1f7df705 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -16,6 +16,7 @@ export interface DisplayValueType {
label?: React.ReactNode;
title?: React.ReactNode;
disabled?: boolean;
+ index?: number;
}
export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx
index 830db1e3..305380c6 100644
--- a/tests/Tags.test.tsx
+++ b/tests/Tags.test.tsx
@@ -14,6 +14,7 @@ import removeSelectedTest from './shared/removeSelectedTest';
import maxTagRenderTest from './shared/maxTagRenderTest';
import throwOptionValue from './shared/throwOptionValue';
import { injectRunAllTimers, findSelection, expectOpen, toggleOpen, keyDown } from './utils/common';
+import type { CustomTagProps } from '@/BaseSelect';
describe('Select.Tags', () => {
injectRunAllTimers(jest);
@@ -301,6 +302,27 @@ describe('Select.Tags', () => {
expectOpen(container, false);
});
+ it('tagRender props have index', () => {
+ const tagRender = (props: CustomTagProps) => {
+ const { index: tagIndex, label } = props;
+ return <div className={`${label}-${tagIndex}-test`}>{label}</div>;
+ };
+ const values = ['light', 'dark'];
+ const { container } = render(
+ <Select
+ mode="tags"
+ value={values}
+ tagRender={tagRender}
+ options={[{ value: 'light' }, { value: 'dark' }]}
+ />,
+ );
+ values.forEach((value, index) => {
+ const expectedText = `.${value}-${index}-test`;
+ const nodes = container.querySelectorAll(expectedText);
+ expect(nodes).toHaveLength(1);
+ });
+ });
+
it('disabled', () => {
const tagRender = jest.fn();
render(