@nutui/nutui-react-taro 3.0.0 → 3.0.2

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

@@ -141,7 +141,6 @@
         opacity: 0;
         transform: scale(0.8);
       }
-
       to {
         opacity: 1;
         transform: scale(1);
@@ -153,7 +152,6 @@
         opacity: 1;
         transform: scale(1);
       }
-
       to {
         opacity: 0;
         transform: scale(0.8);
@@ -176,7 +174,6 @@
       from {
         opacity: 0;
       }
-
       to {
         opacity: 1;
       }
@@ -186,7 +183,6 @@
       from {
         opacity: 1;
       }
-
       to {
         opacity: 0;
       }
@@ -209,6 +205,9 @@
       from {
         transform: translate3d(0, -100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes popup-slide-top-exit {
@@ -236,6 +235,9 @@
       from {
         transform: translate3d(100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-right-exit {
@@ -263,6 +265,9 @@
       from {
         transform: translate3d(0, 100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes slide-bottom-exit {
@@ -290,6 +295,9 @@
       from {
         transform: translate3d(-100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-left-exit {

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

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

@@ -184,6 +184,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -211,6 +214,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -238,6 +244,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -265,6 +274,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/es/packages/shortpassword/shortpassword.js

@@ -21,7 +21,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var InternalShortPassword = function(props, ref) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, round = _ref.round, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = _object_without_properties(_ref, [
         "title",
         "description",
         "tips",
@@ -35,6 +35,7 @@ export var InternalShortPassword = function(props, ref) {
         "className",
         "closeable",
         "autoFocus",
+        "round",
         "onFocus",
         "onChange",
         "onConfirm",
@@ -98,15 +99,12 @@ export var InternalShortPassword = function(props, ref) {
         onConfirm && onConfirm(inputValue);
     };
     return /*#__PURE__*/ React.createElement(Popup, _object_spread({
-        style: {
-            padding: '32px 24px 28px 24px',
-            borderRadius: '12px',
-            textAlign: 'center'
-        },
+        className: "".concat(classPrefix, "-popup"),
         visible: visible,
         closeable: true,
         onOverlayClick: onClose,
-        onCloseIconClick: onClose
+        onCloseIconClick: onClose,
+        round: round
     }, rest), /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, className),
         style: style

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

@@ -1,11 +1,21 @@
 .nut-shortpassword {
+  &-popup {
+    padding: 32px 24px 28px 24px;
+    border-radius: 12px;
+    text-align: center;
+  }
+
   &-title {
+    display: flex;
+    justify-content: center;
     line-height: 1;
     font-size: $font-size-l;
     color: $color-title;
   }
 
   &-description {
+    display: flex;
+    justify-content: center;
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -371,12 +383,21 @@
   right: 0;
 }
 
+.nut-shortpassword-popup {
+  padding: 32px 24px 28px 24px;
+  border-radius: 12px;
+  text-align: center;
+}
 .nut-shortpassword-title {
+  display: flex;
+  justify-content: center;
   line-height: 1;
   font-size: var(--nutui-font-size-l, 16px);
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-shortpassword-description {
+  display: flex;
+  justify-content: center;
   margin-top: 12px;
   margin-bottom: 24px;
   line-height: 1;

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

@@ -2,12 +2,21 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-shortpassword-popup {
+  padding: 32px 24px 28px 24px;
+  border-radius: 12px;
+  text-align: center;
+}
 .nut-shortpassword-title {
+  display: flex;
+  justify-content: center;
   line-height: 1;
   font-size: 16px;
   color: #1a1a1a;
 }
 .nut-shortpassword-description {
+  display: flex;
+  justify-content: center;
   margin-top: 12px;
   margin-bottom: 24px;
   line-height: 1;

package/dist/es/packages/signature/signature.js

@@ -4,7 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { getEnv, nextTick, createSelectorQuery, canvasToTempFilePath } from "@tarojs/taro";
-import { View } from "@tarojs/components";
+import { Canvas, View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     canvasId: 'spcanvas',
@@ -153,7 +153,7 @@ var InternalSignature = function(props, ref) {
         onTouchStart: startEventHandler,
         onTouchMove: moveEventHandler,
         onTouchEnd: endEventHandler
-    }) : /*#__PURE__*/ React.createElement("canvas", {
+    }) : /*#__PURE__*/ React.createElement(Canvas, {
         id: canvasId,
         ref: canvasRef,
         "canvas-id": canvasId,

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

@@ -22,12 +22,12 @@
 .nut-swipe-left, .nut-swipe-right {
   position: absolute;
   top: 0;
-  display: flex;
-  flex-direction: row;
 }
 .nut-swipe-left {
   left: 0;
+  transform: translate(-100%, 0px);
 }
 .nut-swipe-right {
-  left: 100%;
+  right: 0px;
+  transform: translate(100%, 0px);
 }

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

@@ -22,12 +22,12 @@
 .nut-swipe-left, .nut-swipe-right {
   position: absolute;
   top: 0;
-  display: flex;
-  flex-direction: row;
 }
 .nut-swipe-left {
   left: 0;
+  transform: translate(-100%, 0px);
 }
 .nut-swipe-right {
-  left: 100%;
+  right: 0px;
+  transform: translate(100%, 0px);
 }

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

@@ -20,15 +20,19 @@
   &-right {
     position: absolute;
     top: 0;
-    display: flex;
-    flex-direction: row;
+    //display: flex;
+    //flex-direction: row;
+    //flex-shrink: 0;
   }
 
   &-left {
     left: 0;
+    transform: translate(-100%, 0px);
   }
 
   &-right {
-    left: 100%;
+    //left: 100%;
+    right: 0px;
+    transform: translate(100%, 0px);
   }
 }

package/dist/es/packages/swipe/swipe.js

@@ -6,12 +6,13 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
+import { useReady } from "@tarojs/taro";
 import { useTouch } from "../../hooks/use-touch";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { harmony } from "../../utils/platform-taro";
-import pxTransform from "../../utils/px-transform";
 import { useRefState } from "../../hooks/use-ref-state";
+import useUuid from "../../hooks/use-uuid";
 function preventDefault(event, isStopPropagation) {
     if (typeof event.cancelable !== 'boolean' || event.cancelable) {
         event.preventDefault();
@@ -26,8 +27,11 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
     var classPrefix = 'nut-swipe';
     var touch = useTouch();
+    var uid = useUuid();
+    var leftId = "swipe-left-".concat(uid);
+    var rightId = "swipe-right-".concat(uid);
     // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
-    useEffect(function() {
+    useReady(function() {
         var getWidth = /*#__PURE__*/ function() {
             var _ref = _async_to_generator(function() {
                 var leftRect, rightRect;
@@ -40,7 +44,7 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
                             ];
                             return [
                                 4,
-                                getRectByTaro(leftWrapper.current)
+                                getRectByTaro(leftWrapper.current, leftId)
                             ];
                         case 1:
                             leftRect = _state.sent();
@@ -57,11 +61,10 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
                             ];
                             return [
                                 4,
-                                getRectByTaro(rightWrapper.current)
+                                getRectByTaro(rightWrapper.current, rightId)
                             ];
                         case 3:
                             rightRect = _state.sent();
-                            console.log('actionWidth.current.left', rightRect.width);
                             rightRect && setActionWidth(function(v) {
                                 return _object_spread_props(_object_spread({}, v), {
                                     right: rightRect.width
@@ -82,7 +85,7 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
         setTimeout(function() {
             return getWidth();
         });
-    }, []);
+    });
     var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
     var root = useRef();
     var opened = useRef(false);
@@ -110,7 +113,7 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
         }
     };
     var wrapperStyle = {
-        transform: "translate(".concat(state.offset, "px, 0)"),
+        transform: "translate(".concat(state.offset).concat(!harmony() ? 'px' : '', ", 0)"),
         transitionDuration: state.dragging ? '0s' : '.6s'
     };
     var onTouchStart = /*#__PURE__*/ function() {
@@ -119,14 +122,13 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        console.log('ontouchstart');
                         if (!leftWrapper.current) return [
                             3,
                             2
                         ];
                         return [
                             4,
-                            getRectByTaro(leftWrapper.current)
+                            getRectByTaro(leftWrapper.current, leftId)
                         ];
                     case 1:
                         leftRect = _state.sent();
@@ -143,7 +145,7 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
                         ];
                         return [
                             4,
-                            getRectByTaro(rightWrapper.current)
+                            getRectByTaro(rightWrapper.current, rightId)
                         ];
                     case 3:
                         rightRect = _state.sent();
@@ -186,7 +188,7 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
             if (isEdge) {
                 preventDefault(event, true);
             }
-            newState.offset = rangeCalculation((harmony() ? parseFloat(pxTransform(touch.deltaX.current)) : touch.deltaX.current) + startOffset.current, -actionWidth.current.right || 0, actionWidth.current.left || 0);
+            newState.offset = rangeCalculation(touch.deltaX.current + startOffset.current, -actionWidth.current.right || 0, actionWidth.current.left || 0);
             setState(newState);
         }
     };
@@ -253,13 +255,10 @@ export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
     var rightWrapper = useRef(null);
     var renderActionContent = function(side) {
         if (props["".concat(side, "Action")]) {
-            console.log('actionWidth xxx', actionWidth.current.left);
             return /*#__PURE__*/ React.createElement(View, {
                 ref: side === 'left' ? leftWrapper : rightWrapper,
                 className: "".concat(classPrefix, "-").concat(side),
-                style: _object_spread({}, side === 'left' ? {
-                    left: Number("".concat(-actionWidth.current.left))
-                } : {}),
+                id: side === 'left' ? leftId : rightId,
                 onClick: function(e) {
                     return handleOperate(e, side);
                 }

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

@@ -121,6 +121,12 @@
   width: 22px;
   height: 22px;
   font-size: 22px;
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;

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

@@ -121,6 +121,12 @@
   width: 22px;
   height: 22px;
   font-size: 22px;
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;

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

@@ -24,6 +24,12 @@
   width: 22px;
   height: 22px;
   font-size: 22px;
+  /* #ifdef harmony*/
+  color: #1a1a1a;
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;

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

@@ -20,6 +20,12 @@
       width: 22px;
       height: 22px;
       font-size: 22px;
+      /* #ifdef harmony*/
+      color: $tabbar-inactive-color;
+      /* #endif*/
+      /* #ifndef harmony*/
+      color: inherit;
+      /* #endif*/
     }
 
     &-nav {

package/dist/es/packages/tabs/tabs.js

@@ -107,14 +107,9 @@ export var Tabs = function(props) {
     var _useState = _sliced_to_array(useState(0), 2), scrollLeft = _useState[0], setScrollLeft = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), scrollTop = _useState1[0], setScrollTop = _useState1[1];
     var scrollDirection = function(to, direction) {
-        var count = 0;
-        var frames = 1;
-        function animate() {
-            if (direction === 'horizontal') setScrollLeft(to);
-            else setScrollTop(to);
-            if (++count < frames) raf(animate);
-        }
-        animate();
+        // 使用ScrollView组件此处不需要手动raf scrollLeft
+        if (direction === 'horizontal') setScrollLeft(to);
+        else setScrollTop(to);
     };
     var scrollIntoView = function(index) {
         raf(function() {
@@ -136,14 +131,11 @@ export var Tabs = function(props) {
                         return prev + curr.width;
                     }, 0);
                     to = left - (navRect.width - titleRect.width) / 2;
-                    // to < 0 说明不需要进行滚动，页面元素已全部显示出来
-                    if (to < 0) return;
-                    to = rtl ? -to : to;
                 }
+                scrollDirection(to, direction);
                 nextTick(function() {
                     scrollWithAnimation.current = true;
                 });
-                scrollDirection(to, direction);
             });
         });
     };
@@ -180,6 +172,7 @@ export var Tabs = function(props) {
         scrollY: direction === 'vertical',
         scrollLeft: scrollLeft,
         scrollTop: scrollTop,
+        enhanced: true,
         showScrollbar: false,
         scrollWithAnimation: rtl && Taro.getEnv() !== 'WEB' ? false : scrollWithAnimation.current,
         id: "nut-tabs-titles-".concat(name || uuid),
@@ -223,7 +216,7 @@ export var Tabs = function(props) {
         if (!/*#__PURE__*/ React.isValidElement(child)) return null;
         return /*#__PURE__*/ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
             active: value === child.props.value,
-            autoHeightClassName: autoHeight && String(value) !== String(child.props.value || idx) ? 'inactive' : ''
+            autoHeightClassName: autoHeight && String(value) !== String(child.props.value || idx) ? 'inactive' : undefined
         }));
     }))));
 };

package/dist/es/packages/textarea/textarea.js

@@ -6,7 +6,7 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useRef } from "react";
 import classNames from "classnames";
 import Taro from "@tarojs/taro";
-import { Text, Textarea, View } from "@tarojs/components";
+import { Textarea, View } from "@tarojs/components";
 import { useConfig, useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../hooks/use-props-value";
@@ -103,7 +103,7 @@ export var TextArea = function(props) {
         autoHeight: autoSize,
         maxlength: maxLength,
         placeholder: placeholder !== undefined ? placeholder : locale.placeholder
-    })), showCount && /*#__PURE__*/ React.createElement(Text, {
+    })), showCount && /*#__PURE__*/ React.createElement(View, {
         className: classNames("".concat(classPrefix, "-limit"), _define_property({}, "".concat(classPrefix, "-limit-disabled"), disabled))
     }, inputValue.length, "/", maxLength < 0 ? 0 : maxLength)));
 };

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {