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

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/backtop/backtop.d.ts

@@ -1,11 +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;
+    /**
+     * 容器滚动时的回调参数，主要用于 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/cjs/packages/backtop/backtop.js

@@ -21,41 +21,79 @@ var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
+var _platformtaro = require("../../utils/platform-taro");
+var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1000
 });
+var isNative = (0, _platformtaro.harmonyAndRn)();
 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, 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 _useState1 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isTouchStart = _useState1[0], setTouchStart = _useState1[1];
+    var _obj;
+    var cls = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-show"), backTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-show-active"), isNative && isTouchStart), (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 handleActiveStart = (0, _react.useCallback)(function() {
+        isNative && setTouchStart(true);
+    }, []);
+    var handleActiveEnd = (0, _react.useCallback)(function() {
+        isNative && setTouchStart(false);
+    }, []);
+    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);
+    }, [
+        duration,
+        onClick
+    ]);
+    var styles = (0, _react.useMemo)(function() {
+        var _obj;
+        return Object.keys(style || {}).length !== 0 ? (0, _object_spread._)({
+            zIndex: zIndex
+        }, style) : (_obj = {}, (0, _define_property._)(_obj, rtl ? 'left' : 'right', (0, _pxtransform.default)(10)), (0, _define_property._)(_obj, "bottom", (0, _pxtransform.default)(20)), (0, _define_property._)(_obj, "zIndex", zIndex), _obj);
+    }, [
+        rtl,
+        style,
+        zIndex
+    ]);
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)(classPrefix, {
-            show: backTop
-        }, className),
+        className: cls,
         style: styles,
         onClick: function onClick(e) {
             goTop(e);
-        }
+        },
+        onTouchStart: handleActiveStart,
+        onTouchEnd: handleActiveEnd,
+        onTouchCancel: handleActiveEnd
     }, children || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Top, {
         size: 19,
         className: "nut-backtop-main"

package/dist/cjs/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/cjs/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/cjs/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/cjs/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));