feat: ColorPicker support defaultFormat (ant-design#44487)

* feat: ColorPicker support defaultFormat * test: add test case * docs: update en doc --------- Co-authored-by: [email protected] <[email protected]> Co-authored-by: Redjue <[email protected]>
ammar-knowledge · Sep 5, 2023 · 69c52b7 · 69c52b7
1 parent caa71d4
commit 69c52b7
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 0 deletions.
diff --git 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
@@ -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(<ColorPicker open defaultFormat="hsb" />);
+    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
@@ -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
@@ -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 |