@nutui/nutui-react/dist/cjs/packages/backtop/backtop.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "BackTop", {
    enumerable: true,
    get: function() {
        return BackTop;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _instanceof = require("@swc/helpers/_/_instanceof");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreact = require("@nutui/icons-react");
var _typings = require("../../utils/typings");
var _raf = /*#__PURE__*/ _interop_require_wildcard._(require("../../utils/raf"));
var _index = /*#__PURE__*/ _interop_require_default._(require("../hoverbutton/index"));
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    target: '',
    threshold: 200,
    zIndex: 900,
    duration: 1000
});
var BackTop = function BackTop(props) {
    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, target = _$_object_spread.target, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
    var classPrefix = 'nut-backtop';
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), backTop = _useState[0], setBackTop = _useState[1];
    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollTop = _useState1[0], setScrollTop = _useState1[1];
    var startTime = (0, _react.useRef)(0);
    var cls = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-show"), backTop), className);
    var scrollEl = (0, _react.useRef)(null);
    var scrollListener = (0, _react.useCallback)(function() {
        var top = null;
        if ((0, _instanceof._)(scrollEl.current, Window)) {
            top = scrollEl.current.scrollY;
        } else {
            top = scrollEl.current.scrollTop;
        }
        setScrollTop(top);
        setBackTop(top >= threshold);
    }, [
        threshold
    ]);
    var init = (0, _react.useCallback)(function() {
        var _scrollEl_current, _scrollEl_current1;
        if (target && document.getElementById(target)) {
            scrollEl.current = document.getElementById(target);
        } else {
            scrollEl.current = window;
        }
        (_scrollEl_current = scrollEl.current) === null || _scrollEl_current === void 0 ? void 0 : _scrollEl_current.addEventListener('scroll', scrollListener, false);
        (_scrollEl_current1 = scrollEl.current) === null || _scrollEl_current1 === void 0 ? void 0 : _scrollEl_current1.addEventListener('resize', scrollListener, false);
    }, [
        scrollListener,
        target
    ]);
    (0, _react.useEffect)(function() {
        init();
        return function() {
            var _scrollEl_current, _scrollEl_current1;
            (_scrollEl_current = scrollEl.current) === null || _scrollEl_current === void 0 ? void 0 : _scrollEl_current.removeEventListener('scroll', scrollListener, false);
            (_scrollEl_current1 = scrollEl.current) === null || _scrollEl_current1 === void 0 ? void 0 : _scrollEl_current1.removeEventListener('resize', scrollListener, false);
        };
    }, [
        init,
        scrollListener
    ]);
    var scroll = (0, _react.useCallback)(function() {
        var y = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
        if ((0, _instanceof._)(scrollEl.current, Window)) {
            window.scrollTo(0, y);
        } else {
            scrollEl.current.scrollTop = y;
            window.scrollTo(0, y);
        }
    }, []);
    var scrollAnimation = (0, _react.useCallback)(function() {
        var cid = (0, _raf.default)(function fn() {
            var t = duration - Math.max(0, startTime.current - +new Date() + duration / 2);
            var y = t * -scrollTop / duration + scrollTop;
            scroll(y);
            cid = (0, _raf.default)(fn);
            if (t === duration || y === 0) {
                (0, _raf.cancelRaf)(cid);
            }
        });
    }, [
        duration,
        scroll,
        scrollTop,
        startTime
    ]);
    var goTop = (0, _react.useCallback)(function(e) {
        onClick === null || onClick === void 0 ? void 0 : onClick(e);
        var otime = +new Date();
        startTime.current = otime;
        duration > 0 ? scrollAnimation() : scroll();
    }, [
        duration,
        onClick,
        scroll,
        scrollAnimation
    ]);
    return /*#__PURE__*/ _react.default.createElement(_index.default, {
        className: cls,
        style: (0, _object_spread._)({
            zIndex: zIndex
        }, style),
        icon: !children && (icon || /*#__PURE__*/ _react.default.createElement(_iconsreact.Top, null)),
        onClick: function onClick(e) {
            goTop(e);
        }
    }, children && /*#__PURE__*/ _react.default.createElement("div", {
        className: "nut-hoverbutton-item-container",
        onClick: function onClick(e) {
            goTop(e);
        }
    }, children));
};
BackTop.displayName = 'NutBackTop';