feat(ColorPicker): add onClear

components/color-picker/ColorPicker.tsx

@@ -5,7 +5,7 @@ import type {
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { CSSProperties } from 'react';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import genPurePanel from '../_util/PurePanel';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
@@ -44,6 +44,7 @@ export interface ColorPickerProps
   onOpenChange?: (open: boolean) => void;
   onFormatChange?: (format: ColorFormat) => void;
   onChange?: (value: Color, hex: string) => void;
+  onClear?: () => void;
   getPopupContainer?: PopoverProps['getPopupContainer'];
   autoAdjustOverflow?: PopoverProps['autoAdjustOverflow'];
 }
@@ -71,6 +72,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     styles,
     onFormatChange,
     onChange,
+    onClear,
     onOpenChange,
     getPopupContainer,
     autoAdjustOverflow = true,
@@ -115,8 +117,9 @@ const ColorPicker: CompoundedComponent = (props) => {
     onChange?.(color, color.toHexString());
   };
 
-  const handleClear = (clear: boolean) => {
-    setColorCleared(clear);
+  const handleClear = () => {
+    setColorCleared(true);
+    onClear?.();
   };
 
   const popoverProps: PopoverProps = {
@@ -140,12 +143,6 @@ const ColorPicker: CompoundedComponent = (props) => {
     onFormatChange,
   };
 
-  useEffect(() => {
-    if (colorCleared) {
-      setPopupOpen(false);
-    }
-  }, [colorCleared]);
-
   return wrapSSR(
     <Popover
       style={styles?.popup}

components/color-picker/ColorPickerPanel.tsx

@@ -11,7 +11,7 @@ import type { ColorPickerBaseProps } from './interface';
 
 interface ColorPickerPanelProps extends ColorPickerBaseProps {
   onChange?: (value?: Color, type?: HsbaColorType) => void;
-  onClear?: (clear?: boolean) => void;
+  onClear?: () => void;
 }
 
 const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
@@ -26,7 +26,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
           value={color}
           onChange={(clearColor) => {
             onChange?.(clearColor);
-            onClear?.(true);
+            onClear?.();
           }}
           {...injectProps}
         />

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

@@ -79,16 +79,16 @@ describe('ColorPicker', () => {
     expect(container.querySelector('.ant-color-picker')).toBeFalsy();
   });
 
-  it('Should allowClear work', async () => {
-    const { container } = render(<ColorPicker allowClear />);
+  it('Should allowClear and onClear work', async () => {
+    const onClear = jest.fn();
+    const { container } = render(<ColorPicker allowClear onClear={onClear} />);
     fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
     await waitFakeTimer();
-    expect(container.querySelector('.ant-popover-hidden')).toBeFalsy();
     expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
     fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
+    expect(onClear).toHaveBeenCalledTimes(1);
 
     await waitFakeTimer();
-    expect(container.querySelector('.ant-popover-hidden')).toBeTruthy();
     expect(
       container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
     ).toEqual('0%');
@@ -96,12 +96,6 @@ describe('ColorPicker', () => {
       container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'),
     ).toBeTruthy();
 
-    fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
-    await waitFakeTimer();
-    expect(
-      container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
-    ).toEqual('0%');
-
     fireEvent.change(container.querySelector('.ant-color-picker-hex-input input')!, {
       target: { value: '#273B57' },
     });

components/color-picker/demo/allowClear.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-清除已选择的颜色。
+清除已选择的颜色。可以使用受控 open 和 onClear 控制清除时关闭弹窗。
 
 ## en-US
 
-Clear Color.
+Clear Color. You can use the controlled open and onClear controls to close popovers when clearing.

components/color-picker/demo/allowClear.tsx

@@ -1,4 +1,16 @@
 import { ColorPicker } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 
-export default () => <ColorPicker allowClear />;
+export default () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <ColorPicker
+      open={open}
+      allowClear
+      onOpenChange={setOpen}
+      onClear={() => {
+        setOpen(false);
+      }}
+    />
+  );
+};

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

@@ -36,19 +36,20 @@ Used when the user needs to customize the color selection.
 | Property | Description | Type | Default |
 | :-- | :-- | :-- | :-- |
 | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` |
-| onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - |
 | value | Value of color | string \| `Color` | - |
 | defaultValue | Default value of color | string \| `Color` | - |
-| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - |
 | allowClear | 	Allow clearing color selected | boolean | false |
 | presets | 	Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
 | children | Trigger of ColorPicker | React.ReactNode | - |
 | trigger | ColorPicker trigger mode | `hover` \| `click` | `click` |
 | open | Whether to show popup | boolean | - |
-| onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - |
 | disabled | Disable ColorPicker | boolean | - |
 | placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` |
 | arrow | Configuration for popup arrow | `boolean \| { pointAtCenter: boolean }` | `true` | - |
+| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - |
+| onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - |
+| onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - |
+| onClear | Called when clear | `() => void` | - |
 
 ### Color
 

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

@@ -37,19 +37,20 @@ group:
 | 参数 | 说明 | 类型 | 默认值 |
 | :-- | :-- | :-- | :-- |
 | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` |
-| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - |
 | value | 颜色的值 | string \| `Color` | - |
 | defaultValue | 颜色默认的值 | string \| `Color` | - |
-| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - |
 | allowClear | 允许清除选择的颜色 | boolean | false |
 | presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
 | children | 颜色选择器的触发器 | React.ReactNode | - |
 | trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` |
 | open | 是否显示弹出窗口 | boolean | - |
-| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - |
 | disabled | 禁用颜色选择器 | boolean | - |
 | placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` |
 | arrow | 配置弹出的箭头 | `boolean \| { pointAtCenter: boolean }` | `true` | - |
+| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - |
+| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - |
+| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - |
+| onClear | 清除的回调 | `() => void` | - |
 
 ### Color