@nutui/nutui-react-taro/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 _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 _taro = require("@tarojs/taro");
var _components = require("@tarojs/components");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreacttaro = require("@nutui/icons-react-taro");
var _typings = require("../../utils/typings");
var _index = /*#__PURE__*/ _interop_require_default._(require("../hoverbutton/index"));
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    threshold: 200,
    zIndex: 900,
    duration: 1000
});
var BackTop = function BackTop(props) {
    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, 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 cls = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-show"), backTop), className);
    var systemInfo = (0, _react.useRef)({});
    (0, _react.useEffect)(function() {
        (0, _taro.getSystemInfo)().then(function(res) {
            systemInfo.current = res;
        });
    }, []);
    var onScroll = (0, _react.useCallback)(function(res) {
        var scrollTop = res.scrollTop;
        setBackTop(scrollTop >= threshold);
    }, [
        threshold
    ]);
    // 监听用户滑动页面事件
    (0, _taro.usePageScroll)(onScroll);
    (0, _react.useEffect)(function() {
        if (!scrollRes) return;
        onScroll(scrollRes);
    }, [
        onScroll,
        scrollRes
    ]);
    // 返回顶部点击事件
    var goTop = (0, _react.useCallback)(function(e) {
        onClick === null || onClick === void 0 ? void 0 : onClick(e);
        (0, _taro.pageScrollTo)({
            scrollTop: 0,
            duration: duration > 0 ? duration : 0
        });
    }, [
        duration,
        onClick
    ]);
    return /*#__PURE__*/ _react.default.createElement(_index.default, {
        className: cls,
        style: (0, _object_spread._)({
            zIndex: zIndex
        }, style),
        icon: !children && (icon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Top, null)),
        onClick: function onClick(e) {
            goTop(e);
        }
    }, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "nut-hoverbutton-item-container",
        onClick: function onClick(e) {
            goTop(e);
        }
    }, children));
};
BackTop.displayName = 'NutBackTop';