@nutui/nutui-react 3.0.5 → 3.0.7

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

@@ -107,6 +107,9 @@
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 .nut-badge-number {
   font-family: "JD";
 }
@@ -132,14 +135,14 @@
   height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-width, 4px);
-  width: var(--nutui-badge-dot-width, 4px);
-  height: var(--nutui-badge-dot-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-width, 8px);
-  width: var(--nutui-badge-dot-width, 8px);
-  height: var(--nutui-badge-dot-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;

package/dist/es/packages/imagepreview/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/es/packages/indicator/indicator.js

@@ -13,7 +13,7 @@ var defaultProps = {
 var classPrefix = "nut-indicator";
 export var Indicator = function(props) {
     var maybeFixedWidth = function maybeFixedWidth() {
-        if (total === 2 || type === 'slide') {
+        if (type === 'dualScreen' || type === 'slide') {
             return "".concat(classPrefix, "-fixed-width");
         }
         return '';

package/dist/es/packages/lottie/index.d.ts

@@ -1,3 +1,3 @@
-import { Lottie } from './web';
+import { Lottie } from './lottie';
 export type { WebLottieProps as LottieProps } from "../../types";
 export default Lottie;

package/dist/es/packages/lottie/index.js

@@ -1,2 +1,2 @@
-import { Lottie } from "./web";
+import { Lottie } from "./lottie";
 export default Lottie;

package/dist/es/packages/notify/Notification.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface NotificationProps extends BasicComponent {
-    id: string;
-    message: string | React.ReactNode;
-    duration: number;
-    type: string;
-    position: string;
-    onClose: () => void;
-    onClick: () => void;
+import { WebNotifyProps } from "../../types";
+export interface NotificationProps extends WebNotifyProps {
+    message: React.ReactNode;
 }
 interface State {
     show: boolean;

package/dist/es/packages/notify/Notification.js

@@ -8,6 +8,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import * as React from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
+import { Close } from "@nutui/icons-react";
 import { render as reactRender, unmount } from "../../utils/render";
 var classPrefix = 'nut-notify';
 var _React_PureComponent;
@@ -33,6 +34,7 @@ var Notification = /*#__PURE__*/ function(_superClass) {
         {
             key: "close",
             value: function close() {
+                var _this_props;
                 this.setState({
                     show: false
                 });
@@ -41,7 +43,7 @@ var Notification = /*#__PURE__*/ function(_superClass) {
                     var element = document.getElementById(this.props.id);
                     element && element.parentNode && element.parentNode.removeChild(element);
                 }
-                this.props.onClose();
+                (_this_props = this.props) === null || _this_props === void 0 ? void 0 : _this_props.onClose();
             }
         },
         {
@@ -86,22 +88,40 @@ var Notification = /*#__PURE__*/ function(_superClass) {
         {
             key: "render",
             value: function render() {
-                var _this_props = this.props, style = _this_props.style, message = _this_props.message, type = _this_props.type, className = _this_props.className, position = _this_props.position;
+                var _this_props = this.props, id = _this_props.id, style = _this_props.style, message = _this_props.message, leftIcon = _this_props.leftIcon, rightIcon = _this_props.rightIcon, closeable = _this_props.closeable, className = _this_props.className, position = _this_props.position, distance = _this_props.distance, navHeight = _this_props.navHeight;
                 var show = this.state.show;
+                var classes = classNames(classPrefix, className);
+                var getDistance = function() {
+                    if (position === 'top') {
+                        return {
+                            top: "".concat(distance + navHeight, "px")
+                        };
+                    }
+                    return {
+                        bottom: "".concat(distance, "px")
+                    };
+                };
                 var _obj;
-                var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-popup-top"), position === 'top'), _define_property(_obj, "".concat(classPrefix, "-popup-bottom"), position === 'bottom'), _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(classPrefix, "-").concat(type), true), _obj));
                 return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(CSSTransition, {
                     in: show,
                     timeout: 300,
                     classNames: "fade",
                     unmountOnExit: true,
                     appear: true,
-                    position: position
+                    position: position,
+                    id: id
                 }, /*#__PURE__*/ React.createElement("div", {
-                    className: "".concat(classes, " ").concat(className),
-                    style: style,
+                    className: classes,
+                    style: _object_spread({}, style, getDistance()),
                     onClick: this.clickCover
-                }, message)));
+                }, leftIcon ? /*#__PURE__*/ React.createElement("div", {
+                    className: "".concat(classPrefix, "-left-icon")
+                }, leftIcon) : null, /*#__PURE__*/ React.createElement("div", {
+                    className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-content"), true), _define_property(_obj, "".concat(classPrefix, "-ellipsis"), closeable || rightIcon), _define_property(_obj, "".concat(classPrefix, "-layout-left"), leftIcon || rightIcon), _obj))
+                }, message), rightIcon || closeable ? /*#__PURE__*/ React.createElement("div", {
+                    className: "".concat(classPrefix, "-right-icon"),
+                    onClick: this.close
+                }, rightIcon || (closeable ? /*#__PURE__*/ React.createElement(Close, null) : null)) : null)));
             }
         }
     ]);

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

@@ -1,10 +1,6 @@
 import * as React from 'react';
 declare const _default: {
     text(message: string | React.ReactNode, option?: {}): void;
-    success(message: string | React.ReactNode, option?: {}): void;
-    primary(message: string | React.ReactNode, option?: {}): void;
-    danger(message: string | React.ReactNode, option?: {}): void;
-    warn(message: string | React.ReactNode, option?: {}): void;
     hide(): void;
 };
 export default _default;

package/dist/es/packages/notify/notify.js

@@ -6,9 +6,13 @@ import { ComponentDefaults } from "../../utils/typings";
 var messageInstance = null;
 var options = _object_spread_props(_object_spread({}, ComponentDefaults), {
     id: '',
-    duration: 3000,
-    type: 'danger',
     position: 'top',
+    distance: 8,
+    navHeight: 57,
+    closeable: false,
+    leftIcon: null,
+    rightIcon: null,
+    duration: 3000,
     onClose: function() {},
     onClick: function() {}
 });
@@ -41,38 +45,6 @@ export default {
             type: 'base'
         }, option));
     },
-    success: function success(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice(_object_spread({
-            message: message,
-            type: 'success'
-        }, option));
-    },
-    primary: function primary(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice(_object_spread({
-            message: message,
-            type: 'primary'
-        }, option));
-    },
-    danger: function danger(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice(_object_spread({
-            message: message,
-            type: 'danger'
-        }, option));
-    },
-    warn: function warn(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice(_object_spread({
-            message: message,
-            type: 'warning'
-        }, option));
-    },
     hide: function hide() {
         if (messageInstance) {
             messageInstance.destroy();

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

@@ -6,7 +6,7 @@
 /*入场动画过程*/
 .fade-enter-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-in;
 }
 
 /*入场动画结束*/
@@ -22,7 +22,7 @@
 /*离场动画过程*/
 .fade-exit-active {
   opacity: 0;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-out;
 }
 
 /*离场动画结束*/
@@ -38,56 +38,59 @@
 /*页面第一次加载时的动画过程*/
 .fade-appear-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms;
 }
 
 .nut-notify {
+  position: fixed;
+  left: 8px;
+  right: 8px;
+  z-index: $notify-z-index;
   display: flex;
-  justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: $notify-padding;
-  color: $notify-text-color;
-  font-size: $notify-font-size;
-  white-space: pre-wrap;
-  word-wrap: break-word;
   height: $notify-height;
-
-  &-popup-top,
-  &-popup-bottom {
-    position: fixed;
-    left: 0;
-    right: 0;
-    overflow-y: auto;
-    transition: transform 0.3s;
-    z-index: 9999;
-  }
-
-  &-popup-top {
-    top: 0;
-  }
-
-  &-popup-bottom {
-    bottom: 0;
+  padding: $notify-padding;
+  border-radius: $notify-border-radius;
+  box-shadow: $notify-box-shadow;
+  background-color: $notify-background-color;
+
+  &-content {
+    flex: 1;
+    text-align: center;
+    min-width: 0;
+    font-size: $notify-font-size;
+    color: $notify-text-color;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
-  &-base {
-    background: $notify-base-background-color;
+  &-ellipsis {
+    text-overflow: ellipsis;
   }
 
-  &-primary {
-    background: $notify-primary-background-color;
+  &-layout-left {
+    text-align: left;
   }
 
-  &-success {
-    background: $notify-success-background-color;
+  &-left-icon,
+  &-right-icon {
+    display: inline-flex;
   }
 
-  &-danger {
-    background: $notify-danger-background-color;
+  &-left-icon {
+    margin-right: 6px;
+    .nut-icon {
+      height: 16px;
+      width: 16px;
+    }
   }
 
-  &-warning {
-    background: $notify-warning-background-color;
+  &-right-icon {
+    margin-left: 6px;
+    .nut-icon {
+      height: 12px;
+      width: 12px;
+    }
   }
 }

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/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/es/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/es/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/es/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;