feat[float-button]: add clickOutAutoClose

components/float-button/FloatButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, memo, useContext } from 'react';
+import React, { useRef, memo, useContext, useEffect } from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
 import classNames from 'classnames';
@@ -23,6 +23,7 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
     description,
     trigger,
     children,
+    clickOutAutoClose,
     onOpenChange,
   } = props;
 
@@ -41,19 +42,46 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
 
   const [open, setOpen] = useMergedState(false, { value: props.open });
 
+  const FloatButtonEL = useRef(null);
+
   const clickAction = useRef<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>>({});
 
   const hoverAction = useRef<React.HTMLAttributes<HTMLDivElement>>({});
 
   if (trigger === 'click') {
-    clickAction.current = {
-      onClick() {
-        setOpen((prevState) => {
-          onOpenChange?.(!prevState);
-          return !prevState;
-        });
-      },
-    };
+    if (clickOutAutoClose) {
+      useEffect(() => {
+        const BigestEl = document;
+        const clickFn = (e: MouseEvent) => {
+          let clickTarget = e.target as Node;
+          while (clickTarget) {
+            if (clickTarget == FloatButtonEL.current) {
+              setOpen((prevState) => {
+                onOpenChange?.(!prevState);
+                return !prevState;
+              });
+              return;
+            }
+            clickTarget = clickTarget.parentNode!;
+          }
+          setOpen(false);
+        };
+        BigestEl?.addEventListener('click', clickFn);
+        //  非严格模式下 会在组件卸载时自动 remove
+        // return (
+        //   BigestEl?.removeEventListener('click', clickFn)
+        // )
+      }, []);
+    } else {
+      clickAction.current = {
+        onClick(e) {
+          setOpen((prevState) => {
+            onOpenChange?.(!prevState);
+            return !prevState;
+          });
+        },
+      };
+    }
   }
 
   if (trigger === 'hover') {
@@ -80,6 +108,7 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
               )}
             </CSSMotion>
             <FloatButton
+              ref={FloatButtonEL}
               type={type}
               shape={shape}
               icon={open ? closeIcon : icon}

components/float-button/demo/group-menu.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式
+设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。若设置为 `click`,可通过 `clickOutAutoClose` 选择是否开启点击外侧自动关闭
 
 ## en-US
 
-Open menu mode with `trigger`, which could be `hover` or `click`.
+Open menu mode with `trigger`, which could be `hover` or `click`. if set to `click`, you can choose whether to open by clicking `clickOutAutoClose`

components/float-button/demo/group-menu.tsx

@@ -3,7 +3,12 @@ import { FloatButton } from 'antd';
 import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';
 
 const App: React.FC = () => (
-  <FloatButton.Group icon={<CustomerServiceOutlined />} type="primary" trigger="click">
+  <FloatButton.Group
+    icon={<CustomerServiceOutlined />}
+    type="primary"
+    trigger="click"
+    clickOutAutoClose
+  >
     <FloatButton />
     <FloatButton icon={<CommentOutlined />} />
   </FloatButton.Group>

components/float-button/interface.ts

@@ -36,6 +36,8 @@ export interface FloatButtonGroupProps extends FloatButtonProps {
   children: React.ReactNode;
   // 触发方式 (有触发方式为菜单模式）
   trigger?: FloatButtonGroupTrigger;
+  // 触发方式为 click 时，是否开启点击外侧自动关闭
+  clickOutAutoClose?: boolean;
   // 受控展开
   open?: boolean;
   // 关闭按钮自定义图标