feat: ColorPicker presets should support key (#51794)

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ColorPicker, Flex, Input } from 'antd';
-import { createStyles } from 'antd-style';
 import type { ColorPickerProps, GetProp } from 'antd';
+import { createStyles } from 'antd-style';
 import { generateColor } from 'antd/es/color-picker/util';
 import classNames from 'classnames';
 
@@ -61,7 +61,7 @@ const DebouncedColorPicker: React.FC<React.PropsWithChildren<ThemeColorPickerPro
     <ColorPicker
       value={value}
       onChange={setValue}
-      presets={[{ label: 'PresetColors', colors: PRESET_COLORS }]}
+      presets={[{ label: 'PresetColors', key: 'PresetColors', colors: PRESET_COLORS }]}
     >
       {children}
     </ColorPicker>

components/color-picker/__tests__/index.test.tsx

@@ -12,7 +12,7 @@ import Form from '../../form';
 import theme from '../../theme';
 import { AggregationColor } from '../color';
 import ColorPicker from '../ColorPicker';
-import type { ColorPickerProps, ColorValueType } from '../interface';
+import type { ColorPickerProps, ColorValueType, PresetsItem } from '../interface';
 import { generateColor } from '../util';
 
 function doMouseMove(
@@ -178,6 +178,7 @@ describe('ColorPicker', () => {
         onChange={handleColorChange}
         presets={[
           {
+            key: 'Recommended',
             label: 'Recommended',
             colors: [
               '#000000',
@@ -193,6 +194,7 @@ describe('ColorPicker', () => {
             ],
           },
           {
+            key: 'Recent',
             label: 'Recent',
             colors: [],
           },
@@ -243,7 +245,8 @@ describe('ColorPicker', () => {
   });
 
   describe('preset collapsed', () => {
-    const recommendedPreset = {
+    const recommendedPreset: PresetsItem = {
+      key: 'Recommended',
       label: 'Recommended',
       colors: ['#f00', '#0f0', '#00f'],
     };
@@ -263,6 +266,7 @@ describe('ColorPicker', () => {
           presets={[
             recommendedPreset,
             {
+              key: 'Recent',
               label: 'Recent',
               colors: ['#f00d', '#0f0d', '#00fd'],
               defaultOpen: false,
@@ -381,6 +385,7 @@ describe('ColorPicker', () => {
           open
           presets={[
             {
+              key: 'test',
               label: 'test',
               colors: ['#0000001A'],
             },
@@ -949,6 +954,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'], key: 'a', defaultOpen: true },
+          { label: <span>bbb</span>, colors: ['#666'], key: 'b', defaultOpen: true },
+          { label: <span>ccc</span>, colors: ['#999'], key: 'c', 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 />);

components/color-picker/components/ColorPresets.tsx

@@ -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) => {
+  const mergedKey = preset.key ?? index;
+  return `panel-${mergedKey}`;
+};
 
 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, i) => {
         const { defaultOpen = true } = preset;
-        if (defaultOpen) acc.push(genCollapsePanelKey(preset));
+        if (defaultOpen) {
+          acc.push(genCollapsePanelKey(preset, i));
+        }
         return acc;
       }, []),
     [presetsValue],
@@ -60,8 +65,8 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
     onChange?.(colorValue);
   };
 
-  const items: CollapseProps['items'] = presetsValue.map((preset) => ({
+  const items = presetsValue.map<NonNullable<CollapseProps['items']>[number]>((preset, i) => ({
-    key: genCollapsePanelKey(preset),
+    key: genCollapsePanelKey(preset, i),
     label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
     children: (
       <div className={`${colorPresetsPrefixCls}-items`}>

components/color-picker/demo/panel-render.tsx

@@ -5,11 +5,9 @@ import type { ColorPickerProps } from 'antd';
 
 type Presets = Required<ColorPickerProps>['presets'][number];
 
-const genPresets = (presets = presetPalettes) =>
+function genPresets(presets = presetPalettes) {
-  Object.entries(presets).map<Presets>(([label, colors]) => ({
+  return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));
-    label,
+}
-    colors,
-  }));
 
 const HorizontalLayoutDemo = () => {
   const { token } = theme.useToken();

components/color-picker/demo/presets.tsx

@@ -5,8 +5,9 @@ import type { ColorPickerProps } from 'antd';
 
 type Presets = Required<ColorPickerProps>['presets'][number];
 
-const genPresets = (presets = presetPalettes) =>
+function genPresets(presets = presetPalettes) {
-  Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors }));
+  return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));
+}
 
 const Demo: React.FC = () => {
   const { token } = theme.useToken();

components/color-picker/interface.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, FC, ReactNode } from 'react';
+import React from 'react';
 import type {
   ColorGenInput,
   ColorPickerProps as RcColorPickerProps,
@@ -33,7 +34,13 @@ export interface PresetsItem {
    * @default true
    */
   defaultOpen?: boolean;
+  /**
+   * The key of the panel
+   * @since 5.23.0
+   */
+  key: React.Key;
 }
+
 export type TriggerType = 'click' | 'hover';
 
 export type TriggerPlacement = TooltipPlacement; // Alias, to prevent breaking changes.