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

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