This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+16
View File
@@ -0,0 +1,16 @@
import React from 'react';
export interface BackTopProps {
visibilityHeight?: number;
onClick?: React.MouseEventHandler<HTMLElement>;
target?: () => HTMLElement | Window | Document;
prefixCls?: string;
className?: string;
rootClassName?: string;
style?: React.CSSProperties;
duration?: number;
}
/**
* @deprecated Please use `FloatButton.BackTop` instead.
*/
declare const BackTop: React.FC<React.PropsWithChildren<BackTopProps>>;
export default BackTop;
+97
View File
@@ -0,0 +1,97 @@
"use client";
import React from 'react';
import VerticalAlignTopOutlined from "@ant-design/icons/es/icons/VerticalAlignTopOutlined";
import CSSMotion from '@rc-component/motion';
import omit from "@rc-component/util/es/omit";
import { clsx } from 'clsx';
import getScroll from '../_util/getScroll';
import { cloneElement } from '../_util/reactNode';
import scrollTo from '../_util/scrollTo';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import { devUseWarning } from '../_util/warning';
import { ConfigContext } from '../config-provider';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useStyle from './style';
/**
* @deprecated Please use `FloatButton.BackTop` instead.
*/
const BackTop = props => {
const {
prefixCls: customizePrefixCls,
className,
rootClassName,
visibilityHeight = 400,
target,
onClick,
duration = 450,
children
} = props;
const [visible, setVisible] = React.useState(visibilityHeight === 0);
const ref = React.useRef(null);
const getDefaultTarget = () => ref.current?.ownerDocument || window;
const handleScroll = throttleByAnimationFrame(e => {
const scrollTop = getScroll(e.target);
setVisible(scrollTop >= visibilityHeight);
});
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('BackTop');
warning.deprecated(false, 'BackTop', 'FloatButton.BackTop');
}
React.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 = e => {
scrollTo(0, {
getContainer: target || getDefaultTarget,
duration
});
onClick?.(e);
};
const {
getPrefixCls,
direction
} = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const rootCls = useCSSVarCls(prefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const classString = clsx(hashId, cssVarCls, prefixCls, {
[`${prefixCls}-rtl`]: direction === 'rtl'
}, className, rootClassName);
// fix https://fb.me/react-unknown-prop
const divProps = omit(props, ['prefixCls', 'className', 'rootClassName', 'children', 'visibilityHeight', 'target']);
const defaultElement = /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-content`
}, /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-icon`
}, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null)));
return /*#__PURE__*/React.createElement("div", {
...divProps,
className: classString,
onClick: scrollToTop,
ref: ref
}, /*#__PURE__*/React.createElement(CSSMotion, {
visible: visible,
motionName: `${rootPrefixCls}-fade`
}, ({
className: motionClassName
}) => cloneElement(children || defaultElement, ({
className: cloneCls
}) => ({
className: clsx(motionClassName, cloneCls)
}))));
};
if (process.env.NODE_ENV !== 'production') {
BackTop.displayName = 'Deprecated.BackTop';
}
export default BackTop;
+12
View File
@@ -0,0 +1,12 @@
import type { GetDefaultToken } from '../../theme/internal';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
/**
* @desc 弹出层的 z-index
* @descEN z-index of popup
*/
zIndexPopup: number;
}
export declare const prepareComponentToken: GetDefaultToken<'BackTop'>;
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+93
View File
@@ -0,0 +1,93 @@
import { unit } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import { genStyleHooks, mergeToken } from '../../theme/internal';
// ============================== Shared ==============================
const genSharedBackTopStyle = token => {
const {
componentCls,
backTopFontSize,
backTopSize,
zIndexPopup
} = token;
return {
[componentCls]: {
...resetComponent(token),
position: 'fixed',
insetInlineEnd: token.backTopInlineEnd,
insetBlockEnd: token.backTopBlockEnd,
zIndex: zIndexPopup,
width: 40,
height: 40,
cursor: 'pointer',
'&:empty': {
display: 'none'
},
[`${componentCls}-content`]: {
width: backTopSize,
height: backTopSize,
overflow: 'hidden',
color: token.backTopColor,
textAlign: 'center',
backgroundColor: token.backTopBackground,
borderRadius: backTopSize,
transition: `all ${token.motionDurationMid}`,
'&:hover': {
backgroundColor: token.backTopHoverBackground,
transition: `all ${token.motionDurationMid}`
}
},
// change to .backtop .backtop-icon
[`${componentCls}-icon`]: {
fontSize: backTopFontSize,
lineHeight: unit(backTopSize)
}
}
};
};
const genMediaBackTopStyle = token => {
const {
componentCls,
screenMD,
screenXS,
backTopInlineEndMD,
backTopInlineEndXS
} = token;
return {
[`@media (max-width: ${unit(screenMD)})`]: {
[componentCls]: {
insetInlineEnd: backTopInlineEndMD
}
},
[`@media (max-width: ${unit(screenXS)})`]: {
[componentCls]: {
insetInlineEnd: backTopInlineEndXS
}
}
};
};
export const prepareComponentToken = token => ({
zIndexPopup: token.zIndexBase + 10
});
// ============================== Export ==============================
export default genStyleHooks('BackTop', token => {
const {
fontSizeHeading3,
colorTextDescription,
colorTextLightSolid,
colorText,
controlHeightLG,
calc
} = token;
const backTopToken = mergeToken(token, {
backTopBackground: colorTextDescription,
backTopColor: colorTextLightSolid,
backTopHoverBackground: colorText,
backTopFontSize: fontSizeHeading3,
backTopSize: controlHeightLG,
backTopBlockEnd: calc(controlHeightLG).mul(1.25).equal(),
backTopInlineEnd: calc(controlHeightLG).mul(2.5).equal(),
backTopInlineEndMD: calc(controlHeightLG).mul(1.5).equal(),
backTopInlineEndXS: calc(controlHeightLG).mul(0.5).equal()
});
return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)];
}, prepareComponentToken);