From cf92c9b9cef6fe643f58f40f6c2d1d0033a834dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 30 Jul 2024 17:39:13 +0800
Subject: [PATCH] enhance: color picker click (#50148)

---
 .../color-picker/__tests__/index.test.tsx     | 57 ++++++++++++++++++-
 .../components/PanelPicker/index.tsx          | 35 ++++++++++--
 package.json                                  |  2 +-
 3 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index b56057b81cac..88b5dcef46eb 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -19,9 +19,12 @@ function doMouseMove(
   container: HTMLElement,
   start: number,
   end: number,
-  element = 'ant-color-picker-handler',
+  element: string | HTMLElement = 'ant-color-picker-handler',
 ) {
-  const mouseDown = createEvent.mouseDown(container.getElementsByClassName(element)[0], {
+  const ele =
+    element instanceof HTMLElement ? element : container.getElementsByClassName(element)[0];
+
+  const mouseDown = createEvent.mouseDown(ele, {
     pageX: start,
     pageY: start,
   });
@@ -30,7 +33,7 @@ function doMouseMove(
     pageY: { get: () => start },
   });
 
-  fireEvent(container.getElementsByClassName(element)[0], mouseDown);
+  fireEvent(ele, mouseDown);
   // Drag
   const mouseMove: any = new Event('mousemove');
   mouseMove.pageX = end;
@@ -797,4 +800,52 @@ describe('ColorPicker', () => {
     );
     expect(container.querySelector('.ant-color-picker-trigger-text')?.innerHTML).toBe('123456');
   });
+
+  describe('transparent to valuable', () => {
+    let spyRect: ReturnType<typeof spyElementPrototypes>;
+
+    beforeEach(() => {
+      spyRect = spyElementPrototypes(HTMLElement, {
+        getBoundingClientRect: () => ({
+          x: 0,
+          y: 100,
+          width: 100,
+          height: 100,
+        }),
+      });
+    });
+
+    afterEach(() => {
+      spyRect.mockRestore();
+    });
+
+    it('init with hue', async () => {
+      const onChange = jest.fn();
+      const { container } = render(<ColorPicker defaultValue={null} open onChange={onChange} />);
+      doMouseMove(container, 0, 50, 'ant-color-picker-slider-handle');
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.anything(),
+        // Safe to change with any value but (0/0/0/0)
+        'rgb(0,255,255)',
+      );
+    });
+
+    it('init with alpha', async () => {
+      const onChange = jest.fn();
+      const { container } = render(<ColorPicker defaultValue={null} open onChange={onChange} />);
+      doMouseMove(
+        container,
+        0,
+        50,
+        container.querySelectorAll<HTMLElement>('.ant-color-picker-slider-handle')[1]!,
+      );
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.anything(),
+        // Safe to change with any value but (0/0/0/0)
+        'rgba(255,0,0,0.5)',
+      );
+    });
+  });
 });
diff --git a/components/color-picker/components/PanelPicker/index.tsx b/components/color-picker/components/PanelPicker/index.tsx
index d41f8b400034..3939e6ad8ff8 100644
--- a/components/color-picker/components/PanelPicker/index.tsx
+++ b/components/color-picker/components/PanelPicker/index.tsx
@@ -95,10 +95,37 @@ const PanelPicker: FC = () => {
     return new AggregationColor(nextColors);
   };
 
-  const onInternalChange = (colorValue: AggregationColor | Color, fromPicker?: boolean) => {
+  const onInternalChange = (
+    colorValue: AggregationColor | Color,
+    fromPicker?: boolean,
+    info?: {
+      type?: 'hue' | 'alpha';
+      value?: number;
+    },
+  ) => {
     const nextColor = generateColor(colorValue);
 
-    onChange(fillColor(value.cleared ? genAlphaColor(nextColor) : nextColor), fromPicker);
+    let submitColor = nextColor;
+
+    if (value.cleared) {
+      const rgb = submitColor.toRgb();
+
+      // Auto fill color if origin is `0/0/0` to enhance user experience
+      if (!rgb.r && !rgb.g && !rgb.b && info) {
+        const { type: infoType, value: infoValue = 0 } = info;
+
+        submitColor = new AggregationColor({
+          h: infoType === 'hue' ? infoValue : 0,
+          s: 1,
+          b: 1,
+          a: infoType === 'alpha' ? infoValue / 100 : 1,
+        });
+      } else {
+        submitColor = genAlphaColor(submitColor);
+      }
+    }
+
+    onChange(fillColor(submitColor), fromPicker);
   };
 
   const onInternalChangeComplete = (nextColor: AggregationColor) => {
@@ -140,8 +167,8 @@ const PanelPicker: FC = () => {
         prefixCls={prefixCls}
         value={activeColor?.toHsb()}
         disabledAlpha={disabledAlpha}
-        onChange={(colorValue) => {
-          onInternalChange(colorValue, true);
+        onChange={(colorValue, info) => {
+          onInternalChange(colorValue, true, info);
         }}
         onChangeComplete={(colorValue) => {
           onInternalChangeComplete(generateColor(colorValue));
diff --git a/package.json b/package.json
index 12489f55dc50..944a9dd083d4 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "@ant-design/react-slick": "~1.1.2",
     "@babel/runtime": "^7.24.8",
     "@ctrl/tinycolor": "^3.6.1",
-    "@rc-component/color-picker": "~1.9.0",
+    "@rc-component/color-picker": "~2.0.0",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/qrcode": "~1.0.0",
     "@rc-component/tour": "~1.15.0",