From 93649e3a157b71be86895d53e629ac593cc366e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 9 Jan 2025 10:06:53 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat=EF=BC=9A=E4=BB=8Erc-overflow=E7=9A=84r?= =?UTF-8?q?enderItem=E4=B8=AD=E8=8E=B7=E5=8F=96info=E5=8F=82=E6=95=B0?= =?UTF-8?q?=EF=BC=8C=E5=90=8E=E6=B7=BB=E5=8A=A0=E5=88=B0tagRender=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 1af5ec92f..91b72f562 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 a2a15e8c7..831d180e3 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -68,6 +68,7 @@ export type CustomTagProps = { onClose: (event?: React.MouseEvent) => void; closable: boolean; isMaxTag: boolean; + index?: number; }; export interface BaseSelectRef { diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx index 5c7fac704..e6a2643fd 100644 --- a/src/Selector/MultipleSelector.tsx +++ b/src/Selector/MultipleSelector.tsx @@ -131,6 +131,7 @@ const SelectSelector: React.FC = (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 = (props) => { {tagRender({ label: content, value, + index: info?.index, disabled: itemDisabled, closable, onClose, @@ -150,7 +152,7 @@ const SelectSelector: React.FC = (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 = (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 0f3b3eefa..1f7df705d 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 830db1e33..305380c6e 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
{label}
; + }; + const values = ['light', 'dark']; + const { container } = render( + ); + + // Wait for the scrollbar to appear + await waitFor(() => { + const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible'); + expect(scrollbarElement).not.toBeNull(); + }); + }); +}); diff --git a/tests/utils/domHook.ts b/tests/utils/domHook.ts new file mode 100644 index 000000000..61e9c76cf --- /dev/null +++ b/tests/utils/domHook.ts @@ -0,0 +1,61 @@ +/* eslint-disable no-param-reassign */ +const NO_EXIST = { __NOT_EXIST: true }; + +export function spyElementPrototypes(Element, properties) { + const propNames = Object.keys(properties); + const originDescriptors = {}; + + propNames.forEach((propName) => { + const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName); + originDescriptors[propName] = originDescriptor || NO_EXIST; + + const spyProp = properties[propName]; + + if (typeof spyProp === 'function') { + // If is a function + Element.prototype[propName] = function spyFunc(...args) { + return spyProp.call(this, originDescriptor, ...args); + }; + } else { + // Otherwise tread as a property + Object.defineProperty(Element.prototype, propName, { + ...spyProp, + set(value) { + if (spyProp.set) { + return spyProp.set.call(this, originDescriptor, value); + } + return originDescriptor.set(value); + }, + get() { + if (spyProp.get) { + return spyProp.get.call(this, originDescriptor); + } + return originDescriptor.get(); + }, + configurable: true, + }); + } + }); + + return { + mockRestore() { + propNames.forEach((propName) => { + const originDescriptor = originDescriptors[propName]; + if (originDescriptor === NO_EXIST) { + delete Element.prototype[propName]; + } else if (typeof originDescriptor === 'function') { + Element.prototype[propName] = originDescriptor; + } else { + Object.defineProperty(Element.prototype, propName, originDescriptor); + } + }); + }, + }; +} + +export function spyElementPrototype(Element, propName, property) { + return spyElementPrototypes(Element, { + [propName]: property, + }); +} +/* eslint-enable no-param-reassign */