refactor: use react cycle method (#50500)

* refactor: use react cycle method

* chore: clean up

components/float-button/FloatButtonGroup.tsx

@@ -1,8 +1,9 @@
-import React, { memo, useCallback, useContext, useEffect } from 'react';
+import React, { memo, useContext } from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import { useEvent } from 'rc-util';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import { devUseWarning } from '../_util/warning';
@@ -11,7 +12,7 @@ import { ConfigContext } from '../config-provider';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import { FloatButtonGroupProvider } from './context';
 import FloatButton, { floatButtonPrefixCls } from './FloatButton';
-import type { FloatButtonGroupProps, FloatButtonRef } from './interface';
+import type { FloatButtonGroupProps } from './interface';
 import useStyle from './style';
 
 const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
@@ -28,6 +29,7 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
     children,
     onOpenChange,
     open: customOpen,
+    onClick: onTriggerButtonClick,
     ...floatButtonProps
   } = props;
 
@@ -53,53 +55,61 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
 
   const floatButtonGroupRef = React.useRef<HTMLDivElement>(null);
 
-  const floatButtonRef = React.useRef<FloatButtonRef['nativeElement']>(null);
+  // ========================== Open ==========================
+  const hoverTrigger = trigger === 'hover';
+  const clickTrigger = trigger === 'click';
 
-  const hoverAction = React.useMemo<React.DOMAttributes<HTMLDivElement>>(() => {
-    const hoverTypeAction = {
-      onMouseEnter() {
-        setOpen(true);
-        onOpenChange?.(true);
-      },
-      onMouseLeave() {
-        setOpen(false);
-        onOpenChange?.(false);
-      },
-    };
-    return trigger === 'hover' ? hoverTypeAction : {};
-  }, [trigger]);
+  const triggerOpen = useEvent((nextOpen: boolean) => {
+    if (open !== nextOpen) {
+      setOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    }
+  });
 
-  const handleOpenChange = () => {
-    setOpen((prevState) => {
-      onOpenChange?.(!prevState);
-      return !prevState;
-    });
+  // ===================== Trigger: Hover =====================
+  const onMouseEnter = () => {
+    if (hoverTrigger) {
+      triggerOpen(true);
+    }
   };
 
-  const onClick = useCallback(
-    (e: MouseEvent) => {
-      if (floatButtonGroupRef.current?.contains(e.target as Node)) {
-        if (floatButtonRef.current?.contains(e.target as Node)) {
-          handleOpenChange();
-        }
-        return;
-      }
-      setOpen(false);
-      onOpenChange?.(false);
-    },
-    [trigger],
-  );
+  const onMouseLeave = () => {
+    if (hoverTrigger) {
+      triggerOpen(false);
+    }
+  };
 
-  useEffect(() => {
-    if (trigger === 'click') {
-      document.addEventListener('click', onClick);
+  // ===================== Trigger: Click =====================
+  const onInternalTriggerButtonClick: FloatButtonGroupProps['onClick'] = (e) => {
+    if (clickTrigger) {
+      triggerOpen(!open);
+    }
+    onTriggerButtonClick?.(e);
+  };
+
+  React.useEffect(() => {
+    if (clickTrigger) {
+      const onDocClick = (e: MouseEvent) => {
+        // Skip if click on the group
+        if (floatButtonGroupRef.current?.contains(e.target as Node)) {
+          return;
+        }
+
+        triggerOpen(false);
+      };
+
+      document.addEventListener('click', onDocClick, {
+        capture: true,
+      });
       return () => {
-        document.removeEventListener('click', onClick);
+        document.removeEventListener('click', onDocClick, {
+          capture: true,
+        });
       };
     }
-  }, [trigger]);
+  }, [clickTrigger]);
 
-  // =================== Warning =====================
+  // ======================== Warning =========================
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('FloatButton.Group');
 
@@ -110,9 +120,17 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
     );
   }
 
+  // ========================= Render =========================
   return wrapCSSVar(
     <FloatButtonGroupProvider value={shape}>
-      <div ref={floatButtonGroupRef} className={groupCls} style={style} {...hoverAction}>
+      <div
+        ref={floatButtonGroupRef}
+        className={groupCls}
+        style={style}
+        // Hover trigger
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
         {trigger && ['click', 'hover'].includes(trigger) ? (
           <>
             <CSSMotion visible={open} motionName={`${groupPrefixCls}-wrap`}>
@@ -121,12 +139,12 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
               )}
             </CSSMotion>
             <FloatButton
-              ref={floatButtonRef}
               type={type}
               icon={open ? mergedCloseIcon : icon}
               description={description}
               aria-label={props['aria-label']}
               className={`${groupPrefixCls}-trigger`}
+              onClick={onInternalTriggerButtonClick}
               {...floatButtonProps}
             />
           </>