From 99138cb93eab437f57a9fbff26415f4b27eac545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Fri, 3 Nov 2023 11:47:52 +0800 Subject: [PATCH] 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 * 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 Co-authored-by: MadCcc <1075746765@qq.com> --- .../color-picker/__tests__/index.test.tsx | 33 +++++++++++++++++++ .../color-picker/components/ColorPresets.tsx | 14 ++++++-- components/color-picker/index.en-US.md | 2 +- components/color-picker/index.zh-CN.md | 2 +- components/color-picker/interface.ts | 5 +++ 5 files changed, 51 insertions(+), 5 deletions(-) diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index 6ffa1af07d..913309a1a9 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/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(); + + expect(container.querySelectorAll(selector)).toHaveLength(1); + }); + + it('Should collapsed work', async () => { + const { container } = render( + , + ); + + expect(container.querySelectorAll(selector)).toHaveLength(1); + }); + }); + it('Should format change work', async () => { const { container } = render(); fireEvent.click(container.querySelector('.ant-color-picker-trigger')!); diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx index 0bcadbef07..12fa5cd21f 100644 --- a/components/color-picker/components/ColorPresets.tsx +++ b/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 = ({ prefixCls, presets, value: color, onChange }) => { const [locale] = useLocale('ColorPicker'); const [, token] = useToken(); @@ -43,8 +45,14 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, }); const colorPresetsPrefixCls = `${prefixCls}-presets`; - const activeKeys = useMemo( - () => presetsValue.map((preset) => `panel-${preset.label}`), + const activeKeys = useMemo( + () => + presetsValue.reduce((acc, preset) => { + if (!preset.defaultCollapsed) { + acc.push(genCollapsePanelKey(preset)); + } + return acc; + }, []), [presetsValue], ); @@ -53,7 +61,7 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, }; const items: CollapseProps['items'] = presetsValue.map((preset) => ({ - key: `panel-${preset.label}`, + key: genCollapsePanelKey(preset), label:
{preset?.label}
, children: (
diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index b340ba2d67..f2a6f61037 100644 --- a/components/color-picker/index.en-US.md +++ b/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 }[]` | - | | +| presets | Preset colors | `{ label: ReactNode, colors: Array, 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 | diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 782611c385..23a6dfd3a9 100644 --- a/components/color-picker/index.zh-CN.md +++ b/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 }[]` | - | | +| presets | 预设的颜色 | `{ label: ReactNode, colors: Array, 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 | diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts index f0c4c3e935..2b300f3b0d 100644 --- a/components/color-picker/interface.ts +++ b/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';