@nutui/nutui-react-taro 3.0.4 → 3.0.6

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 {

package/dist/es/packages/indicator/indicator.js

@@ -15,7 +15,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/inputnumber/inputnumber.js

@@ -239,7 +239,7 @@ export var InputNumber = function(props) {
         onClick: handleReduce
     }, /*#__PURE__*/ React.createElement(Minus, {
         size: 10,
-        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === min || disabled))
+        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
     })), /*#__PURE__*/ React.createElement("input", {
         className: classNames("".concat(classPrefix, "-input"), _define_property({}, "".concat(classPrefix, "-input-disabled"), disabled)),
         type: type,
@@ -256,7 +256,7 @@ export var InputNumber = function(props) {
         onClick: handlePlus
     }, /*#__PURE__*/ React.createElement(Plus, {
         size: 10,
-        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === max || disabled))
+        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
     })));
 };
 InputNumber.displayName = 'NutInputNumber';

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

@@ -1,10 +1,10 @@
-import { Lottie as LottieWeb } from "./web";
-import { Lottie as LottieMp } from "./mp";
+import { Lottie as LottieWeb } from "./lottieweb";
+import { Lottie as LottieMp } from "./lottiemp";
 var implementation;
 if (process.env.TARO_ENV === 'h5') {
     // @ts-ignore
     implementation = LottieWeb;
-} else if (process.env.TARO_ENV === 'weapp') {
+} else if (process.env.TARO_ENV === 'weapp' || process.env.TARO_ENV === 'jd') {
     // @ts-ignore
     implementation = LottieMp;
 } else {

package/dist/es/packages/lottie/{mp.js → lottiemp.js}

@@ -1,6 +1,6 @@
 import React, { useImperativeHandle, useRef } from "react";
 import { createSelectorQuery, getEnv, useReady, useUnload } from "@tarojs/taro";
-import lottie from "lottie-miniprogram";
+import lottie from "@nutui/lottie-miniprogram";
 import { getWindowInfo } from "../../utils/get-system-info";
 import useUuid from "../../hooks/use-uuid";
 export var Lottie = /*#__PURE__*/ React.forwardRef(function(props, ref) {

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

@@ -2,31 +2,37 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 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 React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { View } from "@tarojs/components";
+import { Close } from "@nutui/icons-react-taro";
+import { web } from "../../utils/platform-taro";
+import pxTransform from "../../utils/px-transform";
 import { ComponentDefaults } from "../../utils/typings";
 import { customEvents, useCustomEvent, useCustomEventsPath } from "../../hooks/use-custom-event";
 import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     id: '',
-    duration: 3000,
-    type: 'danger',
+    distance: 8,
+    navHeight: 57,
     position: 'top',
     visible: false,
+    closeable: false,
+    leftIcon: null,
+    rightIcon: null,
+    duration: 3000,
     onClose: function() {},
     onClick: function() {}
 });
 var classPrefix = 'nut-notify';
 export var Notify = function(props) {
-    var _mergeProps = mergeProps(defaultProps, props), id = _mergeProps.id, children = _mergeProps.children, style = _mergeProps.style, type = _mergeProps.type, className = _mergeProps.className, position = _mergeProps.position, visible = _mergeProps.visible, duration = _mergeProps.duration, onClose = _mergeProps.onClose, onClick = _mergeProps.onClick;
+    var _mergeProps = mergeProps(defaultProps, props), id = _mergeProps.id, style = _mergeProps.style, children = _mergeProps.children, distance = _mergeProps.distance, navHeight = _mergeProps.navHeight, closeable = _mergeProps.closeable, leftIcon = _mergeProps.leftIcon, rightIcon = _mergeProps.rightIcon, position = _mergeProps.position, visible = _mergeProps.visible, duration = _mergeProps.duration, className = _mergeProps.className, onClose = _mergeProps.onClose, onClick = _mergeProps.onClick;
     useCustomEvent(id, function(status) {
         status ? show() : hide();
     });
     var timer;
     var _useState = _sliced_to_array(useState(false), 2), showNotify = _useState[0], setShowNotify = _useState[1];
-    var cssRef = useRef(null);
     useEffect(function() {
         if (visible) {
             show();
@@ -36,9 +42,6 @@ export var Notify = function(props) {
     }, [
         visible
     ]);
-    var clickHandle = function() {
-        onClick();
-    };
     var show = function() {
         setShowNotify(true);
         clearTimer();
@@ -58,10 +61,29 @@ export var Notify = function(props) {
         setShowNotify(false);
         onClose();
     };
+    var getDistance = useMemo(function() {
+        if (position === 'top') {
+            return {
+                top: pxTransform(web() ? Number(distance) + navHeight : Number(distance))
+            };
+        }
+        return {
+            bottom: pxTransform(Number(distance))
+        };
+    }, [
+        distance,
+        position
+    ]);
     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));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(className), true), _obj));
+    var handleClick = function() {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleClickIcon = function() {
+        hide();
+    };
+    var _obj1;
     return /*#__PURE__*/ React.createElement(CSSTransition, {
-        nodeRef: cssRef,
         in: showNotify,
         timeout: 300,
         classNames: "fade",
@@ -70,10 +92,19 @@ export var Notify = function(props) {
         position: position,
         id: id
     }, /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classes, " ").concat(className),
-        style: style,
-        onClick: clickHandle
-    }, children));
+        className: classes,
+        style: _object_spread({}, style, getDistance),
+        onClick: handleClick
+    }, leftIcon ? /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-left-icon")
+    }, leftIcon) : null, /*#__PURE__*/ React.createElement(View, {
+        className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-content"), true), _define_property(_obj1, "".concat(classPrefix, "-ellipsis"), closeable || rightIcon), _define_property(_obj1, "".concat(classPrefix, "-layout-left"), leftIcon || rightIcon), _obj1))
+    }, children), rightIcon || closeable ? /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-right-icon"),
+        onClick: handleClickIcon
+    }, rightIcon || (closeable ? /*#__PURE__*/ React.createElement(Close, {
+        size: 12
+    }) : null)) : null));
 };
 export function open(selector) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

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;
+    }
   }
 }