mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +08:00
fix: key should not be a ReactNode (#51808)
* fix: key should not be a ReactNode * test: add test case
This commit is contained in:
parent
db62b9a12e
commit
9cc7dc1e15
@ -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 />);
|
||||
|
@ -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`}>
|
||||
|
Loading…
Reference in New Issue
Block a user