prefer: optimize allow clear logic (#42439)

* refactor: optimize allow clear logic

* test: fix test coverage down

* refactor: use onChange type

components/color-picker/ColorPicker.tsx

@@ -1,4 +1,7 @@
-import type { ColorPickerProps as RcColorPickerProps } from '@rc-component/color-picker';
+import type {
+  HsbaColorType,
+  ColorPickerProps as RcColorPickerProps,
+} from '@rc-component/color-picker';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { CSSProperties } from 'react';
@@ -95,10 +98,16 @@ const ColorPicker: CompoundedComponent = (props) => {
   });
   const mergeCls = classNames(mergeRootCls, className, hashId);
 
-  const handleChange = (data: Color) => {
-    const color: Color = generateColor(data);
-    if (colorCleared && color.toHsb().a > 0) {
+  const handleChange = (data: Color, type?: HsbaColorType) => {
+    let color: Color = generateColor(data);
+    if (colorCleared) {
       setColorCleared(false);
+      const hsba = color.toHsb();
+      // ignore alpha slider
+      if (colorValue.toHsb().a === 0 && type !== 'alpha') {
+        hsba.a = 1;
+        color = generateColor(hsba);
+      }
     }
     if (!value) {
       setColorValue(color);

components/color-picker/ColorPickerPanel.tsx

@@ -1,3 +1,4 @@
+import type { HsbaColorType } from '@rc-component/color-picker';
 import RcColorPicker from '@rc-component/color-picker';
 import type { FC } from 'react';
 import React from 'react';
@@ -9,7 +10,7 @@ import ColorPresets from './components/ColorPresets';
 import type { ColorPickerBaseProps } from './interface';
 
 interface ColorPickerPanelProps extends ColorPickerBaseProps {
-  onChange?: (value?: Color) => void;
+  onChange?: (value?: Color, type?: HsbaColorType) => void;
   onClear?: (clear?: boolean) => void;
 }
 

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

@@ -86,6 +86,7 @@ describe('ColorPicker', () => {
     expect(container.querySelector('.ant-popover-hidden')).toBeFalsy();
     expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
     fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
+
     await waitFakeTimer();
     expect(container.querySelector('.ant-popover-hidden')).toBeTruthy();
     expect(
@@ -94,12 +95,19 @@ 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 },
+
+    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' },
     });
     expect(
-      container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'),
-    ).toBeFalsy();
+      container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
+    ).toEqual('100%');
   });
 
   it('Should render trigger work', async () => {

package.json

@@ -113,7 +113,7 @@
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.6.0",
-    "@rc-component/color-picker": "~1.1.0",
+    "@rc-component/color-picker": "~1.1.1",
     "@rc-component/mutate-observer": "^1.0.0",
     "@rc-component/tour": "~1.8.0",
     "@rc-component/trigger": "^1.13.0",
@@ -323,4 +323,4 @@
     "*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write",
     "*.{json,less,md}": "prettier --ignore-unknown --write"
   }
-}
+}