fix: key should not be a ReactNode (#51808)

* fix: key should not be a ReactNode

* test: add test case
This commit is contained in:
lijianan 2024-11-28 13:53:22 +08:00 committed by GitHub
parent db62b9a12e
commit 9cc7dc1e15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 5 deletions

View File

@ -949,6 +949,22 @@ describe('ColorPicker', () => {
expect(onChangeColor.toHexString()).toBe('#2ddcb4');
});
it('test the same key', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(
<ColorPicker
open
presets={[
{ label: <span>aaa</span>, colors: ['#333'], defaultOpen: true },
{ label: <span>bbb</span>, colors: ['#666'], defaultOpen: true },
{ label: <span>ccc</span>, colors: ['#999'], defaultOpen: true },
]}
/>,
);
expect(errorSpy).not.toHaveBeenCalled();
errorSpy.mockRestore();
});
describe('should disable colorInput', () => {
it('Should defaultValue work with disabledFormat', async () => {
const { container } = render(<ColorPicker defaultValue="#000000" disabledFormat />);

View File

@ -35,7 +35,10 @@ export const isBright = (value: AggregationColor, bgColorToken: string) => {
return r * 0.299 + g * 0.587 + b * 0.114 > 192;
};
const genCollapsePanelKey = ({ label }: PresetsItem) => `panel-${label}`;
const genCollapsePanelKey = (preset: PresetsItem, index: number) =>
typeof preset.label === 'string' || typeof preset.label === 'number'
? `panel-${preset.label}-${index}`
: `panel-${index}`;
const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color, onChange }) => {
const [locale] = useLocale('ColorPicker');
@ -48,9 +51,11 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
const activeKeys = useMemo(
() =>
presetsValue.reduce<string[]>((acc, preset) => {
presetsValue.reduce<string[]>((acc, preset, index) => {
const { defaultOpen = true } = preset;
if (defaultOpen) acc.push(genCollapsePanelKey(preset));
if (defaultOpen) {
acc.push(genCollapsePanelKey(preset, index));
}
return acc;
}, []),
[presetsValue],
@ -60,8 +65,8 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
onChange?.(colorValue);
};
const items: CollapseProps['items'] = presetsValue.map((preset) => ({
key: genCollapsePanelKey(preset),
const items: CollapseProps['items'] = presetsValue.map((preset, index) => ({
key: genCollapsePanelKey(preset, index),
label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
children: (
<div className={`${colorPresetsPrefixCls}-items`}>