From 69c52b7a5b3078054852feac5ada38316f994e30 Mon Sep 17 00:00:00 2001 From: CYB292 <32217093+CYBYOB@users.noreply.github.com> Date: Tue, 5 Sep 2023 18:42:40 +0800 Subject: [PATCH] feat: ColorPicker support defaultFormat (#44487) * feat: ColorPicker support defaultFormat * test: add test case * docs: update en doc --------- Co-authored-by: chenyuanbao@baidu.com Co-authored-by: Redjue --- components/color-picker/ColorPicker.tsx | 3 +++ components/color-picker/__tests__/index.test.tsx | 5 +++++ components/color-picker/index.en-US.md | 1 + components/color-picker/index.zh-CN.md | 1 + 4 files changed, 10 insertions(+) diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 7b9eab1e51c9..fbe884c26667 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -45,6 +45,7 @@ export type ColorPickerProps = Omit< placement?: TriggerPlacement; trigger?: TriggerType; format?: keyof typeof ColorFormat; + defaultFormat?: keyof typeof ColorFormat; allowClear?: boolean; presets?: PresetsItem[]; arrow?: boolean | { pointAtCenter: boolean }; @@ -73,6 +74,7 @@ const ColorPicker: CompoundedComponent = (props) => { value, defaultValue, format, + defaultFormat, allowClear = false, presets, children, @@ -114,6 +116,7 @@ const ColorPicker: CompoundedComponent = (props) => { }); const [formatValue, setFormatValue] = useMergedState(format, { value: format, + defaultValue: defaultFormat, onChange: onFormatChange, }); diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index 4c6763a0d21e..6ffa1af07dd6 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -557,4 +557,9 @@ describe('ColorPicker', () => { fireEvent.click(container.querySelector('.active-btn')!); expect(document.body.querySelector('.ant-popover')).toBeFalsy(); }); + + it('Should defaultFormat work', () => { + const { container } = render(); + expect(container.querySelector('.ant-color-picker-hsb-input')).toBeTruthy(); + }); }); diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index a0eeb1869fcb..b340ba2d6742 100644 --- a/components/color-picker/index.en-US.md +++ b/components/color-picker/index.en-US.md @@ -47,6 +47,7 @@ Common props ref：[Common props](/docs/react/common-props) | arrow | Configuration for popup arrow | `boolean \| { pointAtCenter: boolean }` | true | | | children | Trigger of ColorPicker | React.ReactNode | - | | | defaultValue | Default value of color | string \| `Color` | - | | +| defaultFormat | Default format of color | `rgb` \| `hex` \| `hsb` | - | 5.9.0 | | disabled | Disable ColorPicker | boolean | - | | | disabledAlpha | Disable Alpha | boolean | - | 5.8.0 | | destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 | diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 6f729a949570..782611c38533 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -48,6 +48,7 @@ group: | arrow | 配置弹出的箭头 | `boolean \| { pointAtCenter: boolean }` | true | | | children | 颜色选择器的触发器 | React.ReactNode | - | | | defaultValue | 颜色默认的值 | string \| `Color` | - | | +| defaultFormat | 颜色格式默认的值 | `rgb` \| `hex` \| `hsb` | - | 5.9.0 | | disabled | 禁用颜色选择器 | boolean | - | | | disabledAlpha | 禁用透明度 | boolean | - | 5.8.0 | | destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |