index.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _VerticalAlignTopOutlined = _interopRequireDefault(require("@ant-design/icons/VerticalAlignTopOutlined"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _rcMotion = _interopRequireDefault(require("rc-motion"));
  13. var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
  14. var _getScroll = _interopRequireDefault(require("../_util/getScroll"));
  15. var _reactNode = require("../_util/reactNode");
  16. var _scrollTo = _interopRequireDefault(require("../_util/scrollTo"));
  17. var _throttleByAnimationFrame = _interopRequireDefault(require("../_util/throttleByAnimationFrame"));
  18. var _warning = require("../_util/warning");
  19. var _configProvider = require("../config-provider");
  20. var _style = _interopRequireDefault(require("./style"));
  21. const BackTop = props => {
  22. const {
  23. prefixCls: customizePrefixCls,
  24. className,
  25. rootClassName,
  26. visibilityHeight = 400,
  27. target,
  28. onClick,
  29. duration = 450
  30. } = props;
  31. const [visible, setVisible] = React.useState(visibilityHeight === 0);
  32. const ref = React.useRef(null);
  33. const getDefaultTarget = () => {
  34. var _a;
  35. return ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window;
  36. };
  37. const handleScroll = (0, _throttleByAnimationFrame.default)(e => {
  38. const scrollTop = (0, _getScroll.default)(e.target);
  39. setVisible(scrollTop >= visibilityHeight);
  40. });
  41. if (process.env.NODE_ENV !== 'production') {
  42. const warning = (0, _warning.devUseWarning)('BackTop');
  43. warning.deprecated(false, 'BackTop', 'FloatButton.BackTop');
  44. }
  45. React.useEffect(() => {
  46. const getTarget = target || getDefaultTarget;
  47. const container = getTarget();
  48. handleScroll({
  49. target: container
  50. });
  51. container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll);
  52. return () => {
  53. handleScroll.cancel();
  54. container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
  55. };
  56. }, [target]);
  57. const scrollToTop = e => {
  58. (0, _scrollTo.default)(0, {
  59. getContainer: target || getDefaultTarget,
  60. duration
  61. });
  62. onClick === null || onClick === void 0 ? void 0 : onClick(e);
  63. };
  64. const {
  65. getPrefixCls,
  66. direction
  67. } = React.useContext(_configProvider.ConfigContext);
  68. const prefixCls = getPrefixCls('back-top', customizePrefixCls);
  69. const rootPrefixCls = getPrefixCls();
  70. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  71. const classString = (0, _classnames.default)(hashId, cssVarCls, prefixCls, {
  72. [`${prefixCls}-rtl`]: direction === 'rtl'
  73. }, className, rootClassName);
  74. // fix https://fb.me/react-unknown-prop
  75. const divProps = (0, _omit.default)(props, ['prefixCls', 'className', 'rootClassName', 'children', 'visibilityHeight', 'target']);
  76. const defaultElement = /*#__PURE__*/React.createElement("div", {
  77. className: `${prefixCls}-content`
  78. }, /*#__PURE__*/React.createElement("div", {
  79. className: `${prefixCls}-icon`
  80. }, /*#__PURE__*/React.createElement(_VerticalAlignTopOutlined.default, null)));
  81. return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({}, divProps, {
  82. className: classString,
  83. onClick: scrollToTop,
  84. ref: ref
  85. }), /*#__PURE__*/React.createElement(_rcMotion.default, {
  86. visible: visible,
  87. motionName: `${rootPrefixCls}-fade`
  88. }, ({
  89. className: motionClassName
  90. }) => (0, _reactNode.cloneElement)(props.children || defaultElement, ({
  91. className: cloneCls
  92. }) => ({
  93. className: (0, _classnames.default)(motionClassName, cloneCls)
  94. })))));
  95. };
  96. if (process.env.NODE_ENV !== 'production') {
  97. BackTop.displayName = 'BackTop';
  98. }
  99. var _default = exports.default = BackTop;