From 804c7b4f64968d12d2ca665b23289e0cd1037fff Mon Sep 17 00:00:00 2001
From: lincao <carolin913@126.com>
Date: Thu, 28 Apr 2022 17:30:39 +0800
Subject: [PATCH] =?UTF-8?q?fix(colorpicker):=20popupprops=E9=80=8F?=
 =?UTF-8?q?=E4=BC=A0=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=20(#700)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(colorpicker): popupprops透传问题修复

fix #698

* fix(colorpicker): 透传hover
---
 src/color-picker/ColorPicker.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/color-picker/ColorPicker.tsx b/src/color-picker/ColorPicker.tsx
index 70a4b3a39d..c08f469846 100644
--- a/src/color-picker/ColorPicker.tsx
+++ b/src/color-picker/ColorPicker.tsx
@@ -10,6 +10,7 @@ import useClickOutside from '../_util/useClickOutside';
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const baseClassName = useClassname();
   const { popupProps, defaultValue, disabled = false, inputProps, value, onChange, colorModes, ...rest } = props;
+  const { overlayClassName, overlayStyle = {}, ...restPopupProps } = popupProps || {};
 
   const [visible, setVisible] = useState(false);
   const [innerValue, setInnerValue] = useDefault(value, defaultValue, onChange);
@@ -19,13 +20,13 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const popProps: PopupProps = {
     placement: 'bottom-left',
     expandAnimation: true,
-    ...((popupProps as PopupProps) || {}),
     trigger: 'click',
-    attach: 'body',
-    overlayClassName: [baseClassName],
     visible,
+    ...restPopupProps,
+    overlayClassName: [baseClassName, overlayClassName],
     overlayStyle: {
       padding: 0,
+      ...overlayStyle,
     },
   };
 
@@ -40,6 +41,7 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   return (
     <Popup
       {...popProps}
+      onVisibleChange={(v) => setVisible(v)}
       content={
         !disabled && (
           <ColorPanel
@@ -54,7 +56,7 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
         )
       }
     >
-      <div className={`${baseClassName}__trigger`} onClick={() => setVisible(!visible)} ref={triggerRef}>
+      <div className={`${baseClassName}__trigger`} ref={triggerRef}>
         <ColorTrigger color={innerValue} disabled={disabled} inputProps={inputProps} onTriggerChange={setInnerValue} />
       </div>
     </Popup>