feat: color-picker clear action optimize

components/color-picker/ColorPicker.tsx

@@ -79,6 +79,8 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
   const { token } = theme.useToken();
+  // save the temporary alpha value before clear color
+  const [tmpAlpha, setTmpAlpha] = useState<number | undefined>(undefined);
 
   const [colorValue, setColorValue] = useColorState(token.colorPrimary, {
     value,
@@ -101,16 +103,23 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const handleChange = (data: Color) => {
     const color: Color = generateColor(data);
-    if (clearColor && color.toHsb().a > 0) {
+    const hsb = color.toHsb();
+    if (clearColor) {
       setClearColor(false);
+      setTmpAlpha(undefined);
+      if (tmpAlpha !== undefined) {
+        hsb.a = tmpAlpha;
       }
+    }
+    const displayColor = generateColor(hsb);
     if (!value) {
-      setColorValue(color);
+      setColorValue(displayColor);
     }
-    onChange?.(color, color.toHexString());
+    onChange?.(displayColor, displayColor.toHexString());
   };
 
-  const handleClear = (clear: boolean) => {
+  const handleClear = (clear: boolean, oriColor: Color) => {
+    setTmpAlpha(oriColor.toHsb().a);
     setClearColor(clear);
   };
 

components/color-picker/ColorPickerPanel.tsx

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

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

@@ -23,7 +23,7 @@ describe('ColorPicker', () => {
   });
 
   it('Should component defaultValue work', () => {
-    const { container } = render(<ColorPicker defaultValue="#000000" />);
+    const { container } = render(<ColorPicker defaultValue='#000000' />);
     expect(
       container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
     ).toEqual('background: rgb(0, 0, 0);');
@@ -37,8 +37,8 @@ describe('ColorPicker', () => {
         [color],
       );
       return (
-        <ColorPicker value={color} onChange={setColor} format="hsb">
-          <span className="custom-trigger">{colorString}</span>
+        <ColorPicker value={color} onChange={setColor} format='hsb'>
+          <span className='custom-trigger'>{colorString}</span>
         </ColorPicker>
       );
     };
@@ -80,7 +80,7 @@ describe('ColorPicker', () => {
   });
 
   it('Should allowClear work', async () => {
-    const { container } = render(<ColorPicker allowClear />);
+    const { container } = render(<ColorPicker allowClear format='hex' />);
     fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
     await waitFakeTimer();
     expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
@@ -91,18 +91,58 @@ describe('ColorPicker', () => {
     expect(
       container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'),
     ).toBeTruthy();
+
     fireEvent.change(container.querySelector('.ant-color-picker-alpha-input input')!, {
       target: { value: 1 },
     });
+
     expect(
       container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'),
     ).toBeFalsy();
+
+    fireEvent.change(container.querySelector('.ant-color-picker-hex-input input')!, {
+      target: { value: 631515 },
+    });
+
+    fireEvent.change(container.querySelector('.ant-color-picker-alpha-input input')!, {
+      target: { value: 80 },
+    });
+
+    expect(
+      container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
+    ).toEqual('80%');
+
+    expect(
+      container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
+    ).toEqual('background: rgba(99, 21, 21, 0.8);');
+
+    fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
+
+    expect(
+      container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
+    ).toEqual('0%');
+
+    expect(
+      container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
+    ).toEqual('background: rgba(99, 21, 21, 0);');
+
+    fireEvent.change(container.querySelector('.ant-color-picker-hex-input input')!, {
+      target: { value: '000000' },
+    });
+
+    expect(
+      container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
+    ).toEqual('80%');
+
+    expect(
+      container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
+    ).toEqual('background: rgba(0, 0, 0, 0.8);');
   });
 
   it('Should render trigger work', async () => {
     const { container } = render(
       <ColorPicker>
-        <div className="trigger" />
+        <div className='trigger' />
       </ColorPicker>,
     );
     expect(container.querySelector('.trigger')).toBeTruthy();
@@ -204,7 +244,7 @@ describe('ColorPicker', () => {
   });
 
   it('Should hex input work', async () => {
-    const { container } = render(<ColorPicker open format="hex" />);
+    const { container } = render(<ColorPicker open format='hex' />);
     fireEvent.change(container.querySelector('.ant-color-picker-hex-input input')!, {
       target: { value: 631515 },
     });
@@ -214,7 +254,7 @@ describe('ColorPicker', () => {
   });
 
   it('Should rgb input work', async () => {
-    const { container } = render(<ColorPicker open format="rgb" />);
+    const { container } = render(<ColorPicker open format='rgb' />);
     const rgbInputEls = container.querySelectorAll('.ant-color-picker-rgb-input input');
     fireEvent.change(rgbInputEls[0], {
       target: { value: 99 },
@@ -231,7 +271,7 @@ describe('ColorPicker', () => {
   });
 
   it('Should hsb input work', async () => {
-    const { container } = render(<ColorPicker open format="hsb" />);
+    const { container } = render(<ColorPicker open format='hsb' />);
     const hsbInputEls = container.querySelectorAll('.ant-color-picker-hsb-input input');
     fireEvent.change(hsbInputEls[0], {
       target: { value: 0 },

components/color-picker/components/ColorClear.tsx

@@ -6,7 +6,7 @@ import { generateColor } from '../util';
 
 interface ColorClearProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {
   value?: Color;
-  onChange?: (value: Color) => void;
+  onChange?: (value: Color, oriColor: Color) => void;
 }
 
 const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange }) => {
@@ -15,7 +15,7 @@ const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange }) => {
       const hsba = value.toHsb();
       hsba.a = 0;
       const genColor = generateColor(hsba);
-      onChange?.(genColor);
+      onChange?.(genColor, value);
     }
   };
   return <div className={`${prefixCls}-clear`} onClick={handleClick} />;