@nutui/nutui-react 3.0.4 → 3.0.6

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

@@ -60,6 +60,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -92,13 +94,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   min-width: var(--nutui-badge-min-width, 6px);
   padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
   color: var(--nutui-badge-color, #ffffff);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -106,14 +107,11 @@
   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";
-  /* #ifdef harmony */
-  line-height: 12px;
-  /* #endif */
-  /* #ifndef harmony */
-  line-height: 13px;
-  /* #endif */
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
@@ -137,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;
@@ -159,7 +157,6 @@
   z-index: var(--nutui-fixednav-index, 900);
   display: inline-block;
   height: 50px;
-  right: 0;
 }
 .nut-fixednav.active .nut-fixednav-btn .nut-icon {
   transform: rotate(180deg);
@@ -167,18 +164,16 @@
 .nut-fixednav.active .nut-fixednav-list {
   transform: translateX(0%) !important;
 }
-.nut-fixednav.active.left .nut-icon {
-  transform: rotate(0deg) !important;
+.nut-fixednav.active.nut-fixednav-left .nut-icon {
+  transform: rotate(0deg);
 }
 .nut-fixednav-btn {
   box-sizing: border-box;
   position: absolute;
-  right: 0;
   z-index: var(--nutui-fixednav-index, 900);
   width: 70px;
   height: 100%;
   background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23));
-  border-radius: 45px 0px 0px 45px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
@@ -192,15 +187,10 @@
   flex-shrink: 0;
 }
 .nut-fixednav-btn .nut-icon {
-  margin-right: 5px;
-  transition: all 0.3s;
-  transform: rotate(0deg);
   transition: all 0.3s;
 }
 .nut-fixednav-list {
   position: absolute;
-  right: 0;
-  transform: translateX(100%);
   transition: all 0.5s;
   z-index: var(--nutui-fixednav-index, 900);
   flex-shrink: 0;
@@ -208,10 +198,7 @@
   background: var(--nutui-fixednav-background-color, #ffffff);
   display: flex;
   justify-content: space-between;
-  border-radius: 25px 0px 0px 25px;
   box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
-  padding-left: 20px;
-  padding-right: 80px;
 }
 .nut-fixednav-list-item {
   position: relative;
@@ -225,45 +212,63 @@
   flex-shrink: 0;
   color: var(--nutui-fixednav-color, #1a1a1a);
 }
-.nut-fixednav-list-item img {
+.nut-fixednav-list-item .nut-fixednav-list-text {
+  font-size: 10px;
+}
+.nut-fixednav-list-image {
   width: 20px;
   height: 20px;
   margin-bottom: 2px;
 }
-.nut-fixednav-list-item .nut-fixednav-list-text {
-  font-size: 10px;
+.nut-fixednav-right {
+  right: 0;
 }
-.nut-fixednav.left {
-  right: auto;
+.nut-fixednav-right .nut-fixednav-btn {
+  right: 0;
+  border-radius: 45px 0px 0px 45px;
+}
+.nut-fixednav-right .nut-fixednav-btn .nut-icon {
+  margin-right: 5px;
+  transform: rotate(0deg);
+}
+.nut-fixednav-right .nut-fixednav-list {
+  right: 0;
+  transform: translateX(100%);
+  border-radius: 25px 0px 0px 25px;
+  padding-left: 20px;
+  padding-right: 80px;
+}
+.nut-fixednav-left {
   left: 0;
 }
-.nut-fixednav.left .nut-fixednav-btn {
+.nut-fixednav-left .nut-fixednav-btn {
   flex-direction: row-reverse;
-  right: auto;
   left: 0;
   border-radius: 0 45px 45px 0;
 }
-.nut-fixednav.left .nut-fixednav-btn .nut-icon {
-  transform: rotate(180deg);
-  margin-right: 0px;
+.nut-fixednav-left .nut-fixednav-btn .nut-icon {
   margin-left: 5px;
+  transform: rotate(180deg);
 }
-.nut-fixednav.left .nut-fixednav-list {
+.nut-fixednav-left .nut-fixednav-list {
   transform: translateX(-100%);
-  right: auto;
+  left: 0;
   border-radius: 0px 25px 25px 0px;
   padding-left: 80px;
   padding-right: 20px;
-  margin: 0;
 }
 
-[dir=rtl] .nut-fixednav,
-.nut-rtl .nut-fixednav {
+[dir=rtl] .nut-fixednav-right,
+.nut-rtl .nut-fixednav-right {
   right: auto;
   left: 0;
 }
 [dir=rtl] .nut-fixednav.active .nut-icon,
 .nut-rtl .nut-fixednav.active .nut-icon {
+  transform: rotate(0deg);
+}
+[dir=rtl] .nut-fixednav.active.nut-fixednav-left .nut-icon,
+.nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon {
   transform: rotate(-180deg);
 }
 [dir=rtl] .nut-fixednav-btn,
@@ -293,25 +298,25 @@
   right: auto;
   left: 0;
 }
-[dir=rtl] .nut-fixednav.left,
-.nut-rtl .nut-fixednav.left {
+[dir=rtl] .nut-fixednav-left,
+.nut-rtl .nut-fixednav-left {
   left: auto;
   right: 0;
 }
-[dir=rtl] .nut-fixednav.left .nut-fixednav-btn,
-.nut-rtl .nut-fixednav.left .nut-fixednav-btn {
+[dir=rtl] .nut-fixednav-left .nut-fixednav-btn,
+.nut-rtl .nut-fixednav-left .nut-fixednav-btn {
   left: auto;
   right: 0;
   border-radius: 45px 0 0 45px;
 }
-[dir=rtl] .nut-fixednav.left .nut-fixednav-btn .nut-icon,
-.nut-rtl .nut-fixednav.left .nut-fixednav-btn .nut-icon {
+[dir=rtl] .nut-fixednav-left .nut-fixednav-btn .nut-icon,
+.nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon {
   transform: rotate(0deg);
   margin-right: 5px;
   margin-left: 0px;
 }
-[dir=rtl] .nut-fixednav.left .nut-fixednav-list,
-.nut-rtl .nut-fixednav.left .nut-fixednav-list {
+[dir=rtl] .nut-fixednav-left .nut-fixednav-list,
+.nut-rtl .nut-fixednav-left .nut-fixednav-list {
   transform: translateX(100%);
   right: auto;
   left: auto;

package/dist/cjs/packages/imagepreview/imagepreview.js

@@ -13,6 +13,7 @@ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcar
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreact = require("@nutui/icons-react");
@@ -35,7 +36,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     indicatorColor: '#fff',
     closeIcon: false,
     closeIconPosition: 'top-right',
-    onChange: function onChange(value) {},
+    onChange: function onChange() {},
     onClose: function onClose() {}
 });
 var ImagePreview = function ImagePreview(props) {
@@ -46,81 +47,59 @@ var ImagePreview = function ImagePreview(props) {
         value: value,
         defaultValue: defaultValue,
         finalValue: defaultValue,
-        onChange: function onChange1(val) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(val);
-        }
+        onChange: onChange
     }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), active = _useState1[0], setActive = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
     var _useState3 = (0, _sliced_to_array._)((0, _react.useState)({
         scale: 1,
-        moveable: false
+        moveable: false,
+        oriDistance: 0,
+        originScale: 1
     }), 2), store = _useState3[0], setStore = _useState3[1];
-    var _useState4 // 用来辅助监听双击
-     = (0, _sliced_to_array._)((0, _react.useState)(0), 2), lastTouchEndTime = _useState4[0], setLastTouchEndTime = _useState4[1];
+    var lastTouchEndTime = (0, _react.useRef)(0) // 用来辅助监听双击
+    ;
     var onTouchStart = function onTouchStart(event) {
         var touches = event.touches;
         var events = touches[0];
         var events2 = touches[1];
-        // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
-        var curTouchTime = new Date().getTime();
-        if (curTouchTime - lastTouchEndTime < 300) {
+        // 如果是原尺寸，双击放大；否则回到原尺寸。
+        var curTouchTime = Date.now();
+        if (curTouchTime - lastTouchEndTime.current < 100) {
             var store1 = store;
-            if (store1.scale > 1) {
-                store1.scale = 1;
-            } else if (store1.scale === 1) {
-                store1.scale = 2;
-            }
+            store1.scale = store1.scale === 1 ? 2 : 1;
             scaleNow();
         }
         var store11 = store;
         store11.moveable = true;
         if (events2) {
             // 如果开始两指操作，记录初始时刻两指间的距离
-            store11.oriDistance = getDistance({
-                x: events.pageX,
-                y: events.pageY
-            }, {
-                x: events2.pageX,
-                y: events2.pageY
-            });
+            store11.oriDistance = getDistance(events, events2);
         }
         // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
-        store11.originScale = store11.scale || 1;
+        store11.originScale = store11.scale;
     };
     var onTouchMove = function onTouchMove(event) {
+        if (!store.moveable) return;
         var touches = event.touches;
         var events = touches[0];
         var events2 = touches[1];
-        if (!store.moveable) {
-            return;
-        }
         var store1 = store;
         // 双指移动
         if (events2) {
-            // 获得当前两点间的距离
-            var curDistance = getDistance({
-                x: events.pageX,
-                y: events.pageY
-            }, {
-                x: events2.pageX,
-                y: events2.pageY
-            });
+            var curDistance = getDistance(events, events2);
             /** 此处计算倍数，距离放大（缩小） k 倍则 scale 也 扩大（缩小） k 倍。距离放大（缩小）倍数 = 结束时两点距离 除以 开始时两点距离
        * 注意此处的 scale 变化是基于 store.scale 的。
        * store.scale 是一个暂存值，比如第一次放大 2 倍，则 store.scale 为 2。
        * 再次两指触碰的时候，store.originScale 就为 store.scale 的值，基于此时的 store.scale 继续放大缩小。 * */ var curScale = curDistance / store1.oriDistance;
-            store1.scale = store1.originScale * curScale;
             // 最大放大 3 倍，缩小后松手要弹回原比例
-            if (store1.scale > 3) {
-                store1.scale = 3;
-            }
+            store1.scale = Math.min(store1.originScale * curScale, 3);
             scaleNow();
         }
     };
     var onTouchEnd = function onTouchEnd() {
-        setLastTouchEndTime(new Date().getTime());
+        lastTouchEndTime.current = Date.now();
         var store1 = store;
         store1.moveable = false;
         if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
@@ -135,6 +114,11 @@ var ImagePreview = function ImagePreview(props) {
         document.addEventListener('touchmove', onTouchMove);
         document.addEventListener('touchend', onTouchEnd);
         document.addEventListener('touchcancel', onTouchEnd);
+        return function() {
+            document.removeEventListener('touchcancel', onTouchEnd);
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
     };
     (0, _react.useEffect)(function() {
         setShowPop(visible);
@@ -152,22 +136,19 @@ var ImagePreview = function ImagePreview(props) {
         innerNo
     ]);
     (0, _react.useEffect)(function() {
-        setMaxNo((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0));
+        setMaxNo(images.length + videos.length);
     }, [
         images,
         videos
     ]);
     var scaleNow = function scaleNow() {
         if (ref.current) {
-            ;
             ref.current.style.transform = "scale(".concat(store.scale, ")");
         }
     };
-    // 计算两个点的距离
+    // 用于查找给定数字的斜边。起止两点间距离。
     var getDistance = function getDistance(first, second) {
-        // 计算两个点起始时刻的距离和终止时刻的距离，终止时刻距离变大了则放大，变小了则缩小
-        // 放大 k 倍则 scale 也 扩大 k 倍
-        return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+        return Math.hypot(Math.abs(second.pageX - first.pageX), Math.abs(second.pageY - first.pageY));
     };
     var slideChangeEnd = function slideChangeEnd(page) {
         setActive(page + 1);
@@ -178,7 +159,7 @@ var ImagePreview = function ImagePreview(props) {
         setShowPop(false);
         setActive(innerNo);
         scaleNow();
-        onClose && onClose();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
         setStore((0, _object_spread_props._)((0, _object_spread._)({}, store), {
             scale: 1
         }));
@@ -186,24 +167,19 @@ var ImagePreview = function ImagePreview(props) {
     var closeOnImg = function closeOnImg(e) {
         e.stopPropagation();
         // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
-        if (closeOnContentClick) {
-            onCloseInner(e);
-        }
+        if (closeOnContentClick) onCloseInner(e);
     };
     var duration = typeof autoPlay === 'string' ? parseInt(autoPlay) : autoPlay;
     return /*#__PURE__*/ _react.default.createElement(_popup.default, {
         visible: showPop,
         className: "".concat(classPrefix, "-pop"),
-        style: {
-            width: '100%'
-        },
         onClick: onCloseInner
     }, /*#__PURE__*/ _react.default.createElement("div", {
         className: (0, _classnames.default)(classPrefix, className),
         style: style,
         ref: ref,
         onTouchStart: onTouchStart
-    }, showPop ? /*#__PURE__*/ _react.default.createElement(_swiper.default, {
+    }, showPop && /*#__PURE__*/ _react.default.createElement(_swiper.default, {
         autoPlay: !!duration,
         duration: duration,
         className: "".concat(classPrefix, "-swiper"),
@@ -215,49 +191,38 @@ var ImagePreview = function ImagePreview(props) {
         onChange: function onChange(page) {
             return slideChangeEnd(page);
         },
-        defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
+        defaultValue: innerNo > maxNo ? maxNo - 1 : innerNo - 1,
         indicator: indicator
-    }, (videos !== null && videos !== void 0 ? videos : []).map(function(item) {
+    }, (0, _to_consumable_array._)(videos.map(function(item) {
         return {
             type: 'video',
             data: item
         };
-    }).concat((images !== null && images !== void 0 ? images : []).map(function(item) {
+    })).concat((0, _to_consumable_array._)(images.map(function(item) {
         return {
             type: 'image',
             data: item
         };
-    })).sort(function(a, b) {
-        var _a_data, _b_data;
+    }))).sort(function(a, b) {
         var _a_data_index, _b_data_index;
-        return ((_a_data_index = (_a_data = a.data) === null || _a_data === void 0 ? void 0 : _a_data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = (_b_data = b.data) === null || _b_data === void 0 ? void 0 : _b_data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
+        return ((_a_data_index = a.data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = b.data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
     }).map(function(item, index) {
-        if (item.type === 'video') {
-            var _item_data = item.data, source = _item_data.source, options = _item_data.options;
-            return /*#__PURE__*/ _react.default.createElement(_swiperitem.default, {
-                key: index
-            }, /*#__PURE__*/ _react.default.createElement(_video.default, {
-                source: source,
-                options: options,
-                onClick: closeOnImg
-            }));
-        }
-        if (item.type === 'image') {
-            var src = item.data.src;
-            return /*#__PURE__*/ _react.default.createElement(_swiperitem.default, {
-                key: index
-            }, /*#__PURE__*/ _react.default.createElement(_image.default, {
-                src: src,
-                draggable: false,
-                onClick: closeOnImg
-            }));
-        }
-        return null;
-    })) : null), pagination ? /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_swiperitem.default, {
+            key: index
+        }, item.type === 'video' ? /*#__PURE__*/ _react.default.createElement(_video.default, {
+            source: item.data.source,
+            options: item.data.options,
+            onClick: closeOnImg
+        }) : /*#__PURE__*/ _react.default.createElement(_image.default, {
+            src: item.data.src,
+            draggable: false,
+            onClick: closeOnImg
+        }));
+    }))), pagination && /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-index")
-    }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)) : null, closeIcon !== false ? /*#__PURE__*/ _react.default.createElement("div", {
+    }, active, "/", maxNo), closeIcon !== false && /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
         onClick: onCloseInner
-    }, closeIcon === true ? /*#__PURE__*/ _react.default.createElement(_iconsreact.Close, null) : closeIcon) : null);
+    }, closeIcon === true ? /*#__PURE__*/ _react.default.createElement(_iconsreact.Close, null) : closeIcon));
 };
 ImagePreview.displayName = 'NutImagePreview';

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

@@ -57,11 +57,12 @@
   }
 
   &-pop {
+    width: 100%;
     height: 100%;
+    max-width: 100% !important;
     background: transparent !important;
     display: flex;
     align-items: center;
-    width: 100%;
   }
 
   &-swiper {

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

@@ -697,11 +697,12 @@
   text-align: center;
 }
 .nut-imagepreview-pop {
+  width: 100%;
   height: 100%;
+  max-width: 100% !important;
   background: transparent !important;
   display: flex;
   align-items: center;
-  width: 100%;
 }
 .nut-imagepreview-swiper .nut-imagepreview-swiper-item,
 .nut-imagepreview-swiper .nut-swiper-item {

package/dist/cjs/packages/indicator/indicator.js

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

package/dist/cjs/packages/inputnumber/inputnumber.js

@@ -247,7 +247,7 @@ var InputNumber = function InputNumber(props) {
         className: "".concat(classPrefix, "-minus"),
         onClick: handleReduce
     }, /*#__PURE__*/ _react.default.createElement(_iconsreact.Minus, {
-        className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === min || disabled))
+        className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
     })), /*#__PURE__*/ _react.default.createElement("input", {
         className: (0, _classnames.default)("".concat(classPrefix, "-input"), (0, _define_property._)({}, "".concat(classPrefix, "-input-disabled"), disabled)),
         ref: inputRef,
@@ -262,7 +262,7 @@ var InputNumber = function InputNumber(props) {
         className: "".concat(classPrefix, "-add"),
         onClick: handlePlus
     }, /*#__PURE__*/ _react.default.createElement(_iconsreact.Plus, {
-        className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === max || disabled))
+        className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
     })));
 };
 InputNumber.displayName = 'NutInputNumber';

package/dist/cjs/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/cjs/packages/lottie/index.js

@@ -8,5 +8,5 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
-var _web = require("./web");
-var _default = _web.Lottie;
+var _lottie = require("./lottie");
+var _default = _lottie.Lottie;

package/dist/cjs/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/cjs/packages/notify/Notification.js

@@ -20,6 +20,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _reacttransitiongroup = require("react-transition-group");
+var _iconsreact = require("@nutui/icons-react");
 var _render = require("../../utils/render");
 var classPrefix = 'nut-notify';
 var _React_PureComponent;
@@ -45,6 +46,7 @@ var Notification = /*#__PURE__*/ function(_superClass) {
         {
             key: "close",
             value: function close() {
+                var _this_props;
                 this.setState({
                     show: false
                 });
@@ -53,7 +55,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();
             }
         },
         {
@@ -98,22 +100,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 = (0, _classnames.default)(classPrefix, className);
+                var getDistance = function getDistance() {
+                    if (position === 'top') {
+                        return {
+                            top: "".concat(distance + navHeight, "px")
+                        };
+                    }
+                    return {
+                        bottom: "".concat(distance, "px")
+                    };
+                };
                 var _obj;
-                var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-popup-top"), position === 'top'), (0, _define_property._)(_obj, "".concat(classPrefix, "-popup-bottom"), position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type), true), _obj));
                 return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_reacttransitiongroup.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: (0, _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: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-ellipsis"), closeable || rightIcon), (0, _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(_iconsreact.Close, null) : null)) : null)));
             }
         }
     ]);
@@ -137,7 +157,7 @@ Notification.newInstance = function(properties, callback) {
         });
     };
     var element = document.createElement('div');
-    var id = properties.id ? properties.id : "".concat(new Date().getTime());
+    var id = properties.id ? properties.id : "".concat(Date.now());
     element.id = id;
     properties.id = id;
     document.body.appendChild(element);