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

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

import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { Top } from "@nutui/icons-react";
import { ComponentDefaults } from "../../utils/typings";
import requestAniFrame, { cancelRaf } from "../../utils/raf";
import HoverButton from "../hoverbutton/index";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    target: '',
    threshold: 200,
    zIndex: 900,
    duration: 1000
});
export var BackTop = function(props) {
    var _$_object_spread = _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 = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
    var _useState1 = _sliced_to_array(useState(0), 2), scrollTop = _useState1[0], setScrollTop = _useState1[1];
    var startTime = useRef(0);
    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-show"), backTop), className);
    var scrollEl = useRef(null);
    var scrollListener = useCallback(function() {
        var top = null;
        if (_instanceof(scrollEl.current, Window)) {
            top = scrollEl.current.scrollY;
        } else {
            top = scrollEl.current.scrollTop;
        }
        setScrollTop(top);
        setBackTop(top >= threshold);
    }, [
        threshold
    ]);
    var init = 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
    ]);
    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 = useCallback(function() {
        var y = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
        if (_instanceof(scrollEl.current, Window)) {
            window.scrollTo(0, y);
        } else {
            scrollEl.current.scrollTop = y;
            window.scrollTo(0, y);
        }
    }, []);
    var scrollAnimation = useCallback(function() {
        var cid = requestAniFrame(function fn() {
            var t = duration - Math.max(0, startTime.current - +new Date() + duration / 2);
            var y = t * -scrollTop / duration + scrollTop;
            scroll(y);
            cid = requestAniFrame(fn);
            if (t === duration || y === 0) {
                cancelRaf(cid);
            }
        });
    }, [
        duration,
        scroll,
        scrollTop,
        startTime
    ]);
    var goTop = 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.createElement(HoverButton, {
        className: cls,
        style: _object_spread({
            zIndex: zIndex
        }, style),
        icon: !children && (icon || /*#__PURE__*/ React.createElement(Top, null)),
        onClick: function(e) {
            goTop(e);
        }
    }, children && /*#__PURE__*/ React.createElement("div", {
        className: "nut-hoverbutton-item-container",
        onClick: function(e) {
            goTop(e);
        }
    }, children));
};
BackTop.displayName = 'NutBackTop';