linkmore-design/lib/back-top/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _VerticalAlignTopOutlined = _interopRequireDefault(require("@ant-design/icons/VerticalAlignTopOutlined"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcMotion = _interopRequireDefault(require("rc-motion"));
var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _getScroll = _interopRequireDefault(require("../_util/getScroll"));
var _reactNode = require("../_util/reactNode");
var _scrollTo = _interopRequireDefault(require("../_util/scrollTo"));
var _throttleByAnimationFrame = require("../_util/throttleByAnimationFrame");
const BackTopContent = props => {
  const {
    prefixCls,
    rootPrefixCls,
    children,
    visible
  } = props;
  const defaultElement = /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-content`
  }, /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-icon`
  }, /*#__PURE__*/React.createElement(_VerticalAlignTopOutlined.default, null)));
  return /*#__PURE__*/React.createElement(_rcMotion.default, {
    visible: visible,
    motionName: `${rootPrefixCls}-fade`
  }, ({
    className: motionClassName
  }) => (0, _reactNode.cloneElement)(children || defaultElement, ({
    className
  }) => ({
    className: (0, _classnames.default)(motionClassName, className)
  })));
};
const BackTop = props => {
  const [visible, setVisible] = (0, _useMergedState.default)(false, {
    value: props.visible
  });
  const ref = /*#__PURE__*/React.createRef();
  const scrollEvent = React.useRef(null);
  const getDefaultTarget = () => ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
  const handleScroll = (0, _throttleByAnimationFrame.throttleByAnimationFrame)(e => {
    const {
      visibilityHeight = 400
    } = props;
    const scrollTop = (0, _getScroll.default)(e.target, true);
    setVisible(scrollTop > visibilityHeight);
  });
  const bindScrollEvent = () => {
    const {
      target
    } = props;
    const getTarget = target || getDefaultTarget;
    const container = getTarget();
    scrollEvent.current = (0, _addEventListener.default)(container, 'scroll', e => {
      handleScroll(e);
    });
    handleScroll({
      target: container
    });
  };
  React.useEffect(() => {
    bindScrollEvent();
    return () => {
      if (scrollEvent.current) {
        scrollEvent.current.remove();
      }
      handleScroll.cancel();
    };
  }, [props.target]);
  const scrollToTop = e => {
    const {
      onClick,
      target,
      duration = 450
    } = props;
    (0, _scrollTo.default)(0, {
      getContainer: target || getDefaultTarget,
      duration
    });
    if (typeof onClick === 'function') {
      onClick(e);
    }
  };
  const {
    getPrefixCls,
    direction
  } = React.useContext(_configProvider.ConfigContext);
  const {
    prefixCls: customizePrefixCls,
    className = ''
  } = props;
  const prefixCls = getPrefixCls('back-top', customizePrefixCls);
  const rootPrefixCls = getPrefixCls();
  const classString = (0, _classnames.default)(prefixCls, {
    [`${prefixCls}-rtl`]: direction === 'rtl'
  }, className);

  // fix https://fb.me/react-unknown-prop
  const divProps = (0, _omit.default)(props, ['prefixCls', 'className', 'children', 'visibilityHeight', 'target', 'visible']);
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, divProps, {
    className: classString,
    onClick: scrollToTop,
    ref: ref
  }), /*#__PURE__*/React.createElement(BackTopContent, {
    prefixCls: prefixCls,
    rootPrefixCls: rootPrefixCls,
    visible: visible
  }, props.children));
};
var _default = /*#__PURE__*/React.memo(BackTop);
exports.default = _default;