@nutui/nutui-react-taro 3.0.3 → 3.0.5

package/dist/es/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;
@@ -108,12 +109,6 @@
 }
 .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);
@@ -159,7 +154,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 +161,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 +184,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 +195,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 +209,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 +295,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/es/packages/fixednav/style/style.harmony.css

@@ -7,7 +7,6 @@
   z-index: 900;
   display: inline-block;
   height: 50px;
-  right: 0;
 }
 .nut-fixednav.active .nut-fixednav-btn .nut-icon {
   transform: rotate(180deg);
@@ -15,18 +14,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: 900;
   width: 70px;
   height: 100%;
   background: #ff0f23;
-  border-radius: 45px 0px 0px 45px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
@@ -40,15 +37,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: 900;
   flex-shrink: 0;
@@ -56,10 +48,7 @@
   background: #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;
@@ -73,45 +62,63 @@
   flex-shrink: 0;
   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,
@@ -141,25 +148,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/es/packages/imagepreview/imagepreview.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import { Video as TaroVideo, View } from "@tarojs/components";
@@ -25,7 +26,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     closeIcon: false,
     closeIconPosition: 'top-right',
     showMenuByLongpress: false,
-    onChange: function(value) {},
+    onChange: function() {},
     onClose: function() {}
 });
 export var ImagePreview = function(props) {
@@ -36,81 +37,59 @@ export var ImagePreview = function(props) {
         value: value,
         defaultValue: defaultValue,
         finalValue: defaultValue,
-        onChange: function(val) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(val);
-        }
+        onChange: onChange
     }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
     var _useState = _sliced_to_array(useState(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), active = _useState1[0], setActive = _useState1[1];
-    var _useState2 = _sliced_to_array(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 = _sliced_to_array(useState(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
     var _useState3 = _sliced_to_array(useState({
         scale: 1,
-        moveable: false
+        moveable: false,
+        oriDistance: 0,
+        originScale: 1
     }), 2), store = _useState3[0], setStore = _useState3[1];
-    var _useState4 // 用来辅助监听双击
-     = _sliced_to_array(useState(0), 2), lastTouchEndTime = _useState4[0], setLastTouchEndTime = _useState4[1];
+    var lastTouchEndTime = useRef(0) // 用来辅助监听双击
+    ;
     var onTouchStart = function(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(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() {
-        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) {
@@ -125,6 +104,11 @@ export var ImagePreview = function(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);
+        };
     };
     useEffect(function() {
         setShowPop(visible);
@@ -142,22 +126,18 @@ export var ImagePreview = function(props) {
         innerNo
     ]);
     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() {
         if (ref.current) {
-            ;
             ref.current.style.transform = "scale(".concat(store.scale, ")");
         }
     };
-    // 计算两个点的距离
     var getDistance = function(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(page) {
         setActive(page + 1);
@@ -168,30 +148,28 @@ export var ImagePreview = function(props) {
         setShowPop(false);
         setActive(innerNo);
         scaleNow();
-        onClose && onClose();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
         setStore(_object_spread_props(_object_spread({}, store), {
             scale: 1
         }));
     };
     var closeOnImg = function(e) {
-        // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
         e.stopPropagation();
-        if (closeOnContentClick) {
-            onCloseInner(e);
-        }
+        // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
+        if (closeOnContentClick) onCloseInner(e);
     };
     return /*#__PURE__*/ React.createElement(Popup, {
         visible: showPop,
         className: "".concat(classPrefix, "-pop"),
-        style: {
-            width: '100%'
-        },
         onClick: onCloseInner
     }, /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, className),
         style: style,
         ref: ref,
-        onTouchStart: onTouchStart
+        onTouchStart: onTouchStart,
+        onTouchMove: onTouchMove,
+        onTouchEnd: onTouchEnd,
+        onTouchCancel: onTouchEnd
     }, /*#__PURE__*/ React.createElement(Swiper, {
         autoPlay: autoPlay,
         className: "".concat(classPrefix, "-swiper"),
@@ -209,57 +187,46 @@ export var ImagePreview = function(props) {
         },
         defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
         indicator: indicator
-    }, (videos !== null && videos !== void 0 ? videos : []).map(function(item) {
+    }, _to_consumable_array(videos.map(function(item) {
         return {
             type: 'video',
             data: item
         };
-    }).concat((images !== null && images !== void 0 ? images : []).map(function(item) {
+    })).concat(_to_consumable_array(images.map(function(item) {
         return {
             type: 'image',
             data: item
         };
-    })).sort(function(a, b) {
+    }))).sort(function(a, b) {
         var _a_data, _b_data;
         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);
     }).map(function(item, index) {
-        if (item.type === 'video') {
-            var _item_data = item.data, source = _item_data.source, options = _item_data.options;
-            return /*#__PURE__*/ React.createElement(SwiperItem, {
-                key: index,
-                className: "nut-imagepreview-swiper-item"
-            }, /*#__PURE__*/ React.createElement(TaroVideo, {
-                src: source.src,
-                onClick: closeOnImg,
-                controls: options.controls,
-                autoplay: false,
-                loop: false,
-                muted: options.muted
-            }));
-        }
-        if (item.type === 'image') {
-            var src = item.data.src;
-            return /*#__PURE__*/ React.createElement(SwiperItem, {
-                key: index,
-                className: "nut-imagepreview-swiper-item"
-            }, /*#__PURE__*/ React.createElement(Image, _object_spread({
-                src: src,
-                mode: "widthFix",
-                onClick: closeOnImg,
-                style: {
-                    width: '100%'
-                }
-            }, Taro.getEnv() !== 'WEB' && {
-                showMenuByLongpress: showMenuByLongpress
-            })));
-        }
-        return null;
-    }))), pagination ? /*#__PURE__*/ React.createElement(View, {
+        return /*#__PURE__*/ React.createElement(SwiperItem, {
+            key: index,
+            className: "nut-imagepreview-swiper-item"
+        }, item.type === 'video' ? /*#__PURE__*/ React.createElement(TaroVideo, {
+            src: item.data.source.src,
+            onClick: closeOnImg,
+            controls: item.data.options.controls,
+            autoplay: false,
+            loop: false,
+            muted: item.data.options.muted
+        }) : /*#__PURE__*/ React.createElement(Image, _object_spread({
+            src: item.data.src,
+            mode: "widthFix",
+            onClick: closeOnImg,
+            style: {
+                width: '100%'
+            }
+        }, Taro.getEnv() !== 'WEB' && {
+            showMenuByLongpress: showMenuByLongpress
+        })));
+    }))), pagination && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-index")
-    }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)) : null, closeIcon !== false ? /*#__PURE__*/ React.createElement(View, {
+    }, active, "/", maxNo), closeIcon !== false && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
         onClick: onCloseInner
-    }, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon) : null);
+    }, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon));
 };
 ImagePreview.displayName = 'NutImagePreview';

package/dist/es/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/es/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/es/packages/imagepreview/style/style.harmony.css

@@ -53,11 +53,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 {