@nutui/nutui-react 3.0.5 → 3.0.7

package/dist/cjs/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/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/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/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/popover/popover.js

@@ -71,12 +71,12 @@ var Popover = function Popover(props) {
     var popoverRef = (0, _react.useRef)(null);
     var popoverContentRef = (0, _react.useRef)(null);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), showPopup = _useState[0], setShowPopup = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(), 2), rootPosition = _useState1[0], setRootPosition = _useState1[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(), 2), wrapperPosition = _useState1[0], setWrapperPosition = _useState1[1];
     (0, _react.useEffect)(function() {
         setShowPopup(visible);
         if (visible) {
             setTimeout(function() {
-                getContentWidth();
+                getWrapperPosition();
             }, 0);
         }
     }, [
@@ -84,25 +84,10 @@ var Popover = function Popover(props) {
         location
     ]);
     var update = (0, _react.useRef)(function(e) {
-        getContentWidth();
+        getWrapperPosition();
     });
-    (0, _react.useEffect)(function() {
-        if (visible) {
-            scrollableParents.forEach(function(parent) {
-                parent.addEventListener('scroll', update.current, {
-                    passive: true
-                });
-            });
-        } else {
-            scrollableParents.forEach(function(parent) {
-                return parent.removeEventListener('scroll', update.current);
-            });
-        }
-    }, [
-        visible
-    ]);
-    var element = null;
     var targetSet = [];
+    var element = null;
     if (_canusedom.canUseDom && targetId) {
         element = document.querySelector("#".concat(targetId));
         targetSet = [
@@ -115,39 +100,59 @@ var Popover = function Popover(props) {
             popoverContentRef.current
         ];
     }
-    (0, _useclickaway.default)(function() {
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, targetSet, 'touchstart', true, visible, closeOnOutsideClick);
     var scrollableParents = (0, _react.useMemo)(function() {
         return (0, _getscrollparent.getAllScrollableParents)(element || popoverRef.current);
     }, [
         element,
         popoverRef.current
     ]);
-    var getContentWidth = function getContentWidth() {
+    (0, _react.useEffect)(function() {
+        if (visible) {
+            scrollableParents.forEach(function(parent) {
+                parent.addEventListener('scroll', update.current, {
+                    passive: true
+                });
+            });
+        } else {
+            scrollableParents.forEach(function(parent) {
+                return parent.removeEventListener('scroll', update.current);
+            });
+        }
+    }, [
+        visible
+    ]);
+    (0, _useclickaway.default)(function() {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, targetSet, 'touchstart', true, visible, closeOnOutsideClick);
+    var getWrapperPosition = function getWrapperPosition() {
         var rect = (0, _useclientrect.getRect)(targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current);
-        setRootPosition({
-            width: rect.width,
-            height: rect.height,
-            left: rtl ? rect.right : rect.left,
-            top: rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop),
-            right: rtl ? rect.left : rect.right
+        var distance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
+        var width = rect.width, height = rect.height, right = rect.right, left = rect.left, top = rect.top;
+        setWrapperPosition({
+            width: width,
+            height: height,
+            left: rtl ? right : left,
+            top: top + distance,
+            right: rtl ? left : right
         });
     };
-    var _obj;
-    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), _obj), className);
+    var classes = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
     var popoverArrow = function popoverArrow() {
         var prefixCls = 'nut-popover-arrow';
-        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(location.split('-')[0], " ").concat(prefixCls, "-").concat(location);
+        var direction = location.split('-')[0];
+        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "-").concat(location);
     };
-    var getRootPosition = function getRootPosition() {
+    var getPopoverPosition = function getPopoverPosition() {
         var _popoverContentRef_current, _popoverContentRef_current1;
         var styles = {};
-        if (!rootPosition) return {};
-        var contentWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
-        var contentHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
-        var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
+        if (!wrapperPosition) {
+            styles.visibility = 'hidden';
+            return styles;
+        }
+        var popWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
+        var popHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
+        var width = wrapperPosition.width, height = wrapperPosition.height, left = wrapperPosition.left, top = wrapperPosition.top, right = wrapperPosition.right;
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
         var cross = 0;
@@ -163,15 +168,15 @@ var Popover = function Popover(props) {
                 'bottom',
                 'top'
             ].includes(direction)) {
-                var h = direction === 'bottom' ? height + cross : -(contentHeight + cross);
+                var h = direction === 'bottom' ? height + cross : -(popHeight + cross);
                 styles.top = "".concat(top + h, "px");
                 if (!skew) {
-                    styles[dir] = "".concat(-(contentWidth - width) / 2 + rootPosition[dir] + parallel, "px");
+                    styles[dir] = "".concat(-(popWidth - width) / 2 + wrapperPosition[dir] + parallel, "px");
                 }
-                if (skew === 'start') {
+                if (skew === 'left') {
                     styles.left = "".concat(left + parallel, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'right') {
                     styles.left = "".concat(right + parallel, "px");
                 }
             }
@@ -179,22 +184,23 @@ var Popover = function Popover(props) {
                 'left',
                 'right'
             ].includes(direction)) {
-                var contentW = direction === 'left' ? -(contentWidth + cross) : width + cross;
+                var contentW = direction === 'left' ? -(popWidth + cross) : width + cross;
                 styles.left = "".concat(left + contentW, "px");
                 if (!skew) {
-                    styles.top = "".concat(top - contentHeight / 2 + height / 2 - 4 + parallel, "px");
+                    styles.top = "".concat(top - popHeight / 2 + height / 2 - 4 + parallel, "px");
                 }
-                if (skew === 'start') {
+                if (skew === 'top') {
                     styles.top = "".concat(top + parallel, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'bottom') {
                     styles.top = "".concat(top + height + parallel, "px");
                 }
             }
         }
+        styles.visibility = popWidth === 0 ? 'hidden' : 'initial';
         return styles;
     };
-    var arrowStyle = function arrowStyle() {
+    var popoverArrowStyle = function popoverArrowStyle() {
         var styles = {};
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
@@ -209,10 +215,10 @@ var Popover = function Popover(props) {
                 if (!skew) {
                     styles[dir] = "calc(50% + ".concat(arrowOffset, "px)");
                 }
-                if (skew === 'start') {
+                if (skew === 'left') {
                     styles[dir] = "".concat(base + arrowOffset, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'right') {
                     styles[dir2] = "".concat(base - arrowOffset, "px");
                 }
             }
@@ -223,10 +229,10 @@ var Popover = function Popover(props) {
                 if (!skew) {
                     styles.top = "calc(50% - ".concat(arrowOffset, "px)");
                 }
-                if (skew === 'start') {
+                if (skew === 'top') {
                     styles.top = "".concat(base - arrowOffset, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'bottom') {
                     styles.bottom = "".concat(base + arrowOffset, "px");
                 }
             }
@@ -235,28 +241,28 @@ var Popover = function Popover(props) {
     };
     var handleSelect = function handleSelect(item, index) {
         if (!item.disabled) {
-            onSelect && onSelect(item, index);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(item, index);
         }
         if (closeOnActionClick) {
-            onClick && onClick();
-            onClose && onClose();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !targetId && /*#__PURE__*/ _react.default.createElement("div", {
         className: "nut-popover-wrapper",
         ref: popoverRef,
         onClick: function onClick1() {
-            onClick && onClick();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
             if (!visible) {
-                onOpen && onOpen();
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
             } else {
-                onClose && onClose();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         },
         style: style
     }, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement("div", {
         className: classes,
-        style: getRootPosition()
+        style: (0, _object_spread._)({}, getPopoverPosition(), style)
     }, /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
         className: "nut-popover-content nut-popover-content-".concat(location),
         visible: showPopup,
@@ -268,26 +274,27 @@ var Popover = function Popover(props) {
         ref: popoverContentRef
     }, showArrow && /*#__PURE__*/ _react.default.createElement("div", {
         className: popoverArrow(),
-        style: arrowStyle()
+        style: popoverArrowStyle()
     }, /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowRadius, {
         width: 8,
         height: 4
     })), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
+        var _item_action;
         return /*#__PURE__*/ _react.default.createElement("div", {
             className: (0, _classnames.default)({
-                'nut-popover-menu-item': true,
-                'nut-popover-menu-disabled': item.disabled
+                'nut-popover-item': true,
+                'nut-popover-item-disabled': item.disabled
             }, item.className),
             key: item.key || index,
             onClick: function onClick() {
                 return handleSelect(item, index);
             }
         }, item.icon && /*#__PURE__*/ _react.default.createElement("div", {
-            className: "nut-popover-menu-item-icon"
+            className: "nut-popover-item-icon"
         }, item.icon), /*#__PURE__*/ _react.default.createElement("div", {
-            className: "nut-popover-menu-item-name"
-        }, item.name), item.action && item.action.icon && /*#__PURE__*/ _react.default.createElement("div", {
-            className: "nut-popover-menu-item-action-icon",
+            className: "nut-popover-item-name"
+        }, item.name), ((_item_action = item.action) === null || _item_action === void 0 ? void 0 : _item_action.icon) && /*#__PURE__*/ _react.default.createElement("div", {
+            className: "nut-popover-item-action-icon",
             onClick: function onClick(e) {
                 var _item_action_onClick, _item_action;
                 return (_item_action = item.action) === null || _item_action === void 0 ? void 0 : (_item_action_onClick = _item_action.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action, e);