File size: 3,676 Bytes
5941ac2 | 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 | import React, { useContext, useEffect, useState } from 'react';
import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
import CSSMotion from '@rc-component/motion';
import { composeRef } from '@rc-component/util/lib/ref';
import { clsx } from 'clsx';
import getScroll from '../_util/getScroll';
import scrollTo from '../_util/scrollTo';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import { useComponentConfig } from '../config-provider/context';
import { GroupContext } from './context';
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
import type { FloatButtonElement, FloatButtonProps, FloatButtonRef } from './FloatButton';
export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
visibilityHeight?: number;
onClick?: React.MouseEventHandler<FloatButtonElement>;
target?: () => HTMLElement | Window | Document;
prefixCls?: string;
children?: React.ReactNode;
className?: string;
rootClassName?: string;
style?: React.CSSProperties;
duration?: number;
}
const defaultIcon = <VerticalAlignTopOutlined />;
const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
const { backTopIcon: contextIcon } = useComponentConfig('floatButton');
const {
prefixCls: customizePrefixCls,
className,
type = 'default',
shape = 'circle',
visibilityHeight = 400,
icon,
target,
onClick,
duration = 450,
...restProps
} = props;
const mergedIcon = icon ?? contextIcon ?? defaultIcon;
const [visible, setVisible] = useState<boolean>(visibilityHeight === 0);
const internalRef = React.useRef<FloatButtonRef['nativeElement']>(null);
React.useImperativeHandle(ref, () => ({
nativeElement: internalRef.current,
}));
const getDefaultTarget = (): HTMLElement | Document | Window =>
internalRef.current?.ownerDocument || window;
const handleScroll = throttleByAnimationFrame(
(e: React.UIEvent<HTMLElement, UIEvent> | { target: any }) => {
const scrollTop = getScroll(e.target);
setVisible(scrollTop >= visibilityHeight);
},
);
useEffect(() => {
const getTarget = target || getDefaultTarget;
const container = getTarget();
handleScroll({ target: container });
container?.addEventListener('scroll', handleScroll);
return () => {
handleScroll.cancel();
container?.removeEventListener('scroll', handleScroll);
};
}, [target]);
const scrollToTop: React.MouseEventHandler<FloatButtonElement> = (e) => {
scrollTo(0, { getContainer: target || getDefaultTarget, duration });
onClick?.(e);
};
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const groupShape = useContext(GroupContext)?.shape;
const mergedShape = groupShape || shape;
const contentProps: FloatButtonProps = {
prefixCls,
icon: mergedIcon,
type,
shape: mergedShape,
...restProps,
};
return (
<CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>
{({ className: motionClassName }, setRef) => (
<FloatButton
ref={composeRef(internalRef, setRef)}
{...contentProps}
onClick={scrollToTop}
className={clsx(className, motionClassName)}
/>
)}
</CSSMotion>
);
});
if (process.env.NODE_ENV !== 'production') {
BackTop.displayName = 'FloatButton.BackTop';
}
export default BackTop;
|