enhance: color picker click (ant-design#50148)

Author: zombieJ

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)',
+      );
+    });
+  });
 });

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));

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",