-
-
Notifications
You must be signed in to change notification settings - Fork 46.8k
/
FloatButtonGroup.tsx
127 lines (115 loc) · 3.88 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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';
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,
clickOutAutoClose,
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 FloatButtonEL = useRef(null);
const clickAction = useRef<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>>({});
const hoverAction = useRef<React.HTMLAttributes<HTMLDivElement>>({});
if (trigger === 'click') {
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') {
hoverAction.current = {
onMouseEnter() {
setOpen(true);
onOpenChange?.(true);
},
onMouseLeave() {
setOpen(false);
onOpenChange?.(false);
},
};
}
return wrapSSR(
<FloatButtonGroupProvider value={shape}>
<div className={groupCls} style={style} {...hoverAction.current}>
{trigger && ['click', 'hover'].includes(trigger) ? (
<>
<CSSMotion visible={open} motionName={`${groupPrefixCls}-wrap`}>
{({ className: motionClassName }) => (
<div className={classNames(motionClassName, wrapperCls)}>{children}</div>
)}
</CSSMotion>
<FloatButton
ref={FloatButtonEL}
type={type}
shape={shape}
icon={open ? closeIcon : icon}
description={description}
{...clickAction.current}
/>
</>
) : (
children
)}
</div>
</FloatButtonGroupProvider>,
);
};
export default memo(FloatButtonGroup);