@nutui/nutui-react-taro 3.0.4 → 3.0.6

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

@@ -11,7 +11,7 @@
 /*入场动画过程*/
 .fade-enter-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-in;
 }
 
 /*入场动画结束*/
@@ -27,7 +27,7 @@
 /*离场动画过程*/
 .fade-exit-active {
   opacity: 0;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-out;
 }
 
 /*离场动画结束*/
@@ -43,47 +43,52 @@
 /*页面第一次加载时的动画过程*/
 .fade-appear-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms;
 }
 
 .nut-notify {
+  position: fixed;
+  left: 8px;
+  right: 8px;
+  z-index: var(--nutui-notify-z-index, 1000);
   display: flex;
-  justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: var(--nutui-notify-padding, 0px 10px);
-  color: var(--nutui-notify-text-color, #ffffff);
-  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14px));
-  white-space: pre-wrap;
-  word-wrap: break-word;
   height: var(--nutui-notify-height, 40px);
+  padding: var(--nutui-notify-padding, 0px 12px);
+  border-radius: var(--nutui-notify-border-radius, 8px);
+  box-shadow: var(--nutui-notify-box-shadow, 0px 4px 12px 0px rgba(0, 0, 0, 0.06));
+  background-color: var(--nutui-notify-background-color, #ffffff);
+}
+.nut-notify-content {
+  flex: 1;
+  text-align: center;
+  min-width: 0;
+  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-notify-text-color, var(--nutui-color-title, #1a1a1a));
+  white-space: nowrap;
+  overflow: hidden;
 }
-.nut-notify-popup-top, .nut-notify-popup-bottom {
-  position: fixed;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  transition: transform 0.3s;
-  z-index: 9999;
-}
-.nut-notify-popup-top {
-  top: 0;
+.nut-notify-ellipsis {
+  text-overflow: ellipsis;
 }
-.nut-notify-popup-bottom {
-  bottom: 0;
+.nut-notify-layout-left {
+  text-align: left;
 }
-.nut-notify-base {
-  background: var(--nutui-notify-base-background-color, var(--nutui-color-primary, #ff0f23));
+.nut-notify-left-icon, .nut-notify-right-icon {
+  display: inline-flex;
 }
-.nut-notify-primary {
-  background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #0073ff));
+.nut-notify-left-icon {
+  margin-right: 6px;
 }
-.nut-notify-success {
-  background: var(--nutui-notify-success-background-color, var(--nutui-color-success, #00d900));
+.nut-notify-left-icon .nut-icon {
+  height: 16px;
+  width: 16px;
 }
-.nut-notify-danger {
-  background: var(--nutui-notify-danger-background-color, var(--nutui-color-primary, #ff0f23));
+.nut-notify-right-icon {
+  margin-left: 6px;
 }
-.nut-notify-warning {
-  background: var(--nutui-notify-warning-background-color, var(--nutui-color-warning, #ffbf00));
+.nut-notify-right-icon .nut-icon {
+  height: 12px;
+  width: 12px;
 }

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

@@ -12,7 +12,7 @@
 /*入场动画过程*/
 .fade-enter-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-in;
 }
 
 /*入场动画结束*/
@@ -28,7 +28,7 @@
 /*离场动画过程*/
 .fade-exit-active {
   opacity: 0;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-out;
 }
 
 /*离场动画结束*/
@@ -44,47 +44,52 @@
 /*页面第一次加载时的动画过程*/
 .fade-appear-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms;
 }
 
 .nut-notify {
+  position: fixed;
+  left: 8px;
+  right: 8px;
+  z-index: 1000;
   display: flex;
-  justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: 0px 10px;
-  color: #ffffff;
-  font-size: 14px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
   height: 40px;
+  padding: 0px 12px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+.nut-notify-content {
+  flex: 1;
+  text-align: center;
+  min-width: 0;
+  font-size: 14px;
+  color: #1a1a1a;
+  white-space: nowrap;
+  overflow: hidden;
 }
-.nut-notify-popup-top, .nut-notify-popup-bottom {
-  position: fixed;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  transition: transform 0.3s;
-  z-index: 9999;
-}
-.nut-notify-popup-top {
-  top: 0;
+.nut-notify-ellipsis {
+  text-overflow: ellipsis;
 }
-.nut-notify-popup-bottom {
-  bottom: 0;
+.nut-notify-layout-left {
+  text-align: left;
 }
-.nut-notify-base {
-  background: #ff0f23;
+.nut-notify-left-icon, .nut-notify-right-icon {
+  display: inline-flex;
 }
-.nut-notify-primary {
-  background: #0073ff;
+.nut-notify-left-icon {
+  margin-right: 6px;
 }
-.nut-notify-success {
-  background: #00d900;
+.nut-notify-left-icon .nut-icon {
+  height: 16px;
+  width: 16px;
 }
-.nut-notify-danger {
-  background: #ff0f23;
+.nut-notify-right-icon {
+  margin-left: 6px;
 }
-.nut-notify-warning {
-  background: #ffbf00;
+.nut-notify-right-icon .nut-icon {
+  height: 12px;
+  width: 12px;
 }

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

@@ -384,7 +384,6 @@
 }
 
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;
@@ -430,6 +429,9 @@
   z-index: 1;
   transform-style: preserve-3d;
 }
+.nut-pickerview-roller-placeholder {
+  height: var(--nutui-picker-item-height, 36px);
+}
 .nut-pickerview-roller-item {
   position: absolute;
   top: 0;

package/dist/es/packages/pickerview/pickerroller.js

@@ -1,31 +1,41 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
+import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { useTouch } from "../../hooks/use-touch";
 import { passiveSupported } from "../../utils/supports-passive";
 import { web } from "../../utils/platform-taro";
 import { preventDefault } from "../../utils";
 import { momentum, useStyles } from "./utils";
+import useUuid from "../../hooks/use-uuid";
+import { getRectByTaro } from "../../utils/get-rect-by-taro";
 var InternalPickerRoller = function(props, ref) {
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, onSelect = props.onSelect, _props_renderLabel = props.renderLabel, renderLabel = _props_renderLabel === void 0 ? function(item) {
         return item.label;
     } : _props_renderLabel;
+    var classPrefix = 'nut-pickerview-roller';
+    var uuid = useUuid();
     var DEFAULT_DURATION = 200;
     var INERTIA_TIME = 300;
     var INERTIA_DISTANCE = 15;
     var ROTATION = 20;
     var touch = useTouch();
-    var _useState = _sliced_to_array(useState(1), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
+    var _useState = _sliced_to_array(useState(0), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
     var lineSpacing = useRef(36);
     var _useState1 = _sliced_to_array(useState(0), 2), touchTime = _useState1[0], setTouchTime = _useState1[1];
     var _useState2 = _sliced_to_array(useState('0deg'), 2), touchDeg = _useState2[0], setTouchDeg = _useState2[1];
     var isMoving = useRef(false);
     var rollerRef = useRef(null);
     var pickerRollerRef = useRef(null);
+    var placeholderRef = useRef(null);
     var _useState3 = _sliced_to_array(useState(0), 2), startTime = _useState3[0], setStartTime = _useState3[1];
     var _useState4 = _sliced_to_array(useState(0), 2), startY = _useState4[0], setStartY = _useState4[1];
     var transformY = useRef(0);
     var _useState5 = _sliced_to_array(useState(0), 2), scrollDistance = _useState5[0], setScrollDistance = _useState5[1];
+    var _useState6 = _sliced_to_array(useState(web()), 2), isGetLineSpacing = _useState6[0], setGetStatus = _useState6[1];
     var _useStyles = useStyles(touchTime, touchDeg, scrollDistance, lineSpacing, ROTATION), touchRollerStyle = _useStyles.touchRollerStyle, touchTiledStyle = _useStyles.touchTiledStyle, rollerStyle = _useStyles.rollerStyle;
     var isItemHidden = function(index) {
         return index >= currentIndex + 8 || index <= currentIndex - 8;
@@ -50,7 +60,7 @@ var InternalPickerRoller = function(props, ref) {
             var deg1 = Math.min(Math.max(currentDeg, 0), (options.length + 1) * ROTATION);
             if (deg1 >= 0 && deg1 < (options.length + 1) * ROTATION) {
                 applyTransform('', "".concat(deg1, "deg"), undefined, updatedMove);
-                setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
+                deg1 > 0 && setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
             }
         }
     };
@@ -91,7 +101,7 @@ var InternalPickerRoller = function(props, ref) {
         var index = options.findIndex(function(item) {
             return item.value === selectedValue;
         });
-        setCurrentIndex(index === -1 ? 1 : index + 1);
+        setCurrentIndex(index === -1 ? 0 : index + 1);
         var move = index * lineSpacing.current;
         shouldSelect && selectValue(-move);
         handleMove(-move);
@@ -101,16 +111,69 @@ var InternalPickerRoller = function(props, ref) {
         setTouchTime(0);
         selectValue(scrollDistance);
     };
+    var getReactHeight = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function() {
+            var placeholder, placeholderHeight, error;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            2,
+                            ,
+                            3
+                        ]);
+                        return [
+                            4,
+                            getRectByTaro(placeholderRef.current)
+                        ];
+                    case 1:
+                        placeholder = _state.sent();
+                        placeholderHeight = placeholder.height || 0;
+                        return [
+                            2,
+                            placeholderHeight
+                        ];
+                    case 2:
+                        error = _state.sent();
+                        console.error('获取高度失败:', error);
+                        return [
+                            2,
+                            0
+                        ];
+                    case 3:
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function getReactHeight() {
+            return _ref.apply(this, arguments);
+        };
+    }();
     // lineSpacing.current CSS variable
     useEffect(function() {
         var element = pickerRollerRef.current;
+        var currentLineSpacing;
         if (element && web()) {
             var computedStyle = getComputedStyle(element);
-            var currentLineSpacing = computedStyle.getPropertyValue('--nutui-picker-item-height');
-            !!currentLineSpacing && (lineSpacing.current = parseFloat(currentLineSpacing));
+            currentLineSpacing = computedStyle.getPropertyValue('--nutui-picker-item-height');
+            if (currentLineSpacing) {
+                lineSpacing.current = parseFloat(currentLineSpacing);
+            }
+        } else {
+            getReactHeight().then(function(height) {
+                currentLineSpacing = height;
+                if (currentLineSpacing) {
+                    lineSpacing.current = currentLineSpacing;
+                    setGetStatus(true);
+                }
+            });
         }
     }, [
-        pickerRollerRef.current
+        pickerRollerRef.current,
+        placeholderRef.current
     ]);
     useEffect(function() {
         isMoving.current = false;
@@ -152,21 +215,27 @@ var InternalPickerRoller = function(props, ref) {
         className: "nut-pickerview-list",
         ref: pickerRollerRef
     }, /*#__PURE__*/ React.createElement(View, {
-        className: "nut-pickerview-roller",
+        className: "".concat(classPrefix, "-placeholder"),
+        ref: placeholderRef,
+        id: "".concat(classPrefix, "-placeholder-").concat(uuid)
+    }), /*#__PURE__*/ React.createElement(View, {
+        className: classPrefix,
+        id: "".concat(classPrefix, "-").concat(uuid),
         ref: rollerRef,
         style: threeDimensional ? touchRollerStyle() : touchTiledStyle(),
         onTransitionEnd: stopMomentumScroll
     }, threeDimensional && options.map(function(item, index) {
         var _item_value;
-        return /*#__PURE__*/ React.createElement(View, {
-            className: "nut-pickerview-roller-item ".concat(isItemHidden(index + 1) && 'nut-pickerview-roller-item-hidden'),
+        var _obj;
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, isGetLineSpacing ? /*#__PURE__*/ React.createElement(View, {
+            className: classNames("".concat(classPrefix, "-item"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-item-hidden"), isItemHidden(index + 1)), _define_property(_obj, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex), _obj)),
             style: rollerStyle(index),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
-        }, renderLabel(item));
+        }, renderLabel(item)) : null);
     }), !threeDimensional && options.map(function(item, index) {
         var _item_value;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "nut-pickerview-roller-item-tiled",
+            className: classNames("".concat(classPrefix, "-item-tiled"), _define_property({}, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex)),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
         }, renderLabel(item));
     })));

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

@@ -1,5 +1,4 @@
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;
@@ -50,6 +49,9 @@
     height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
+    &-placeholder {
+      height: $picker-item-height;
+    }
   }
 
   &-roller-item {

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

@@ -3,7 +3,6 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;
@@ -49,6 +48,9 @@
   z-index: 1;
   transform-style: preserve-3d;
 }
+.nut-pickerview-roller-placeholder {
+  height: var(--nutui-picker-item-height, 36px);
+}
 .nut-pickerview-roller-item {
   position: absolute;
   top: 0;

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

@@ -48,6 +48,9 @@
   z-index: 1;
   transform-style: preserve-3d;
 }
+.nut-pickerview-roller-placeholder {
+  height: 36px;
+}
 .nut-pickerview-roller-item {
   position: absolute;
   top: 0;

package/dist/es/packages/resultpage/style/index.js

@@ -1 +1,2 @@
+import '../../button/style';
 import './resultpage.scss';