diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 0003af4adc..11a3071429 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/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; type CompoundedComponent = React.FC & { @@ -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={ - + } 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} diff --git a/components/color-picker/ColorPickerPanel.tsx b/components/color-picker/ColorPickerPanel.tsx index 45c2153915..8f3ab63d6b 100644 --- a/components/color-picker/ColorPickerPanel.tsx +++ b/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 = (props) => { - const { - prefixCls, - presets, - panelRender, - color, - onChange, - onClear, - onChangeComplete, - ...injectProps - } = props; + const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props; const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`; // ==== Inject props === @@ -33,7 +23,6 @@ const ColorPickerPanel: FC = (props) => { value: color, onChange, onClear, - onChangeComplete, ...injectProps, }; diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 5a659f54c1..a99bc38c68 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/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`] = ` +
+
+
+
+
+
+
+
+
+