From a3978a7d4465104b88afd9d70099c3e93ac27c5c Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 02:52:24 +0800 Subject: [PATCH 01/13] feat[float-button]: add clickOutAutoClose feature --- components/float-button/FloatButtonGroup.tsx | 101 ++++++++++++++----- components/float-button/demo/group-menu.md | 4 +- components/float-button/demo/group-menu.tsx | 7 +- components/float-button/interface.ts | 2 + 4 files changed, 84 insertions(+), 30 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index a023cc4893ca..61bc105d8468 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, useState } 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,37 +42,82 @@ const FloatButtonGroup: React.FC = (props) => { const [open, setOpen] = useMergedState(false, { value: props.open }); - const clickAction = useRef>({}); + const floatButtonGroupRef = useRef(null); + const floatButtonRef = useRef(null); - const hoverAction = useRef>({}); + const [clickAction, setClickAction] = useState({}); - if (trigger === 'click') { - clickAction.current = { - onClick() { - setOpen((prevState) => { - onOpenChange?.(!prevState); - return !prevState; - }); - }, - }; - } + const [hoverAction, setHoverAction] = useState({}); - if (trigger === 'hover') { - hoverAction.current = { - onMouseEnter() { - setOpen(true); - onOpenChange?.(true); - }, - onMouseLeave() { - setOpen(false); - onOpenChange?.(false); - }, - }; - } + const openChange = () => { + setOpen((prevState) => { + onOpenChange?.(!prevState); + return !prevState; + }); + }; + + const clickTypeAction = { + onClick() { + openChange(); + }, + }; + + const hoverTypeAction = { + onMouseEnter() { + setOpen(true); + onOpenChange?.(true); + }, + onMouseLeave() { + setOpen(false); + onOpenChange?.(false); + }, + }; + + useEffect(() => { + if (trigger === 'click') { + if (clickOutAutoClose) { + const BigestEl = document; + const clickFn = (e: MouseEvent) => { + let clickTarget = e.target as Node; + let clickWhich = null; + // Distinguish between clicking a button and expanding it in a group + const clickMap: Record = { + clickButton: openChange, + clickOther: () => {}, + }; + while (clickTarget) { + if (clickTarget === floatButtonRef.current) { + clickWhich = 'clickButton'; + break; + } + if (clickTarget === floatButtonGroupRef.current) { + clickWhich = 'clickOther'; + } + clickTarget = clickTarget.parentNode!; + } + if (clickWhich) { + clickMap[clickWhich](); + return; + } + setOpen(false); + }; + BigestEl?.addEventListener('click', clickFn); + } else { + setClickAction(clickTypeAction); + } + } + if (trigger === 'hover') { + setHoverAction(hoverTypeAction); + } + // 非严格模式下 会在组件卸载时自动 remove ，在合并前取消注释 + // return ( + // BigestEl?.removeEventListener('click', clickFn) + // ) + }, []); return wrapSSR( -
+
{trigger && ['click', 'hover'].includes(trigger) ? ( <> @@ -80,11 +126,12 @@ const FloatButtonGroup: React.FC = (props) => { )} ) : ( diff --git a/components/float-button/demo/group-menu.md b/components/float-button/demo/group-menu.md index e1d563dbf4c5..6c73b12239be 100644 --- a/components/float-button/demo/group-menu.md +++ b/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` diff --git a/components/float-button/demo/group-menu.tsx b/components/float-button/demo/group-menu.tsx index 29d04d509342..69ac99a5bca7 100644 --- a/components/float-button/demo/group-menu.tsx +++ b/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 = () => ( - } 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; // 关闭按钮自定义图标 From 2441c8f868291ada3e09cb464d1d4b22ebf688de Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 12:13:38 +0800 Subject: [PATCH 02/13] feat: change sourcecode --- components/float-button/FloatButtonGroup.tsx | 98 ++++++++------------ 1 file changed, 38 insertions(+), 60 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 61bc105d8468..d672e48498b5 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -1,4 +1,4 @@ -import React, { useRef, memo, useContext, useEffect, useState } from 'react'; +import React, { useRef, memo, useContext, useEffect, useCallback, useMemo } from 'react'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; import FileTextOutlined from '@ant-design/icons/FileTextOutlined'; import classNames from 'classnames'; @@ -23,7 +23,7 @@ const FloatButtonGroup: React.FC = (props) => { description, trigger, children, - clickOutAutoClose, + clickOutAutoClose = true, onOpenChange, } = props; @@ -42,25 +42,8 @@ const FloatButtonGroup: React.FC = (props) => { const [open, setOpen] = useMergedState(false, { value: props.open }); - const floatButtonGroupRef = useRef(null); - const floatButtonRef = useRef(null); - - const [clickAction, setClickAction] = useState({}); - - const [hoverAction, setHoverAction] = useState({}); - - const openChange = () => { - setOpen((prevState) => { - onOpenChange?.(!prevState); - return !prevState; - }); - }; - - const clickTypeAction = { - onClick() { - openChange(); - }, - }; + const floatButtonGroupRef = useRef(null); + const floatButtonRef = useRef(null); const hoverTypeAction = { onMouseEnter() { @@ -72,47 +55,43 @@ const FloatButtonGroup: React.FC = (props) => { onOpenChange?.(false); }, }; + const hoverAction = useMemo(() => { + if (trigger === 'hover') { + return hoverTypeAction; + } + }, [trigger]); - useEffect(() => { - if (trigger === 'click') { + const openChange = () => { + setOpen((prevState) => { + onOpenChange?.(!prevState); + return !prevState; + }); + }; + + const onClick = useCallback( + (e: MouseEvent) => { + if (trigger !== 'click') return; + const target = e.target; + if (floatButtonGroupRef.current!.contains(target as Node)) { + if (floatButtonRef.current!.contains(target as Node)) { + openChange(); + return; + } else { + return; + } + } if (clickOutAutoClose) { - const BigestEl = document; - const clickFn = (e: MouseEvent) => { - let clickTarget = e.target as Node; - let clickWhich = null; - // Distinguish between clicking a button and expanding it in a group - const clickMap: Record = { - clickButton: openChange, - clickOther: () => {}, - }; - while (clickTarget) { - if (clickTarget === floatButtonRef.current) { - clickWhich = 'clickButton'; - break; - } - if (clickTarget === floatButtonGroupRef.current) { - clickWhich = 'clickOther'; - } - clickTarget = clickTarget.parentNode!; - } - if (clickWhich) { - clickMap[clickWhich](); - return; - } - setOpen(false); - }; - BigestEl?.addEventListener('click', clickFn); - } else { - setClickAction(clickTypeAction); + setOpen(false); } - } - if (trigger === 'hover') { - setHoverAction(hoverTypeAction); - } - // 非严格模式下 会在组件卸载时自动 remove ，在合并前取消注释 - // return ( - // BigestEl?.removeEventListener('click', clickFn) - // ) + }, + [clickOutAutoClose, trigger], + ); + + useEffect(() => { + document.addEventListener('click', onClick); + return () => { + document.removeEventListener('click', onClick); + }; }, []); return wrapSSR( @@ -131,7 +110,6 @@ const FloatButtonGroup: React.FC = (props) => { shape={shape} icon={open ? closeIcon : icon} description={description} - {...clickAction} /> ) : ( From 6d7b1be922bb7f71be1d29591152322df2f8e5fb Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 12:43:36 +0800 Subject: [PATCH 03/13] fix: lint ts error --- components/float-button/FloatButtonGroup.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index d672e48498b5..6adcf538784b 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -42,8 +42,8 @@ const FloatButtonGroup: React.FC = (props) => { const [open, setOpen] = useMergedState(false, { value: props.open }); - const floatButtonGroupRef = useRef(null); - const floatButtonRef = useRef(null); + const floatButtonGroupRef = useRef(null); + const floatButtonRef = useRef(null); const hoverTypeAction = { onMouseEnter() { @@ -71,14 +71,10 @@ const FloatButtonGroup: React.FC = (props) => { const onClick = useCallback( (e: MouseEvent) => { if (trigger !== 'click') return; - const target = e.target; - if (floatButtonGroupRef.current!.contains(target as Node)) { - if (floatButtonRef.current!.contains(target as Node)) { - openChange(); - return; - } else { - return; - } + if (floatButtonGroupRef.current!.contains(e.target as Node)) { + if (!floatButtonRef.current!.contains(e.target as Node)) return; + openChange(); + return; } if (clickOutAutoClose) { setOpen(false); From 0856a48c97c0059814ac9a40650f69106f26701b Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 15:40:09 +0800 Subject: [PATCH 04/13] test: add clickOutAutoClose test --- components/float-button/FloatButtonGroup.tsx | 1 + .../float-button/__tests__/group.test.tsx | 26 +++++++++++++++++++ components/float-button/demo/group-menu.md | 4 +-- components/float-button/demo/group-menu.tsx | 7 +---- 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 6adcf538784b..42c31c063b53 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -78,6 +78,7 @@ const FloatButtonGroup: React.FC = (props) => { } if (clickOutAutoClose) { setOpen(false); + onOpenChange?.(false); } }, [clickOutAutoClose, trigger], diff --git a/components/float-button/__tests__/group.test.tsx b/components/float-button/__tests__/group.test.tsx index 67ebf2001a2e..2458a146e9fe 100644 --- a/components/float-button/__tests__/group.test.tsx +++ b/components/float-button/__tests__/group.test.tsx @@ -58,4 +58,30 @@ describe('FloatButtonGroup', () => { fireEvent.mouseLeave(container.querySelector('.ant-float-btn-group')!); expect(onOpenChange).toHaveBeenCalled(); }); + it('support click floatButtonGroup not close', () => { + const onOpenChange = jest.fn(); + const { container } = render( + + + + + , + ); + fireEvent.click(container.querySelector('.ant-float-btn')!); + fireEvent.click(container.querySelector('.ant-float-btn-group')!); + expect(onOpenChange).toHaveBeenCalledTimes(1); + }); + it('support click out auto close', () => { + const onOpenChange = jest.fn(); + const { container } = render( + + + + + , + ); + fireEvent.click(container.querySelector('.ant-float-btn')!); + fireEvent.click(container); + expect(onOpenChange).toHaveBeenCalledTimes(2); + }); }); diff --git a/components/float-button/demo/group-menu.md b/components/float-button/demo/group-menu.md index 6c73b12239be..7c78f7fb1bca 100644 --- a/components/float-button/demo/group-menu.md +++ b/components/float-button/demo/group-menu.md @@ -1,7 +1,7 @@ ## zh-CN -设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。若设置为 `click`,可通过 `clickOutAutoClose` 选择是否开启点击外侧自动关闭 +设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。若设置为 `click`，点击外侧会**自动关闭** `menu` ## en-US -Open menu mode with `trigger`, which could be `hover` or `click`. if set to `click`, you can choose whether to open by clicking `clickOutAutoClose` +Open menu mode with `trigger`, which could be `hover` or `click`. if set to `click`, `clickOutAutoClose` is enabled by default diff --git a/components/float-button/demo/group-menu.tsx b/components/float-button/demo/group-menu.tsx index 69ac99a5bca7..c2744a74cb3d 100644 --- a/components/float-button/demo/group-menu.tsx +++ b/components/float-button/demo/group-menu.tsx @@ -3,12 +3,7 @@ import { FloatButton } from 'antd'; import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons'; const App: React.FC = () => ( - } - type="primary" - trigger='click' - clickOutAutoClose - > + } type="primary" trigger='click'> } /> From 7c3c049c07f28550662ca57d5dc1a2c78bcfcc3d Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 15:41:46 +0800 Subject: [PATCH 05/13] chore: function rename --- components/float-button/FloatButtonGroup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 42c31c063b53..13e3695253dc 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -61,7 +61,7 @@ const FloatButtonGroup: React.FC = (props) => { } }, [trigger]); - const openChange = () => { + const handleOpenChange = () => { setOpen((prevState) => { onOpenChange?.(!prevState); return !prevState; @@ -73,7 +73,7 @@ const FloatButtonGroup: React.FC = (props) => { if (trigger !== 'click') return; if (floatButtonGroupRef.current!.contains(e.target as Node)) { if (!floatButtonRef.current!.contains(e.target as Node)) return; - openChange(); + handleOpenChange(); return; } if (clickOutAutoClose) { From 936cac79ff54a80a91875aa5df7b6a969bb676fc Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 17:04:45 +0800 Subject: [PATCH 06/13] fix: bug --- components/float-button/FloatButtonGroup.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 13e3695253dc..a23b22bf19ee 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -56,9 +56,7 @@ const FloatButtonGroup: React.FC = (props) => { }, }; const hoverAction = useMemo(() => { - if (trigger === 'hover') { - return hoverTypeAction; - } + return trigger === 'hover' ? hoverTypeAction : {}; }, [trigger]); const handleOpenChange = () => { From 19543d3f93f32e04d668d6a4950c8c51a175242f Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 18:41:25 +0800 Subject: [PATCH 07/13] fix: add dep --- components/float-button/FloatButtonGroup.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index a23b22bf19ee..5518db939c7d 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -83,11 +83,13 @@ const FloatButtonGroup: React.FC = (props) => { ); useEffect(() => { - document.addEventListener('click', onClick); - return () => { - document.removeEventListener('click', onClick); - }; - }, []); + if (trigger === 'click') { + document.addEventListener('click', onClick); + return () => { + document.removeEventListener('click', onClick); + }; + } + }, [trigger]); return wrapSSR( From 25d2d42264ecac7c31eaa0d5c84844a71b644f04 Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 19:38:29 +0800 Subject: [PATCH 08/13] fix: solve lint --- components/float-button/FloatButtonGroup.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 5518db939c7d..d549c29a26b1 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -55,9 +55,7 @@ const FloatButtonGroup: React.FC = (props) => { onOpenChange?.(false); }, }; - const hoverAction = useMemo(() => { - return trigger === 'hover' ? hoverTypeAction : {}; - }, [trigger]); + const hoverAction = useMemo(() => (trigger === 'hover' ? hoverTypeAction : {}), [trigger]); const handleOpenChange = () => { setOpen((prevState) => { From 7a456da84d7439beae191233bdb070ea8406474a Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Tue, 13 Dec 2022 20:00:36 +0800 Subject: [PATCH 09/13] remove clickOutAutoClose api --- components/float-button/FloatButtonGroup.tsx | 7 +------ components/float-button/demo/group-menu.tsx | 2 +- components/float-button/interface.ts | 2 -- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index d549c29a26b1..1b2b7a89b6de 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -23,7 +23,6 @@ const FloatButtonGroup: React.FC = (props) => { description, trigger, children, - clickOutAutoClose = true, onOpenChange, } = props; @@ -72,12 +71,8 @@ const FloatButtonGroup: React.FC = (props) => { handleOpenChange(); return; } - if (clickOutAutoClose) { - setOpen(false); - onOpenChange?.(false); - } }, - [clickOutAutoClose, trigger], + [trigger], ); useEffect(() => { diff --git a/components/float-button/demo/group-menu.tsx b/components/float-button/demo/group-menu.tsx index c2744a74cb3d..29d04d509342 100644 --- a/components/float-button/demo/group-menu.tsx +++ b/components/float-button/demo/group-menu.tsx @@ -3,7 +3,7 @@ import { FloatButton } from 'antd'; import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons'; const App: React.FC = () => ( - } type="primary" trigger='click'> + } type="primary" trigger="click"> } /> diff --git a/components/float-button/interface.ts b/components/float-button/interface.ts index eb17d2b1566c..26216be0e36f 100644 --- a/components/float-button/interface.ts +++ b/components/float-button/interface.ts @@ -36,8 +36,6 @@ export interface FloatButtonGroupProps extends FloatButtonProps { children: React.ReactNode; // 触发方式 (有触发方式为菜单模式） trigger?: FloatButtonGroupTrigger; - // 触发方式为 click 时，是否开启点击外侧自动关闭 - clickOutAutoClose?: boolean; // 受控展开 open?: boolean; // 关闭按钮自定义图标 From efe93b12c855d6085b4a3ca786dd84813695cdd8 Mon Sep 17 00:00:00 2001 From: BoyYangZai <2365539910@qq.com> Date: Wed, 14 Dec 2022 11:29:32 +0800 Subject: [PATCH 10/13] =?UTF-8?q?chore=EF=BC=9Aformat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/float-button/FloatButtonGroup.tsx | 32 +++++++++++--------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 1b2b7a89b6de..b2a47a9bb746 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -44,17 +44,19 @@ const FloatButtonGroup: React.FC = (props) => { const floatButtonGroupRef = useRef(null); const floatButtonRef = useRef(null); - const hoverTypeAction = { - onMouseEnter() { - setOpen(true); - onOpenChange?.(true); - }, - onMouseLeave() { - setOpen(false); - onOpenChange?.(false); - }, - }; - const hoverAction = useMemo(() => (trigger === 'hover' ? hoverTypeAction : {}), [trigger]); + const hoverAction = useMemo(() => { + const hoverTypeAction = { + onMouseEnter() { + setOpen(true); + onOpenChange?.(true); + }, + onMouseLeave() { + setOpen(false); + onOpenChange?.(false); + }, + }; + return trigger === 'hover' ? hoverTypeAction : {}; + }, [trigger]); const handleOpenChange = () => { setOpen((prevState) => { @@ -65,12 +67,14 @@ const FloatButtonGroup: React.FC = (props) => { const onClick = useCallback( (e: MouseEvent) => { - if (trigger !== 'click') return; if (floatButtonGroupRef.current!.contains(e.target as Node)) { - if (!floatButtonRef.current!.contains(e.target as Node)) return; - handleOpenChange(); + if (floatButtonRef.current!.contains(e.target as Node)) { + handleOpenChange(); + } return; } + setOpen(false); + onOpenChange?.(false); }, [trigger], ); From b7036963125424054fd31e6b39f40b075c8259fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= <94534613+BoyYangzai@users.noreply.github.com> Date: Wed, 14 Dec 2022 11:57:38 +0800 Subject: [PATCH 11/13] =?UTF-8?q?=E8=BF=98=E5=8E=9Fmd?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/float-button/demo/group-menu.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/float-button/demo/group-menu.md b/components/float-button/demo/group-menu.md index 7c78f7fb1bca..1f53c07a72b0 100644 --- a/components/float-button/demo/group-menu.md +++ b/components/float-button/demo/group-menu.md @@ -1,7 +1,7 @@ ## zh-CN -设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。若设置为 `click`，点击外侧会**自动关闭** `menu` +设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。 ## en-US -Open menu mode with `trigger`, which could be `hover` or `click`. if set to `click`, `clickOutAutoClose` is enabled by default +Open menu mode with `trigger`, which could be `hover` or `click`. From f470ad6a7e27aff104da7a2b5a3615e9bc8bba83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= <94534613+BoyYangzai@users.noreply.github.com> Date: Wed, 14 Dec 2022 11:58:03 +0800 Subject: [PATCH 12/13] Update group-menu.md --- components/float-button/demo/group-menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/float-button/demo/group-menu.md b/components/float-button/demo/group-menu.md index 1f53c07a72b0..e1d563dbf4c5 100644 --- a/components/float-button/demo/group-menu.md +++ b/components/float-button/demo/group-menu.md @@ -1,6 +1,6 @@ ## zh-CN -设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。 +设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式 ## en-US From fcb3ff8574ec476dfbb5583787479ed662f2bf64 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 14 Dec 2022 13:35:02 +0800 Subject: [PATCH 13/13] Update FloatButtonGroup.tsx --- components/float-button/FloatButtonGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index b2a47a9bb746..d67e3a6edf95 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -42,7 +42,7 @@ const FloatButtonGroup: React.FC = (props) => { const [open, setOpen] = useMergedState(false, { value: props.open }); const floatButtonGroupRef = useRef(null); - const floatButtonRef = useRef(null); + const floatButtonRef = useRef(null); const hoverAction = useMemo(() => { const hoverTypeAction = {