@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
71 lines (70 loc) • 2.9 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
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 { getSystemInfo, pageScrollTo, usePageScroll } from "@tarojs/taro";
import { View } from "@tarojs/components";
import classNames from "classnames";
import { Top } from "@nutui/icons-react-taro";
import { ComponentDefaults } from "../../utils/typings";
import HoverButton from "../hoverbutton/index";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
threshold: 200,
zIndex: 900,
duration: 1000
});
export var BackTop = function(props) {
var _$_object_spread = _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 = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-show"), backTop), className);
var systemInfo = useRef({});
useEffect(function() {
getSystemInfo().then(function(res) {
systemInfo.current = res;
});
}, []);
var onScroll = useCallback(function(res) {
var scrollTop = res.scrollTop;
setBackTop(scrollTop >= threshold);
}, [
threshold
]);
// 监听用户滑动页面事件
usePageScroll(onScroll);
useEffect(function() {
if (!scrollRes) return;
onScroll(scrollRes);
}, [
onScroll,
scrollRes
]);
// 返回顶部点击事件
var goTop = useCallback(function(e) {
onClick === null || onClick === void 0 ? void 0 : onClick(e);
pageScrollTo({
scrollTop: 0,
duration: duration > 0 ? duration : 0
});
}, [
duration,
onClick
]);
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(View, {
className: "nut-hoverbutton-item-container",
onClick: function(e) {
goTop(e);
}
}, children));
};
BackTop.displayName = 'NutBackTop';