feat: ColorPicker supports disabledFormat (#51539)

components/color-picker/ColorPicker.tsx

@@ -60,6 +60,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     getPopupContainer,
     autoAdjustOverflow = true,
     destroyTooltipOnHide,
+    disabledFormat,
     ...rest
   } = props;
 
@@ -248,6 +249,7 @@ const ColorPicker: CompoundedComponent = (props) => {
             onActive={setActiveIndex}
             gradientDragging={gradientDragging}
             onGradientDragging={setGradientDragging}
+            disabledFormat={disabledFormat}
           />
         </ContextIsolator>
       }

components/color-picker/ColorPickerPanel.tsx

@@ -35,6 +35,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
     onFormatChange,
     gradientDragging,
     onGradientDragging,
+    disabledFormat,
   } = props;
   const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
 
@@ -57,6 +58,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
       onFormatChange,
       gradientDragging,
       onGradientDragging,
+      disabledFormat,
     }),
     [
       prefixCls,
@@ -75,6 +77,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
       onFormatChange,
       gradientDragging,
       onGradientDragging,
+      disabledFormat,
     ],
   );
 

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

@@ -948,4 +948,33 @@ describe('ColorPicker', () => {
     const onChangeColor = onChange.mock.calls[0][0];
     expect(onChangeColor.toHexString()).toBe('#2ddcb4');
   });
+
+  describe('should disable colorInput', () => {
+    it('Should defaultValue work with disabledFormat', async () => {
+      const { container } = render(<ColorPicker defaultValue="#000000" disabledFormat />);
+      expect(
+        container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
+      ).toEqual('background: rgb(0, 0, 0);');
+      fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
+      expect(container.querySelector('.ant-color-picker-input-container .ant-select')).toBeFalsy();
+    });
+
+    it('Should rgb input work with disabledFormat', async () => {
+      const { container } = render(<ColorPicker open format="rgb" disabledFormat />);
+      const rgbInputEls = container.querySelectorAll('.ant-color-picker-rgb-input input');
+      fireEvent.change(rgbInputEls[0], {
+        target: { value: 99 },
+      });
+      fireEvent.change(rgbInputEls[1], {
+        target: { value: 21 },
+      });
+      fireEvent.change(rgbInputEls[2], {
+        target: { value: 21 },
+      });
+      expect(
+        container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
+      ).toEqual('background: rgb(99, 21, 21);');
+      expect(container.querySelector('.ant-color-picker-input-container .ant-select')).toBeFalsy();
+    });
+  });
 });

components/color-picker/components/ColorInput.tsx

@@ -18,6 +18,7 @@ interface ColorInputProps {
   disabledAlpha?: boolean;
   value?: AggregationColor;
   onChange?: (value: AggregationColor) => void;
+  disabledFormat?: boolean;
 }
 
 const selectOptions = [ColorFormat.hex, ColorFormat.hsb, ColorFormat.rgb].map((format) => ({
@@ -26,7 +27,8 @@ const selectOptions = [ColorFormat.hex, ColorFormat.hsb, ColorFormat.rgb].map((f
 }));
 
 const ColorInput: FC<ColorInputProps> = (props) => {
-  const { prefixCls, format, value, disabledAlpha, onFormatChange, onChange } = props;
+  const { prefixCls, format, value, disabledAlpha, onFormatChange, onChange, disabledFormat } =
+    props;
   const [colorFormat, setColorFormat] = useMergedState(ColorFormat.hex, {
     value: format,
     onChange: onFormatChange,
@@ -53,17 +55,19 @@ const ColorInput: FC<ColorInputProps> = (props) => {
 
   return (
     <div className={`${colorInputPrefixCls}-container`}>
-      <Select
-        value={colorFormat}
-        variant="borderless"
-        getPopupContainer={(current) => current}
-        popupMatchSelectWidth={68}
-        placement="bottomRight"
-        onChange={handleFormatChange}
-        className={`${prefixCls}-format-select`}
-        size="small"
-        options={selectOptions}
-      />
+      {!disabledFormat && (
+        <Select
+          value={colorFormat}
+          variant="borderless"
+          getPopupContainer={(current) => current}
+          popupMatchSelectWidth={68}
+          placement="bottomRight"
+          onChange={handleFormatChange}
+          className={`${prefixCls}-format-select`}
+          size="small"
+          options={selectOptions}
+        />
+      )}
       <div className={colorInputPrefixCls}>{steppersNode}</div>
       {!disabledAlpha && (
         <ColorAlphaInput prefixCls={prefixCls} value={value} onChange={onChange} />

components/color-picker/context.ts

@@ -31,6 +31,7 @@ export interface PanelPickerContextProps {
   onGradientDragging: (dragging: boolean) => void;
 
   onClear?: () => void;
+  disabledFormat?: boolean;
 }
 
 export interface PanelPresetsContextProps {

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

@@ -49,6 +49,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | defaultFormat | Default format of color | `rgb` \| `hex` \| `hsb` | - | 5.9.0 |
 | disabled | Disable ColorPicker | boolean | - | |
 | disabledAlpha | Disable Alpha | boolean | - | 5.8.0 |
+| disabledFormat | Disable format of color | boolean | - |
 | destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
 | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
 | mode | Configure single or gradient color | `('single' \| 'gradient')[]` | `single` | 5.20.0 |

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

@@ -50,6 +50,7 @@ group:
 | defaultFormat | 颜色格式默认的值 | `rgb` \| `hex` \| `hsb` | - | 5.9.0 |
 | disabled | 禁用颜色选择器 | boolean | - | |
 | disabledAlpha | 禁用透明度 | boolean | - | 5.8.0 |
+| disabledFormat | 禁用选择颜色格式 | boolean | - |
 | destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
 | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
 | mode | 选择器模式，用于配置单色与渐变 | `('single' \| 'gradient')[]` | `single` | 5.20.0 |

components/color-picker/interface.ts

@@ -88,4 +88,5 @@ export type ColorPickerProps = Omit<
   onChange?: (value: AggregationColor, css: string) => void;
   onClear?: () => void;
   onChangeComplete?: (value: AggregationColor) => void;
+  disabledFormat?: boolean;
 } & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;