feat: ColorPicker Implement onChangeComplete API (#43370)

* feat: implement onChangeComplete api

* docs: add change completed demo

* perf: optimization code

components/color-picker/ColorPicker.tsx

@@ -30,7 +30,7 @@ import { customizePrefixCls, generateColor } from './util';
 
 export type ColorPickerProps = Omit<
   RcColorPickerProps,
-  'onChange' | 'value' | 'defaultValue' | 'panelRender'
+  'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'onChangeComplete'
 > & {
   value?: Color | string;
   defaultValue?: Color | string;
@@ -55,6 +55,7 @@ export type ColorPickerProps = Omit<
   onFormatChange?: (format: ColorFormat) => void;
   onChange?: (value: Color, hex: string) => void;
   onClear?: () => void;
+  onChangeComplete?: (value: Color) => void;
 } & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
 
 type CompoundedComponent = React.FC<ColorPickerProps> & {
@@ -85,6 +86,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     onChange,
     onClear,
     onOpenChange,
+    onChangeComplete,
     getPopupContainer,
     autoAdjustOverflow = true,
     destroyTooltipOnHide,
@@ -142,13 +144,12 @@ const ColorPicker: CompoundedComponent = (props) => {
         color = generateColor(hsba);
       }
     }
-    if (!value) {
-      setColorValue(color);
-    }
     // Only for drag-and-drop color picking
     if (pickColor) {
       popupAllowCloseRef.current = false;
     }
+
+    setColorValue(color);
     onChange?.(color, color.toHexString());
   };
 
@@ -157,8 +158,9 @@ const ColorPicker: CompoundedComponent = (props) => {
     onClear?.();
   };
 
-  const handleChangeComplete = () => {
+  const handleChangeComplete: ColorPickerProps['onChangeComplete'] = (color) => {
     popupAllowCloseRef.current = true;
+    onChangeComplete?.(generateColor(color));
   };
 
   const popoverProps: PopoverProps = {
@@ -182,6 +184,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     panelRender,
     format: formatValue,
     onFormatChange: setFormatValue,
+    onChangeComplete: handleChangeComplete,
   };
 
   const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
@@ -196,12 +199,7 @@ const ColorPicker: CompoundedComponent = (props) => {
         }
       }}
       content={
-        <ColorPickerPanel
+        <ColorPickerPanel {...colorBaseProps} onChange={handleChange} onClear={handleClear} />
-          {...colorBaseProps}
-          onChange={handleChange}
-          onChangeComplete={handleChangeComplete}
-          onClear={handleClear}
-        />
       }
       overlayClassName={mergePopupCls}
       {...popoverProps}
@@ -211,7 +209,7 @@ const ColorPicker: CompoundedComponent = (props) => {
           open={popupOpen}
           className={mergeCls}
           style={mergedStyle}
-          color={colorValue}
+          color={value ? generateColor(value) : colorValue}
           prefixCls={prefixCls}
           disabled={disabled}
           colorCleared={colorCleared}

components/color-picker/ColorPickerPanel.tsx

@@ -10,21 +10,11 @@ import type { ColorPickerBaseProps } from './interface';
 
 interface ColorPickerPanelProps extends ColorPickerBaseProps {
   onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
-  onChangeComplete?: (type?: HsbaColorType) => void;
   onClear?: () => void;
 }
 
 const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
-  const {
+  const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
-    prefixCls,
-    presets,
-    panelRender,
-    color,
-    onChange,
-    onClear,
-    onChangeComplete,
-    ...injectProps
-  } = props;
   const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
 
   // ==== Inject props ===
@@ -33,7 +23,6 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
     value: color,
     onChange,
     onClear,
-    onChangeComplete,
     ...injectProps,
   };
 

components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -767,6 +767,390 @@ Array [
 ]
 `;
 
+exports[`renders components/color-picker/demo/change-completed.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-color-picker-trigger"
+  >
+    <div
+      class="ant-color-picker-color-block"
+    >
+      <div
+        class="ant-color-picker-color-block-inner"
+        style="background: rgb(22, 119, 255);"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div
+      class="ant-popover-arrow"
+      style="position: absolute;"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div
+            class="ant-color-picker-inner-content"
+          >
+            <div
+              class="ant-color-picker-panel"
+            >
+              <div
+                class="ant-color-picker-select"
+              >
+                <div
+                  class="ant-color-picker-palette"
+                  style="position: relative;"
+                >
+                  <div
+                    style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                  >
+                    <div
+                      class="ant-color-picker-handler"
+                      style="background-color: rgb(22, 119, 255);"
+                    />
+                  </div>
+                  <div
+                    class="ant-color-picker-saturation"
+                    style="background-color: rgb(0, 0, 0);"
+                  />
+                </div>
+              </div>
+              <div
+                class="ant-color-picker-slider-container"
+              >
+                <div
+                  class="ant-color-picker-slider-group"
+                >
+                  <div
+                    class="ant-color-picker-slider ant-color-picker-slider-hue"
+                  >
+                    <div
+                      class="ant-color-picker-palette"
+                      style="position: relative;"
+                    >
+                      <div
+                        style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                      >
+                        <div
+                          class="ant-color-picker-handler ant-color-picker-handler-sm"
+                          style="background-color: rgb(0, 0, 0);"
+                        />
+                      </div>
+                      <div
+                        class="ant-color-picker-gradient"
+                        style="position: absolute; inset: 0;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="ant-color-picker-slider ant-color-picker-slider-alpha"
+                  >
+                    <div
+                      class="ant-color-picker-palette"
+                      style="position: relative;"
+                    >
+                      <div
+                        style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                      >
+                        <div
+                          class="ant-color-picker-handler ant-color-picker-handler-sm"
+                          style="background-color: rgb(22, 119, 255);"
+                        />
+                      </div>
+                      <div
+                        class="ant-color-picker-gradient"
+                        style="position: absolute; inset: 0;"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-color-picker-color-block"
+                >
+                  <div
+                    class="ant-color-picker-color-block-inner"
+                    style="background: rgb(22, 119, 255);"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-color-picker-input-container"
+            >
+              <div
+                class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-item"
+                    title="HEX"
+                  >
+                    HEX
+                  </span>
+                </div>
+                <div
+                  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                >
+                  <div>
+                    <div
+                      id="rc_select_TEST_OR_SSR_list"
+                      role="listbox"
+                      style="height: 0px; width: 0px; overflow: hidden;"
+                    >
+                      <div
+                        aria-label="HEX"
+                        aria-selected="true"
+                        id="rc_select_TEST_OR_SSR_list_0"
+                        role="option"
+                      >
+                        hex
+                      </div>
+                      <div
+                        aria-label="HSB"
+                        aria-selected="false"
+                        id="rc_select_TEST_OR_SSR_list_1"
+                        role="option"
+                      >
+                        hsb
+                      </div>
+                    </div>
+                    <div
+                      class="rc-virtual-list"
+                      style="position: relative;"
+                    >
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height: 256px; overflow-y: auto;"
+                      >
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display: flex; flex-direction: column;"
+                          >
+                            <div
+                              aria-selected="true"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                              title="HEX"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                HEX
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select: none;"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="HSB"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                HSB
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select: none;"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="RGB"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                RGB
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select: none;"
+                                unselectable="on"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="ant-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down ant-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="ant-color-picker-input"
+              >
+                <span
+                  class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
+                >
+                  <span
+                    class="ant-input-prefix"
+                  >
+                    #
+                  </span>
+                  <input
+                    class="ant-input ant-input-sm"
+                    type="text"
+                    value="1677FF"
+                  />
+                </span>
+              </div>
+              <div
+                class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
+              >
+                <div
+                  class="ant-input-number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="true"
+                    aria-label="Increase Value"
+                    class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="up"
+                      class="anticon anticon-up ant-input-number-handler-up-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="up"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="ant-input-number-handler ant-input-number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="down"
+                      class="anticon anticon-down ant-input-number-handler-down-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="down"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </div>
+                <div
+                  class="ant-input-number-input-wrap"
+                >
+                  <input
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    aria-valuenow="100"
+                    autocomplete="off"
+                    class="ant-input-number-input"
+                    role="spinbutton"
+                    step="1"
+                    value="100%"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/color-picker/demo/controlled.tsx extend context correctly 1`] = `
 Array [
   <div

components/color-picker/__tests__/__snapshots__/demo.test.ts.snap

@@ -30,6 +30,25 @@ exports[`renders components/color-picker/demo/base.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/color-picker/demo/change-completed.tsx correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-color-picker-trigger"
+  >
+    <div
+      class="ant-color-picker-color-block"
+    >
+      <div
+        class="ant-color-picker-color-block-inner"
+        style="background:rgb(22, 119, 255)"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/color-picker/demo/controlled.tsx correctly 1`] = `
 <div
   class="ant-color-picker-trigger"

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

@@ -397,4 +397,19 @@ describe('ColorPicker', () => {
     expect(componentContainer.querySelector('.ant-color-picker-inner-content')).toBeTruthy();
     expect(componentContainer).toMatchSnapshot();
   });
+
+  it('Should onChangeComplete work', async () => {
+    spyElementPrototypes(HTMLElement, {
+      getBoundingClientRect: () => ({
+        x: 0,
+        y: 100,
+        width: 100,
+        height: 100,
+      }),
+    });
+    const handleChangeComplete = jest.fn();
+    const { container } = render(<ColorPicker open onChangeComplete={handleChangeComplete} />);
+    doMouseMove(container, 0, 999);
+    expect(handleChangeComplete).toHaveBeenCalledTimes(1);
+  });
 });

components/color-picker/components/PanelPicker.tsx

@@ -9,10 +9,12 @@ import ColorClear from './ColorClear';
 import ColorInput from './ColorInput';
 
 export interface PanelPickerProps
-  extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared' | 'allowClear'> {
+  extends Pick<
+    ColorPickerBaseProps,
+    'prefixCls' | 'colorCleared' | 'allowClear' | 'onChangeComplete'
+  > {
   value?: Color;
   onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
-  onChangeComplete?: (type?: HsbaColorType) => void;
   onClear?: () => void;
 }
 

components/color-picker/demo/change-completed.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+颜色选择完成才会触发回调
+
+## en-US
+
+The callback will be called only when the color selection is completed.

components/color-picker/demo/change-completed.tsx

@@ -0,0 +1,21 @@
+import { App, ColorPicker } from 'antd';
+import type { ColorPickerProps } from 'antd/es/color-picker';
+import React, { useState } from 'react';
+
+const Demo = () => {
+  const { message } = App.useApp();
+  const [value, setValue] = useState<ColorPickerProps['value']>('#1677ff');
+  return (
+    <App>
+      <ColorPicker
+        value={value}
+        onChangeComplete={(color) => {
+          setValue(color);
+          message.success(`The selected color is ${color.toHexString()}`);
+        }}
+      />
+    </App>
+  );
+};
+
+export default Demo;

components/color-picker/index.en-US.md

@@ -22,6 +22,7 @@ Used when the user needs to customize the color selection.
 <code src="./demo/base.tsx">Basic Usage</code>
 <code src="./demo/size.tsx">Trigger size</code>
 <code src="./demo/controlled.tsx">controlled mode</code>
+<code src="./demo/change-completed.tsx">Color change completed</code>
 <code src="./demo/text-render.tsx">Rendering Trigger Text</code>
 <code src="./demo/disabled.tsx">Disable</code>
 <code src="./demo/allowClear.tsx">Clear Color</code>
@@ -55,6 +56,7 @@ Used when the user needs to customize the color selection.
 | trigger | ColorPicker trigger mode | `hover` \| `click` | `click` | |
 | value | Value of color | string \| `Color` | - | |
 | onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - | |
+| onChangeComplete | Called when color pick ends   | `(value: Color) => void` | - | 5.7.0 |
 | onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
 | onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - | |
 | onClear | Called when clear | `() => void` | - | 5.6.0 |

components/color-picker/index.zh-CN.md

@@ -23,6 +23,7 @@ group:
 <code src="./demo/base.tsx">基本使用</code>
 <code src="./demo/size.tsx">触发器尺寸大小</code>
 <code src="./demo/controlled.tsx">受控模式</code>
+<code src="./demo/change-completed.tsx">颜色完成选择</code>
 <code src="./demo/text-render.tsx">渲染触发器文本</code>
 <code src="./demo/disabled.tsx">禁用</code>
 <code src="./demo/allowClear.tsx">清除颜色</code>
@@ -56,6 +57,7 @@ group:
 | trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` | |
 | value | 颜色的值 | string \| `Color` | - | |
 | onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - | |
+| onChangeComplete | 颜色选择完成的回调  | `(value: Color) => void` | - | 5.7.0 |
 | onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
 | onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - | |
 | onClear | 清除的回调 | `() => void` | - | 5.6.0 |

components/color-picker/interface.ts

@@ -31,4 +31,5 @@ export interface ColorPickerBaseProps {
   presets?: PresetsItem[];
   panelRender?: ColorPickerProps['panelRender'];
   onFormatChange?: ColorPickerProps['onFormatChange'];
+  onChangeComplete?: ColorPickerProps['onChangeComplete'];
 }

package.json

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