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

package/dist/es/packages/avatarcropper/avatarcropper.js

@@ -7,8 +7,9 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import Taro, { useReady, createSelectorQuery } from "@tarojs/taro";
 import classNames from "classnames";
-import { Canvas } from "@tarojs/components";
+import { Canvas, View } from "@tarojs/components";
 import { Button } from "../button/button";
+import { useConfig } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
 import { useTouch } from "../../utils/use-touch";
 import { clamp, preventDefault } from "../../utils";
@@ -19,20 +20,20 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
         /*#__PURE__*/ React.createElement(Button, {
             type: "danger",
             key: "cancel"
-        }, "取消"),
+        }, "Cancel"),
         /*#__PURE__*/ React.createElement(Button, {
             key: "reset"
-        }, "重置"),
+        }, "Reset"),
         /*#__PURE__*/ React.createElement(Button, {
             key: "rotate"
-        }, "旋转"),
+        }, "Rotate"),
         /*#__PURE__*/ React.createElement(Button, {
             type: "success",
             key: "confirm"
-        }, "确认")
+        }, "Confirm")
     ],
     toolbarPosition: 'bottom',
-    editText: '编辑',
+    editText: 'Edit',
     sizeType: [
         'original',
         'compressed'
@@ -45,6 +46,24 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = "nut-avatar-cropper";
 export var AvatarCropper = function(props) {
+    var locale = useConfig().locale;
+    defaultProps.toolbar = [
+        /*#__PURE__*/ React.createElement(Button, {
+            type: "danger",
+            key: "cancel"
+        }, locale.cancel),
+        /*#__PURE__*/ React.createElement(Button, {
+            key: "reset"
+        }, locale.reset),
+        /*#__PURE__*/ React.createElement(Button, {
+            key: "rotate"
+        }, locale.avatarCropper.rotate),
+        /*#__PURE__*/ React.createElement(Button, {
+            type: "success",
+            key: "confirm"
+        }, locale.confirm)
+    ];
+    defaultProps.editText = locale.edit;
     var _ref = _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 = _object_without_properties(_ref, [
         "children",
         "toolbar",
@@ -65,7 +84,6 @@ export var AvatarCropper = function(props) {
     var _useState = _sliced_to_array(useState(false), 2), visible = _useState[0], setVisible = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), moving = _useState1[0], setMoving = _useState1[1];
     var _useState2 = _sliced_to_array(useState(false), 2), zooming = _useState2[0], setZooming = _useState2[1];
-    // 获取系统信息
     var systemInfo = Taro.getSystemInfoSync();
     // 支付宝基础库2.7.0以上支持，需要开启支付宝小程序canvas2d
     var showAlipayCanvas2D = useMemo(function() {
@@ -116,9 +134,7 @@ export var AvatarCropper = function(props) {
             cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId)
         }));
     }, []);
-    // 触摸
     var touch = useTouch();
-    // 高亮框样式
     var highlightStyle = useMemo(function() {
         var width = "".concat(state.cropperWidth / pixelRatio, "px");
         var height = width;
@@ -200,13 +216,9 @@ export var AvatarCropper = function(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,
@@ -264,11 +276,8 @@ export var AvatarCropper = function(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();
     }, [
@@ -297,7 +306,7 @@ export var AvatarCropper = function(props) {
         draw
     ]);
     // 设置绘制图片
-    var setDrawImgInfo = function() {
+    var setDrawImgInfo = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(image) {
             var displayWidth, cropperWidth, copyDrawImg, imgWidth, imgHeight, isPortrait, rate, scale;
             return _ts_generator(this, function(_state) {
@@ -353,7 +362,6 @@ export var AvatarCropper = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    // 选择图片
     var chooseImage = function() {
         Taro.chooseImage({
             count: 1,
@@ -367,8 +375,7 @@ export var AvatarCropper = function(props) {
             }
         });
     };
-    // 选择图片后回调
-    var imageChange = function() {
+    var imageChange = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(file) {
             return _ts_generator(this, function(_state) {
                 Taro.getImageInfo({
@@ -386,7 +393,6 @@ export var AvatarCropper = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    // 重设缩放
     var resetScale = function(scale) {
         setState(_object_spread_props(_object_spread({}, state), {
             moveX: 0,
@@ -396,7 +402,6 @@ export var AvatarCropper = function(props) {
             defScale: scale || state.defScale
         }));
     };
-    // 设置缩放
     var setScale = function(scale) {
         scale = clamp(scale, +0.3, +maxZoom + 1);
         if (scale !== state.scale) {
@@ -416,7 +421,6 @@ export var AvatarCropper = function(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(event) {
         var touches = event.touches;
         var offsetX = touch.offsetX;
@@ -435,7 +439,6 @@ export var AvatarCropper = function(props) {
             }));
         }
     };
-    // 触摸移动
     var onTouchMove = function(event) {
         var touches = event.touches;
         touch.move(event);
@@ -457,7 +460,6 @@ export var AvatarCropper = function(props) {
             setScale(scale);
         }
     };
-    // 触摸结束
     var onTouchEnd = function(event) {
         var stopPropagation = false;
         if (moving || zooming) {
@@ -489,13 +491,11 @@ export var AvatarCropper = function(props) {
         preventDefault(event, stopPropagation);
         touch.reset();
     };
-    // 重置角度
     var reset = function() {
         setState(_object_spread_props(_object_spread({}, state), {
             angle: 0
         }));
     };
-    // 设置角度
     var rotate = function() {
         if (state.angle === 270) {
             setState(_object_spread_props(_object_spread({}, state), {
@@ -507,7 +507,6 @@ export var AvatarCropper = function(props) {
             angle: state.angle + 90
         }));
     };
-    // 关闭
     var cancel = function() {
         var isEmit = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
         setVisible(false);
@@ -549,7 +548,7 @@ export var AvatarCropper = function(props) {
             height: cropperWidth,
             destWidth: cropperWidth,
             destHeight: cropperWidth,
-            success: function() {
+            success: /*#__PURE__*/ function() {
                 var _ref = _async_to_generator(function(res) {
                     var filePath;
                     return _ts_generator(this, function(_state) {
@@ -588,7 +587,7 @@ export var AvatarCropper = function(props) {
             height: cropperWidth,
             destWidth: cropperWidth * systemInfo.pixelRatio,
             destHeight: cropperWidth * systemInfo.pixelRatio,
-            success: function() {
+            success: /*#__PURE__*/ function() {
                 var _ref = _async_to_generator(function(res) {
                     var filePath;
                     return _ts_generator(this, function(_state) {
@@ -613,21 +612,21 @@ export var AvatarCropper = function(props) {
             rotate,
             confirm
         ];
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-popup-toolbar-flex")
         }, actions.map(function(action, index) {
-            return /*#__PURE__*/ React.createElement("div", {
+            return /*#__PURE__*/ React.createElement(View, {
                 key: index,
                 className: "".concat(classPrefix, "-popup-toolbar-item"),
                 onClick: function(_e) {
                     return action();
                 }
             }, toolbar[index]);
-        })));
+        }));
     };
     var CropperPopup = function() {
         var canvasId = canvasAll.canvasId;
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-popup"),
             style: {
                 display: visible ? 'block' : 'none'
@@ -638,23 +637,23 @@ export var AvatarCropper = function(props) {
             type: showAlipayCanvas2D ? '2d' : undefined,
             style: canvasStyle,
             className: "".concat(classPrefix, "-popup-canvas")
-        }), /*#__PURE__*/ React.createElement("div", {
+        }), /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-popup-highlight"),
             onTouchStart: onTouchStart,
             onTouchMove: onTouchMove,
             onTouchEnd: onTouchEnd
-        }, /*#__PURE__*/ React.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(View, {
             className: "highlight",
             style: highlightStyle
-        })), /*#__PURE__*/ React.createElement("div", {
+        })), /*#__PURE__*/ React.createElement(View, {
             className: toolbarPositionCls
-        }, /*#__PURE__*/ React.createElement(ToolBar, null))));
+        }, /*#__PURE__*/ React.createElement(ToolBar, null)));
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, _object_spread_props(_object_spread({
         className: cls
     }, rest), {
         style: style
-    }), children, /*#__PURE__*/ React.createElement("div", {
+    }), children, /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-cropper-edit-text",
         onClick: chooseImage
     }, editText)), CropperPopup());

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

@@ -1,27 +1,16 @@
 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 {
+    threshold: number;
+    zIndex: number;
+    duration: number;
     /**
-    * 页面垂直滚动多高后出现
-    * @default 200
-    */
-    threshold: number
-    /**
-    * 设置组件页面层级
-    * @default 900
-    */
-    zIndex: number
-    /**
-    * 设置动画持续时间，为 0 时表示无动画
-    * @default 1000
-    */
-    duration: number
-    /**
-    * 按钮点击时触发事件
-    * @default -
-    */
-    onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
+     * 容器滚动时的回调参数，主要用于 rn、鸿蒙端
+     */
+    scrollRes?: PageScrollObject;
+    onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
 }
 export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/es/packages/backtop/backtop.js

@@ -2,48 +2,86 @@ 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, { useState } from "react";
-import { usePageScroll, pageScrollTo } from "@tarojs/taro";
+import React, { useCallback, useState, useMemo, useEffect, useRef } from "react";
+import { usePageScroll, pageScrollTo, getSystemInfo } from "@tarojs/taro";
 import { View } from "@tarojs/components";
 import { Top } from "@nutui/icons-react-taro";
 import classNames from "classnames";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
+import { harmonyAndRn, rn } from "../../utils/platform-taro";
+import pxTransform from "../../utils/px-transform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1000
 });
+var isNative = harmonyAndRn();
 export var BackTop = function(props) {
     var rtl = useRtl();
-    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, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
+    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, 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];
-    // 监听用户滑动页面事件
-    usePageScroll(function(res) {
+    var _useState = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), isTouchStart = _useState1[0], setTouchStart = _useState1[1];
+    var _obj;
+    var cls = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-show"), backTop), _define_property(_obj, "".concat(classPrefix, "-show-active"), isNative && isTouchStart), _define_property(_obj, "".concat(classPrefix, "-rn"), rn()), _obj), className);
+    var systemInfo = useRef({});
+    useEffect(function() {
+        getSystemInfo().then(function(res) {
+            systemInfo.current = res;
+        });
+    }, []);
+    var handleActiveStart = useCallback(function() {
+        isNative && setTouchStart(true);
+    }, []);
+    var handleActiveEnd = useCallback(function() {
+        isNative && setTouchStart(false);
+    }, []);
+    var onScroll = useCallback(function(res) {
         var scrollTop = res.scrollTop;
-        scrollTop >= threshold ? SetBackTop(true) : SetBackTop(false);
-    });
+        setBackTop(scrollTop >= threshold);
+    }, [
+        threshold
+    ]);
+    // 监听用户滑动页面事件
+    usePageScroll(onScroll);
+    useEffect(function() {
+        if (!scrollRes) return;
+        onScroll(scrollRes);
+    }, [
+        onScroll,
+        scrollRes
+    ]);
     // 返回顶部点击事件
-    var goTop = function(e) {
-        onClick && onClick(e);
+    var goTop = useCallback(function(e) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
         pageScrollTo({
             scrollTop: 0,
             duration: duration > 0 ? duration : 0
         });
-    };
-    var _obj;
-    var styles = Object.keys(style || {}).length !== 0 ? _object_spread({
-        zIndex: zIndex
-    }, style) : (_obj = {}, _define_property(_obj, rtl ? 'left' : 'right', '10px'), _define_property(_obj, "bottom", '20px'), _define_property(_obj, "zIndex", zIndex), _obj);
+    }, [
+        duration,
+        onClick
+    ]);
+    var styles = useMemo(function() {
+        var _obj;
+        return Object.keys(style || {}).length !== 0 ? _object_spread({
+            zIndex: zIndex
+        }, style) : (_obj = {}, _define_property(_obj, rtl ? 'left' : 'right', pxTransform(10)), _define_property(_obj, "bottom", pxTransform(20)), _define_property(_obj, "zIndex", zIndex), _obj);
+    }, [
+        rtl,
+        style,
+        zIndex
+    ]);
     return /*#__PURE__*/ React.createElement(View, {
-        className: classNames(classPrefix, {
-            show: backTop
-        }, className),
+        className: cls,
         style: styles,
         onClick: function(e) {
             goTop(e);
-        }
+        },
+        onTouchStart: handleActiveStart,
+        onTouchEnd: handleActiveEnd,
+        onTouchCancel: handleActiveEnd
     }, children || /*#__PURE__*/ React.createElement(Top, {
         size: 19,
         className: "nut-backtop-main"

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

@@ -2,7 +2,11 @@
   display: none;
   position: fixed;
 
-  &.show {
+  &-rn {
+    position: absolute;
+  }
+
+  &-show {
     width: 40px;
     height: 40px;
     display: flex;
@@ -11,9 +15,11 @@
     background: $color-background-overlay;
     color: $color-title;
     border: 1px solid $backtop-border-color;
-    border-radius: 50%;
+    border-radius: 21px;
+    z-index: 100;
 
-    &:active {
+    &:active,
+    &-active {
       background: $color-background;
     }
   }

package/dist/es/packages/backtop/style/style.css

@@ -2,21 +2,25 @@
   display: none;
   position: fixed;
 }
-.nut-backtop.show {
+.nut-backtop-rn {
+  position: absolute;
+}
+.nut-backtop-show {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-1, #ffffff);
-  color: var(--nutui-gray-7, #1a1a1a);
-  border: 1px solid var(--nutui-backtop-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  border-radius: 50%;
+  background: var(--nutui-color-background-overlay, #ffffff);
+  color: var(--nutui-color-title, #1a1a1a);
+  border: 1px solid var(--nutui-backtop-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-radius: 21px;
+  z-index: 100;
 }
-.nut-backtop.show:active {
-  background: var(--nutui-gray-3, #f5f6fa);
+.nut-backtop-show:active, .nut-backtop-show-active {
+  background: var(--nutui-color-background, #f5f6fa);
 }
 .nut-backtop-main {
   transition: all 0.2s ease-in-out;
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-color-title, #1a1a1a);
 }

package/dist/es/packages/backtop/style/style.harmony.css

@@ -2,21 +2,28 @@
   display: none;
   position: fixed;
 }
-.nut-backtop.show {
+.nut-backtop-rn {
+  position: absolute;
+}
+.nut-backtop-show {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
-  color: #1A1A1A;
+  color: #1a1a1a;
   border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: 50%;
+  border-radius: 21px;
+  z-index: 100;
+}
+.nut-backtop-show:active {
+  background: #f5f6fa;
 }
-.nut-backtop.show:active {
-  background: #F7F8FC;
+.nut-backtop-show-active {
+  background: #f5f6fa;
 }
 .nut-backtop-main {
   transition: all 0.2s ease-in-out;
-  color: #1A1A1A;
+  color: #1a1a1a;
 }

package/dist/es/packages/badge/style/style.css

@@ -30,7 +30,7 @@
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
   font-weight: normal;
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));