feat(color-picker): preset colors support collapsing at initialization (#45607)

* feat(color-picker): preset colors support collapsing at initialization

(cherry picked from commit d8975b407f1d5a574cdefafd8be17374a4d5e8af)

* docs: update

(cherry picked from commit 74f6d70ebd22c752f57f559d4222c383fafea63a)

* test: add unit test

(cherry picked from commit 2ef2af49228d3fe672c1b24277f142f54f9b193a)

* chore: update

Co-authored-by: RedJue <RedJue@users.noreply.github.com>

* refactor: rename

* Apply suggestions from code review

Signed-off-by: MadCcc <1075746765@qq.com>

---------

Signed-off-by: MadCcc <1075746765@qq.com>
Co-authored-by: RedJue <RedJue@users.noreply.github.com>
Co-authored-by: MadCcc <1075746765@qq.com>

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

@@ -225,6 +225,39 @@ describe('ColorPicker', () => {
     expect(handleColorChange).toHaveBeenCalledTimes(2);
   });
 
+  describe('preset collapsed', () => {
+    const recommendedPreset = {
+      label: 'Recommended',
+      colors: ['#f00', '#0f0', '#00f'],
+    };
+
+    const selector = '.ant-color-picker-presets .ant-collapse-item.ant-collapse-item-active';
+
+    it('Should default collapsed work', async () => {
+      const { container } = render(<ColorPicker open presets={[recommendedPreset]} />);
+
+      expect(container.querySelectorAll(selector)).toHaveLength(1);
+    });
+
+    it('Should collapsed work', async () => {
+      const { container } = render(
+        <ColorPicker
+          open
+          presets={[
+            recommendedPreset,
+            {
+              label: 'Recent',
+              colors: ['#f00d', '#0f0d', '#00fd'],
+              defaultCollapsed: true,
+            },
+          ]}
+        />,
+      );
+
+      expect(container.querySelectorAll(selector)).toHaveLength(1);
+    });
+  });
+
   it('Should format change work', async () => {
     const { container } = render(<ColorPicker />);
     fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);

components/color-picker/components/ColorPresets.tsx

@@ -34,6 +34,8 @@ const isBright = (value: Color, bgColorToken: string) => {
   return r * 0.299 + g * 0.587 + b * 0.114 > 192;
 };
 
+const genCollapsePanelKey = ({ label }: PresetsItem) => `panel-${label}`;
+
 const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color, onChange }) => {
   const [locale] = useLocale('ColorPicker');
   const [, token] = useToken();
@@ -43,8 +45,14 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
   });
   const colorPresetsPrefixCls = `${prefixCls}-presets`;
 
-  const activeKeys = useMemo<string[]>(
-    () => presetsValue.map((preset) => `panel-${preset.label}`),
+  const activeKeys = useMemo(
+    () =>
+      presetsValue.reduce<string[]>((acc, preset) => {
+        if (!preset.defaultCollapsed) {
+          acc.push(genCollapsePanelKey(preset));
+        }
+        return acc;
+      }, []),
     [presetsValue],
   );
 
@@ -53,7 +61,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
   };
 
   const items: CollapseProps['items'] = presetsValue.map((preset) => ({
-    key: `panel-${preset.label}`,
+    key: genCollapsePanelKey(preset),
     label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
     children: (
       <div className={`${colorPresetsPrefixCls}-items`}>

components/color-picker/index.en-US.md

@@ -53,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
 | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
 | open | Whether to show popup | boolean | - | |
-| presets | 	Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
+| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultCollapsed?: boolean }[]` | - | `defaultCollapsed: 5.11.0` |
 | placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
 | panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
 | showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |

components/color-picker/index.zh-CN.md

@@ -54,7 +54,7 @@ group:
 | destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
 | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
 | open | 是否显示弹出窗口 | boolean | - | |
-| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
+| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultCollapsed?: boolean }[]` | - | `defaultCollapsed: 5.11.0` |
 | placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
 | panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
 | showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |

components/color-picker/interface.ts

@@ -11,6 +11,11 @@ export enum ColorFormat {
 export interface PresetsItem {
   label: ReactNode;
   colors: (string | Color)[];
+  /**
+   * Whether the initial state is collapsed
+   * @since 5.11.0
+   */
+  defaultCollapsed?: boolean;
 }
 export type TriggerType = 'click' | 'hover';