mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
164 lines
5.3 KiB
TypeScript
164 lines
5.3 KiB
TypeScript
import React 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 { useEvent } from 'rc-util';
|
|
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
|
|
|
import { useZIndex } from '../_util/hooks/useZIndex';
|
|
import { devUseWarning } from '../_util/warning';
|
|
import type { ConfigConsumerProps } from '../config-provider';
|
|
import { ConfigContext } from '../config-provider';
|
|
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
|
import { FloatButtonGroupProvider } from './context';
|
|
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
|
|
import type { FloatButtonGroupProps } from './interface';
|
|
import useStyle from './style';
|
|
|
|
const FloatButtonGroup: React.FC<Readonly<FloatButtonGroupProps>> = (props) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
className,
|
|
style,
|
|
shape = 'circle',
|
|
type = 'default',
|
|
placement = 'top',
|
|
icon = <FileTextOutlined />,
|
|
closeIcon,
|
|
description,
|
|
trigger,
|
|
children,
|
|
onOpenChange,
|
|
open: customOpen,
|
|
onClick: onTriggerButtonClick,
|
|
...floatButtonProps
|
|
} = props;
|
|
|
|
const { direction, getPrefixCls, floatButtonGroup } =
|
|
React.useContext<ConfigConsumerProps>(ConfigContext);
|
|
|
|
const mergedCloseIcon = closeIcon ?? floatButtonGroup?.closeIcon ?? <CloseOutlined />;
|
|
|
|
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
|
|
const rootCls = useCSSVarCls(prefixCls);
|
|
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
|
|
|
const groupPrefixCls = `${prefixCls}-group`;
|
|
|
|
const isMenuMode = trigger && ['click', 'hover'].includes(trigger);
|
|
const isValidPlacement = placement && ['top', 'left', 'right', 'bottom'].includes(placement);
|
|
|
|
const groupCls = classNames(groupPrefixCls, hashId, cssVarCls, rootCls, className, {
|
|
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
|
|
[`${groupPrefixCls}-${shape}`]: shape,
|
|
[`${groupPrefixCls}-${shape}-shadow`]: !isMenuMode,
|
|
[`${groupPrefixCls}-${placement}`]: isMenuMode && isValidPlacement, // 只有菜单模式才支持弹出方向
|
|
});
|
|
|
|
// ============================ zIndex ============================
|
|
const [zIndex] = useZIndex('FloatButton', style?.zIndex as number);
|
|
|
|
const mergedStyle: React.CSSProperties = { ...style, zIndex };
|
|
|
|
const wrapperCls = classNames(hashId, `${groupPrefixCls}-wrap`);
|
|
|
|
const [open, setOpen] = useMergedState(false, { value: customOpen });
|
|
|
|
const floatButtonGroupRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
// ========================== Open ==========================
|
|
const hoverTrigger = trigger === 'hover';
|
|
const clickTrigger = trigger === 'click';
|
|
|
|
const triggerOpen = useEvent((nextOpen: boolean) => {
|
|
if (open !== nextOpen) {
|
|
setOpen(nextOpen);
|
|
onOpenChange?.(nextOpen);
|
|
}
|
|
});
|
|
|
|
// ===================== Trigger: Hover =====================
|
|
const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = () => {
|
|
if (hoverTrigger) {
|
|
triggerOpen(true);
|
|
}
|
|
};
|
|
|
|
const onMouseLeave: React.MouseEventHandler<HTMLDivElement> = () => {
|
|
if (hoverTrigger) {
|
|
triggerOpen(false);
|
|
}
|
|
};
|
|
|
|
// ===================== Trigger: Click =====================
|
|
const onInternalTriggerButtonClick: FloatButtonGroupProps['onClick'] = (e) => {
|
|
if (clickTrigger) {
|
|
triggerOpen(!open);
|
|
}
|
|
onTriggerButtonClick?.(e);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
if (clickTrigger) {
|
|
const onDocClick = (e: MouseEvent) => {
|
|
// Skip if click on the group
|
|
if (floatButtonGroupRef.current?.contains(e.target as Node)) {
|
|
return;
|
|
}
|
|
triggerOpen(false);
|
|
};
|
|
document.addEventListener('click', onDocClick, { capture: true });
|
|
return () => document.removeEventListener('click', onDocClick, { capture: true });
|
|
}
|
|
}, [clickTrigger]);
|
|
|
|
// ======================== Warning =========================
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const warning = devUseWarning('FloatButton.Group');
|
|
|
|
warning(
|
|
!('open' in props) || !!trigger,
|
|
'usage',
|
|
'`open` need to be used together with `trigger`',
|
|
);
|
|
}
|
|
|
|
// ========================= Render =========================
|
|
return wrapCSSVar(
|
|
<FloatButtonGroupProvider value={shape}>
|
|
<div
|
|
ref={floatButtonGroupRef}
|
|
className={groupCls}
|
|
style={mergedStyle}
|
|
// Hover trigger
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
{isMenuMode ? (
|
|
<>
|
|
<CSSMotion visible={open} motionName={`${groupPrefixCls}-wrap`}>
|
|
{({ className: motionClassName }) => (
|
|
<div className={classNames(motionClassName, wrapperCls)}>{children}</div>
|
|
)}
|
|
</CSSMotion>
|
|
<FloatButton
|
|
type={type}
|
|
icon={open ? mergedCloseIcon : icon}
|
|
description={description}
|
|
aria-label={props['aria-label']}
|
|
className={`${groupPrefixCls}-trigger`}
|
|
onClick={onInternalTriggerButtonClick}
|
|
{...floatButtonProps}
|
|
/>
|
|
</>
|
|
) : (
|
|
children
|
|
)}
|
|
</div>
|
|
</FloatButtonGroupProvider>,
|
|
);
|
|
};
|
|
|
|
export default FloatButtonGroup;
|