forked from ant-design/ant-design
-
Notifications
You must be signed in to change notification settings - Fork 2
/
FloatButtonGroup.tsx
113 lines (101 loc) · 3.47 KB
/
FloatButtonGroup.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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';
import CSSMotion from 'rc-motion';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import { FloatButtonGroupProvider } from './context';
import type { FloatButtonGroupProps } from './interface';
import useStyle from './style';
const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
const {
prefixCls: customizePrefixCls,
className,
style,
shape = 'circle',
type = 'default',
icon = <FileTextOutlined />,
closeIcon = <CloseOutlined />,
description,
trigger,
children,
onOpenChange,
} = props;
const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const groupPrefixCls = `${prefixCls}-group`;
const groupCls = classNames(groupPrefixCls, hashId, className, {
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
[`${groupPrefixCls}-${shape}`]: shape,
[`${groupPrefixCls}-${shape}-shadow`]: !trigger,
});
const wrapperCls = classNames(hashId, `${groupPrefixCls}-wrap`);
const [open, setOpen] = useMergedState(false, { value: props.open });
const floatButtonGroupRef = useRef<HTMLDivElement>(null);
const floatButtonRef = useRef<HTMLButtonElement>(null);
const hoverTypeAction = {
onMouseEnter() {
setOpen(true);
onOpenChange?.(true);
},
onMouseLeave() {
setOpen(false);
onOpenChange?.(false);
},
};
const hoverAction = useMemo(() => (trigger === 'hover' ? hoverTypeAction : {}), [trigger]);
const handleOpenChange = () => {
setOpen((prevState) => {
onOpenChange?.(!prevState);
return !prevState;
});
};
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();
return;
}
},
[trigger],
);
useEffect(() => {
if (trigger === 'click') {
document.addEventListener('click', onClick);
return () => {
document.removeEventListener('click', onClick);
};
}
}, [trigger]);
return wrapSSR(
<FloatButtonGroupProvider value={shape}>
<div ref={floatButtonGroupRef} className={groupCls} style={style} {...hoverAction}>
{trigger && ['click', 'hover'].includes(trigger) ? (
<>
<CSSMotion visible={open} motionName={`${groupPrefixCls}-wrap`}>
{({ className: motionClassName }) => (
<div className={classNames(motionClassName, wrapperCls)}>{children}</div>
)}
</CSSMotion>
<FloatButton
ref={floatButtonRef}
type={type}
shape={shape}
icon={open ? closeIcon : icon}
description={description}
/>
</>
) : (
children
)}
</div>
</FloatButtonGroupProvider>,
);
};
export default memo(FloatButtonGroup);