@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/cjs/packages/avatar/style/avatar.scss

@@ -1,6 +1,13 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+
   &-round {
     border-radius: 999px;
     overflow: hidden;
@@ -28,45 +35,23 @@
     background-size: 100% 100%;
   }
 
-  .nut-icon-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-text {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
   }
 
   &-large {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-large-width;
     height: $avatar-large-height;
-
     &-img {
       width: $avatar-large-width;
       height: $avatar-large-height;
-      &-image {
-        width: $avatar-large-width;
-        height: $avatar-large-height;
-      }
     }
-
     &-icon {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
     &-text {
       width: $avatar-large-width;
       height: $avatar-large-height;
@@ -74,51 +59,13 @@
   }
 
   &-small {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-small-width;
     height: $avatar-small-height;
-
-    &-img-image {
-      width: $avatar-small-width;
-      height: $avatar-small-height;
-    }
-    &-icon {
-      // width: $avatar-small-width;
-      // height: $avatar-small-height;
-    }
     &-text {
       width: $avatar-small-width;
       height: $avatar-small-height;
     }
   }
-
-  &-normal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $avatar-normal-width;
-    height: $avatar-normal-height;
-
-    &-img-image {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-
-    &-icon {
-    }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-text {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-  }
 }
 
 // [dir='rtl'] .nut-avatar,

package/dist/cjs/packages/avatar/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-image {
   display: block;
   position: relative;
@@ -21,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -34,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 
@@ -73,6 +77,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +105,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,53 +118,19 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
 .nut-avatar-small-text {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
 }

package/dist/cjs/packages/avatarcropper/avatarcropper.js

@@ -21,6 +21,7 @@ var _taro = /*#__PURE__*/ _interop_require_wildcard._(require("@tarojs/taro"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _button = require("../button/button");
+var _configprovider = require("../configprovider/configprovider");
 var _typings = require("../../utils/typings");
 var _usetouch = require("../../utils/use-touch");
 var _utils = require("../../utils");
@@ -31,20 +32,20 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
         /*#__PURE__*/ _react.default.createElement(_button.Button, {
             type: "danger",
             key: "cancel"
-        }, "取消"),
+        }, "Cancel"),
         /*#__PURE__*/ _react.default.createElement(_button.Button, {
             key: "reset"
-        }, "重置"),
+        }, "Reset"),
         /*#__PURE__*/ _react.default.createElement(_button.Button, {
             key: "rotate"
-        }, "旋转"),
+        }, "Rotate"),
         /*#__PURE__*/ _react.default.createElement(_button.Button, {
             type: "success",
             key: "confirm"
-        }, "确认")
+        }, "Confirm")
     ],
     toolbarPosition: 'bottom',
-    editText: '编辑',
+    editText: 'Edit',
     sizeType: [
         'original',
         'compressed'
@@ -57,6 +58,24 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var classPrefix = "nut-avatar-cropper";
 var AvatarCropper = function AvatarCropper(props) {
+    var locale = (0, _configprovider.useConfig)().locale;
+    defaultProps.toolbar = [
+        /*#__PURE__*/ _react.default.createElement(_button.Button, {
+            type: "danger",
+            key: "cancel"
+        }, locale.cancel),
+        /*#__PURE__*/ _react.default.createElement(_button.Button, {
+            key: "reset"
+        }, locale.reset),
+        /*#__PURE__*/ _react.default.createElement(_button.Button, {
+            key: "rotate"
+        }, locale.avatarCropper.rotate),
+        /*#__PURE__*/ _react.default.createElement(_button.Button, {
+            type: "success",
+            key: "confirm"
+        }, locale.confirm)
+    ];
+    defaultProps.editText = locale.edit;
     var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, toolbar = _ref.toolbar, maxZoom = _ref.maxZoom, space = _ref.space, toolbarPosition = _ref.toolbarPosition, editText = _ref.editText, sizeType = _ref.sizeType, sourceType = _ref.sourceType, shape = _ref.shape, className = _ref.className, style = _ref.style, onConfirm = _ref.onConfirm, onCancel = _ref.onCancel, rest = (0, _object_without_properties._)(_ref, [
         "children",
         "toolbar",
@@ -77,7 +96,6 @@ var AvatarCropper = function AvatarCropper(props) {
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), visible = _useState[0], setVisible = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), moving = _useState1[0], setMoving = _useState1[1];
     var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), zooming = _useState2[0], setZooming = _useState2[1];
-    // 获取系统信息
     var systemInfo = _taro.default.getSystemInfoSync();
     // 支付宝基础库2.7.0以上支持，需要开启支付宝小程序canvas2d
     var showAlipayCanvas2D = (0, _react.useMemo)(function() {
@@ -128,9 +146,7 @@ var AvatarCropper = function AvatarCropper(props) {
             cropperCanvasContext: _taro.default.createCanvasContext(canvasAll.canvasId)
         }));
     }, []);
-    // 触摸
     var touch = (0, _usetouch.useTouch)();
-    // 高亮框样式
     var highlightStyle = (0, _react.useMemo)(function() {
         var width = "".concat(state.cropperWidth / pixelRatio, "px");
         var height = width;
@@ -212,13 +228,9 @@ var AvatarCropper = function AvatarCropper(props) {
         ctx.fillRect(0, 0, displayWidth, displayHeight);
         ctx.fillStyle = '#000';
         ctx.fillRect(space * pixelRatio, (displayHeight - cropperWidth) / 2, cropperWidth, cropperWidth);
-        // 绘制偏移量
         ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
-        // 绘制旋转角度
         ctx.rotate(Math.PI / 180 * angle);
-        // 绘制缩放
         ctx.scale(scale, scale);
-        // 绘制图片
         ctx.drawImage(src, x, y, width, height);
     }, [
         drawImage,
@@ -276,11 +288,8 @@ var AvatarCropper = function AvatarCropper(props) {
         ctx.fill();
         // 绘制偏移量
         ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
-        // 绘制旋转角度
         ctx.rotate(Math.PI / 180 * angle);
-        // 绘制缩放
         ctx.scale(scale, scale);
-        // 绘制图片
         ctx.drawImage(src, x, y, width, height);
         ctx.draw();
     }, [
@@ -309,7 +318,7 @@ var AvatarCropper = function AvatarCropper(props) {
         draw
     ]);
     // 设置绘制图片
-    var setDrawImgInfo = function() {
+    var setDrawImgInfo = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(image) {
             var displayWidth, cropperWidth, copyDrawImg, imgWidth, imgHeight, isPortrait, rate, scale;
             return (0, _ts_generator._)(this, function(_state) {
@@ -365,7 +374,6 @@ var AvatarCropper = function AvatarCropper(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    // 选择图片
     var chooseImage = function chooseImage() {
         _taro.default.chooseImage({
             count: 1,
@@ -379,8 +387,7 @@ var AvatarCropper = function AvatarCropper(props) {
             }
         });
     };
-    // 选择图片后回调
-    var imageChange = function() {
+    var imageChange = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(file) {
             return (0, _ts_generator._)(this, function(_state) {
                 _taro.default.getImageInfo({
@@ -398,7 +405,6 @@ var AvatarCropper = function AvatarCropper(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    // 重设缩放
     var resetScale = function resetScale(scale) {
         setState((0, _object_spread_props._)((0, _object_spread._)({}, state), {
             moveX: 0,
@@ -408,7 +414,6 @@ var AvatarCropper = function AvatarCropper(props) {
             defScale: scale || state.defScale
         }));
     };
-    // 设置缩放
     var setScale = function setScale(scale) {
         scale = (0, _utils.clamp)(scale, +0.3, +maxZoom + 1);
         if (scale !== state.scale) {
@@ -428,7 +433,6 @@ var AvatarCropper = function AvatarCropper(props) {
         startDistance: 0
     }), 2), startMove = _useState6[0], setStartMove = _useState6[1];
     var startMoveX = startMove.startMoveX, startMoveY = startMove.startMoveY, startScale = startMove.startScale, startDistance = startMove.startDistance;
-    // 触摸开始
     var onTouchStart = function onTouchStart(event) {
         var touches = event.touches;
         var offsetX = touch.offsetX;
@@ -447,7 +451,6 @@ var AvatarCropper = function AvatarCropper(props) {
             }));
         }
     };
-    // 触摸移动
     var onTouchMove = function onTouchMove(event) {
         var touches = event.touches;
         touch.move(event);
@@ -469,7 +472,6 @@ var AvatarCropper = function AvatarCropper(props) {
             setScale(scale);
         }
     };
-    // 触摸结束
     var onTouchEnd = function onTouchEnd(event) {
         var stopPropagation = false;
         if (moving || zooming) {
@@ -501,13 +503,11 @@ var AvatarCropper = function AvatarCropper(props) {
         (0, _utils.preventDefault)(event, stopPropagation);
         touch.reset();
     };
-    // 重置角度
     var reset = function reset() {
         setState((0, _object_spread_props._)((0, _object_spread._)({}, state), {
             angle: 0
         }));
     };
-    // 设置角度
     var rotate = function rotate() {
         if (state.angle === 270) {
             setState((0, _object_spread_props._)((0, _object_spread._)({}, state), {
@@ -519,7 +519,6 @@ var AvatarCropper = function AvatarCropper(props) {
             angle: state.angle + 90
         }));
     };
-    // 关闭
     var cancel = function cancel() {
         var isEmit = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
         setVisible(false);
@@ -561,7 +560,7 @@ var AvatarCropper = function AvatarCropper(props) {
             height: cropperWidth,
             destWidth: cropperWidth,
             destHeight: cropperWidth,
-            success: function() {
+            success: /*#__PURE__*/ function() {
                 var _ref = (0, _async_to_generator._)(function(res) {
                     var filePath;
                     return (0, _ts_generator._)(this, function(_state) {
@@ -600,7 +599,7 @@ var AvatarCropper = function AvatarCropper(props) {
             height: cropperWidth,
             destWidth: cropperWidth * systemInfo.pixelRatio,
             destHeight: cropperWidth * systemInfo.pixelRatio,
-            success: function() {
+            success: /*#__PURE__*/ function() {
                 var _ref = (0, _async_to_generator._)(function(res) {
                     var filePath;
                     return (0, _ts_generator._)(this, function(_state) {
@@ -625,21 +624,21 @@ var AvatarCropper = function AvatarCropper(props) {
             rotate,
             confirm
         ];
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-popup-toolbar-flex")
         }, actions.map(function(action, index) {
-            return /*#__PURE__*/ _react.default.createElement("div", {
+            return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 key: index,
                 className: "".concat(classPrefix, "-popup-toolbar-item"),
                 onClick: function onClick(_e) {
                     return action();
                 }
             }, toolbar[index]);
-        })));
+        }));
     };
     var CropperPopup = function CropperPopup() {
         var canvasId = canvasAll.canvasId;
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-popup"),
             style: {
                 display: visible ? 'block' : 'none'
@@ -650,23 +649,23 @@ var AvatarCropper = function AvatarCropper(props) {
             type: showAlipayCanvas2D ? '2d' : undefined,
             style: canvasStyle,
             className: "".concat(classPrefix, "-popup-canvas")
-        }), /*#__PURE__*/ _react.default.createElement("div", {
+        }), /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-popup-highlight"),
             onTouchStart: onTouchStart,
             onTouchMove: onTouchMove,
             onTouchEnd: onTouchEnd
-        }, /*#__PURE__*/ _react.default.createElement("div", {
+        }, /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "highlight",
             style: highlightStyle
-        })), /*#__PURE__*/ _react.default.createElement("div", {
+        })), /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: toolbarPositionCls
-        }, /*#__PURE__*/ _react.default.createElement(ToolBar, null))));
+        }, /*#__PURE__*/ _react.default.createElement(ToolBar, null)));
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({
         className: cls
     }, rest), {
         style: style
-    }), children, /*#__PURE__*/ _react.default.createElement("div", {
+    }), children, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-avatar-cropper-edit-text",
         onClick: chooseImage
     }, editText)), CropperPopup());

package/dist/cjs/packages/avatarcropper/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-cropper {
   position: relative;
   display: flex;

package/dist/cjs/packages/avatargroup/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-group {
   display: flex;
   flex-direction: row;

package/dist/cjs/packages/backtop/backtop.d.ts

@@ -1,11 +1,15 @@
 import React, { FunctionComponent } from 'react';
-import type { MouseEvent } from 'react';
+import { PageScrollObject } from '@tarojs/taro';
 import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
-export interface BackTopProps extends BasicComponent {
+import { HoverButtonProps } from "../hoverbutton/index";
+export interface BackTopProps extends HoverButtonProps {
     threshold: number;
     zIndex: number;
     duration: number;
-    onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
+    /**
+     * 容器滚动时的回调参数，主要用于 rn、鸿蒙端
+     */
+    scrollRes?: PageScrollObject;
+    onClick?: (event: React.MouseEvent<HTMLDivElement> | ITouchEvent) => void;
 }
 export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/cjs/packages/backtop/backtop.js

@@ -17,48 +17,68 @@ 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 _iconsreacttaro = require("@nutui/icons-react-taro");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _typings = require("../../utils/typings");
-var _index = require("../configprovider/index");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../hoverbutton/index"));
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1000
 });
 var BackTop = function BackTop(props) {
-    var rtl = (0, _index.useRtl)();
-    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, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
+    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];
-    // 监听用户滑动页面事件
-    (0, _taro.usePageScroll)(function(res) {
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), backTop = _useState[0], setBackTop = _useState[1];
+    var _obj;
+    var cls = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-show"), backTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-rn"), (0, _platformtaro.rn)()), _obj), 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;
-        scrollTop >= threshold ? SetBackTop(true) : SetBackTop(false);
-    });
+        setBackTop(scrollTop >= threshold);
+    }, [
+        threshold
+    ]);
+    // 监听用户滑动页面事件
+    (0, _taro.usePageScroll)(onScroll);
+    (0, _react.useEffect)(function() {
+        if (!scrollRes) return;
+        onScroll(scrollRes);
+    }, [
+        onScroll,
+        scrollRes
+    ]);
     // 返回顶部点击事件
-    var goTop = function goTop(e) {
-        onClick && onClick(e);
+    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
         });
-    };
-    var _obj;
-    var styles = Object.keys(style || {}).length !== 0 ? (0, _object_spread._)({
-        zIndex: zIndex
-    }, style) : (_obj = {}, (0, _define_property._)(_obj, rtl ? 'left' : 'right', '10px'), (0, _define_property._)(_obj, "bottom", '20px'), (0, _define_property._)(_obj, "zIndex", zIndex), _obj);
-    return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)(classPrefix, {
-            show: backTop
-        }, className),
-        style: styles,
+    }, [
+        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 || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Top, {
-        size: 19,
-        className: "nut-backtop-main"
-    }));
+    }, children));
 };
 BackTop.displayName = 'NutBackTop';

package/dist/cjs/packages/backtop/style/backtop.scss

@@ -1,25 +1,22 @@
 .nut-backtop {
   display: none;
-  position: fixed;
 
-  &.show {
-    width: 40px;
-    height: 40px;
+  &-rn {
+    position: absolute;
+  }
+
+  &-show {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $color-background-overlay;
-    color: $color-title;
-    border: 1px solid $backtop-border-color;
-    border-radius: 50%;
-
-    &:active {
-      background: $color-background;
-    }
-  }
-
-  &-main {
+    width: $hoverbutton-item-size;
+    height: $hoverbutton-item-size;
     transition: all 0.2s ease-in-out;
-    color: $color-title;
+    .nut-hoverbutton-item-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }