@nutui/nutui-react-taro 3.0.5 → 3.0.7

package/dist/cjs/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/cjs/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/cjs/packages/numberkeyboard/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

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

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {
@@ -429,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/cjs/packages/pickerview/pickerroller.js

@@ -42,6 +42,7 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
     var isMoving = (0, _react.useRef)(false);
     var rollerRef = (0, _react.useRef)(null);
     var pickerRollerRef = (0, _react.useRef)(null);
+    var placeholderRef = (0, _react.useRef)(null);
     var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startTime = _useState3[0], setStartTime = _useState3[1];
     var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startY = _useState4[0], setStartY = _useState4[1];
     var transformY = (0, _react.useRef)(0);
@@ -136,7 +137,7 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
                         ]);
                         return [
                             4,
-                            (0, _getrectbytaro.getRectByTaro)(rollerRef.current)
+                            (0, _getrectbytaro.getRectByTaro)(placeholderRef.current)
                         ];
                     case 1:
                         placeholder = _state.sent();
@@ -184,7 +185,7 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
         }
     }, [
         pickerRollerRef.current,
-        rollerRef.current
+        placeholderRef.current
     ]);
     (0, _react.useEffect)(function() {
         isMoving.current = false;
@@ -226,6 +227,10 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
         className: "nut-pickerview-list",
         ref: pickerRollerRef
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-placeholder"),
+        ref: placeholderRef,
+        id: "".concat(classPrefix, "-placeholder-").concat(uuid)
+    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classPrefix,
         id: "".concat(classPrefix, "-").concat(uuid),
         ref: rollerRef,

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

@@ -49,6 +49,9 @@
     height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
+    &-placeholder {
+      height: $picker-item-height;
+    }
   }
 
   &-roller-item {

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

@@ -48,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/cjs/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/cjs/packages/popover/popover.d.ts

@@ -1,10 +1,3 @@
 import React, { FunctionComponent } from 'react';
 import { TaroPopoverProps } from "../../types";
-export interface RootPosition {
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-    right: number;
-}
 export declare const Popover: FunctionComponent<Partial<TaroPopoverProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>>;