diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index a023cc4893ca..9ec0c0fbd058 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/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 = (props) => { description, trigger, children, + clickOutAutoClose, onOpenChange, } = props; @@ -41,19 +42,46 @@ const FloatButtonGroup: React.FC = (props) => { const [open, setOpen] = useMergedState(false, { value: props.open }); + const FloatButtonEL = useRef(null); + const clickAction = useRef>({}); const hoverAction = useRef>({}); 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 = (props) => { )} ( - } type="primary" trigger="click"> + } + type="primary" + trigger="click" + clickOutAutoClose + > } /> diff --git a/components/float-button/interface.ts b/components/float-button/interface.ts index 26216be0e36f..eb17d2b1566c 100644 --- a/components/float-button/interface.ts +++ b/components/float-button/interface.ts @@ -36,6 +36,8 @@ export interface FloatButtonGroupProps extends FloatButtonProps { children: React.ReactNode; // 触发方式 (有触发方式为菜单模式) trigger?: FloatButtonGroupTrigger; + // 触发方式为 click 时,是否开启点击外侧自动关闭 + clickOutAutoClose?: boolean; // 受控展开 open?: boolean; // 关闭按钮自定义图标