@nutui/nutui-react 1.5.1 → 2.0.0-alpha.1

package/dist/esm/Image.js

@@ -1,170 +1,171 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React__default, { useState, useEffect, useRef } from 'react';
-import { useConfig } from './ConfigProvider.js';
-import Icon from './Icon.js';
-var defaultProps = {
-  fit: 'fill',
-  position: 'center',
-  alt: '',
-  width: 'center',
-  height: '',
-  round: false,
-  showError: true,
-  showLoading: true,
-  isLazy: false
-};
-var Image = function Image(props) {
-  useConfig();
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    children = _defaultProps$props.children,
-    className = _defaultProps$props.className,
-    style = _defaultProps$props.style,
-    src = _defaultProps$props.src,
-    fit = _defaultProps$props.fit,
-    position = _defaultProps$props.position,
-    alt = _defaultProps$props.alt,
-    width = _defaultProps$props.width,
-    height = _defaultProps$props.height,
-    round = _defaultProps$props.round,
-    radius = _defaultProps$props.radius,
-    showError = _defaultProps$props.showError,
-    showLoading = _defaultProps$props.showLoading,
-    slotError = _defaultProps$props.slotError,
-    slotLoding = _defaultProps$props.slotLoding,
-    isLazy = _defaultProps$props.isLazy,
-    loadingImg = _defaultProps$props.loadingImg,
-    errorImg = _defaultProps$props.errorImg,
-    onClick = _defaultProps$props.onClick,
-    onLoad = _defaultProps$props.onLoad,
-    onError = _defaultProps$props.onError;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isError = _useState4[0],
-    setIsError = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    _src = _useState6[0],
-    setSrc = _useState6[1];
-  useEffect(function () {
-    if (src) {
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useState, useRef, useEffect, useCallback } from "react";
+import { ImageError, Image as Image$1 } from "@nutui/icons-react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+import { p as pxCheck } from "./px-check.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  fit: "fill",
+  position: "center",
+  alt: "",
+  width: "center",
+  height: "",
+  error: true,
+  loading: true,
+  lazy: false
+});
+var classPrefix = "nut-image";
+var Image = function Image2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, src = _defaultProps$props.src, fit = _defaultProps$props.fit, position = _defaultProps$props.position, alt = _defaultProps$props.alt, width = _defaultProps$props.width, height = _defaultProps$props.height, radius = _defaultProps$props.radius, error = _defaultProps$props.error, loading = _defaultProps$props.loading, lazy = _defaultProps$props.lazy, onClick = _defaultProps$props.onClick, onLoad = _defaultProps$props.onLoad, onError = _defaultProps$props.onError;
+  var _useState = useState(true), _useState2 = _slicedToArray(_useState, 2), innerLoading = _useState2[0], setInnerLoading = _useState2[1];
+  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), isError = _useState4[0], setIsError = _useState4[1];
+  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), _src = _useState6[0], setSrc = _useState6[1];
+  var imgRef = useRef(null);
+  useEffect(function() {
+    if (imgRef.current && imgRef.current.complete && imgRef.current.naturalHeight !== 0) {
+      setInnerLoading(false);
+    } else if (src) {
       setSrc(src);
       setIsError(false);
-      setLoading(true);
+      setInnerLoading(true);
     }
   }, [src]);
-  // 图片加载
-  var load = function load() {
-    setLoading(false);
+  var handleLoad = function handleLoad2() {
+    setInnerLoading(false);
     onLoad && onLoad();
   };
-  // 图片加载失败
-  var error = function error() {
+  var handleError = function handleError2() {
     setIsError(true);
-    setLoading(false);
+    setInnerLoading(false);
     onError && onError();
   };
-  var pxCheck = function pxCheck(value) {
-    return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
-  };
-  var stylebox = {
-    height: height ? pxCheck(height) : '',
-    width: width ? pxCheck(width) : '',
-    overflow: radius !== undefined && radius !== null ? 'hidden' : '',
-    borderRadius: radius !== undefined && radius !== null ? pxCheck(radius) : ''
+  var containerStyle = {
+    height: height ? pxCheck(height) : "",
+    width: width ? pxCheck(width) : "",
+    overflow: radius !== void 0 && radius !== null ? "hidden" : "",
+    borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : ""
   };
-  var styles = _objectSpread({
+  var imgStyle = _objectSpread({
     objectFit: fit,
     objectPosition: position
   }, style);
-  // 图片懒加载
   var observer = useRef(null);
-  var initObserver = function initObserver() {
-    var imgs = document.querySelectorAll('.nut-img.lazyload');
+  var initObserver = function initObserver2() {
+    var images = document.querySelectorAll(".nut-img.lazyload");
     var options = {
       threshold: [0],
-      rootMargin: '0px' // 对视口进行收缩和扩张
+      rootMargin: "0px"
+      // 对视口进行收缩和扩张
     };
-    // 监听dom是否在视口内
-    observer.current = new IntersectionObserver(function (entires, self) {
-      // entires为监听的节点数组对象
-      entires.forEach(function (item) {
-        // isIntersecting是当前监听元素交叉区域是否在可视区域指定的阈值内返回的是一个布尔值
+    observer.current = new IntersectionObserver(function(entires, self) {
+      entires.forEach(function(item) {
         if (item.isIntersecting) {
-          setTimeout(function () {
+          setTimeout(function() {
             var img = item.target;
             if (img.dataset.src) {
               img.src = img.dataset.src;
-              img.removeAttribute('data-src');
+              img.removeAttribute("data-src");
             }
-            // 资源加载后停止监听
             observer.current.unobserve(item.target);
           }, 300);
         }
       });
     }, options);
-    imgs.forEach(function (item) {
+    images.forEach(function(item) {
       observer.current.observe(item);
     });
   };
-  // 使用disconnect将取消的Observer实例中的所有监听
-  var resetObserver = function resetObserver() {
+  var resetObserver = function resetObserver2() {
     observer.current.disconnect && observer.current.disconnect();
   };
-  useEffect(function () {
-    isLazy && initObserver();
-    return function () {
-      isLazy && resetObserver();
+  useEffect(function() {
+    lazy && initObserver();
+    return function() {
+      lazy && resetObserver();
     };
-  }, [isLazy]);
-  var loadingBg = {
-    backgroundImage: loadingImg ? "url('".concat(loadingImg, "')") : ''
-  };
-  var errorBg = {
-    backgroundImage: errorImg ? "url('".concat(errorImg, "')") : ''
-  };
-  var imageClick = function imageClick(event) {
+  }, [lazy]);
+  var imageClick = function imageClick2(event) {
     onClick && onClick(event);
   };
+  var renderErrorImg = useCallback(function() {
+    if (!isError)
+      return null;
+    if (typeof error === "boolean" && error === true && !innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-error"
+      }, React__default.createElement(ImageError, null));
+    }
+    if (React__default.isValidElement(error) && !innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-error"
+      }, error);
+    }
+    return null;
+  }, [error, isError]);
+  var renderLoading = useCallback(function() {
+    if (!loading)
+      return null;
+    if (typeof loading === "boolean" && loading === true && innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-loading"
+      }, React__default.createElement(Image$1, null));
+    }
+    if (React__default.isValidElement(loading) && innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-loading"
+      }, loading);
+    }
+    return null;
+  }, [loading, innerLoading]);
   return React__default.createElement("div", {
-    className: "nut-image ".concat(round ? 'nut-image-round' : '', " ").concat(className || ''),
-    style: stylebox,
-    onClick: function onClick(e) {
+    className: classNames(classPrefix, className),
+    style: containerStyle,
+    onClick: function onClick2(e) {
       imageClick(e);
     }
-  }, isLazy ? React__default.createElement("img", {
+  }, lazy ? React__default.createElement("img", {
+    ref: imgRef,
     className: "nut-img lazyload",
-    style: styles,
+    style: imgStyle,
     "data-src": _src,
-    alt: alt,
+    alt,
     loading: "lazy",
-    onLoad: load,
-    onError: error
+    onLoad: handleLoad,
+    onError: handleError
   }) : React__default.createElement("img", {
+    ref: imgRef,
     className: "nut-img",
-    style: styles,
+    style: imgStyle,
     src: _src,
-    alt: alt,
-    onLoad: load,
-    onError: error
-  }), loading && showLoading ? React__default.createElement("div", {
-    className: "nut-img-loading",
-    style: loadingBg
-  }, !loadingImg && (slotLoding || children || React__default.createElement(Icon, {
-    name: "image"
-  }))) : null, isError && showError && !loading ? React__default.createElement("div", {
-    className: "nut-img-error",
-    style: errorBg
-  }, !errorImg && (slotError || children || React__default.createElement(Icon, {
-    name: "image-error"
-  }))) : null);
+    alt,
+    onLoad: handleLoad,
+    onError: handleError
+  }), renderLoading(), renderErrorImg());
 };
 Image.defaultProps = defaultProps;
-Image.displayName = 'NutImage';
-export { Image as default };
+Image.displayName = "NutImage";
+export {
+  Image as default
+};

package/dist/esm/ImagePreview.js

@@ -1,80 +1,72 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React__default, { useRef, useState, useEffect } from 'react';
-import Popup from './Popup.js';
-import Video from './Video.js';
-import Swiper from './Swiper.js';
-import SwiperItem from './SwiperItem.js';
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useRef, useState, useEffect } from "react";
+import Popup from "./Popup.js";
+import Video from "./Video.js";
+import Swiper from "./Swiper.js";
+import SwiperItem from "./SwiperItem.js";
 var defaultProps = {
   images: [],
   videos: [],
   show: false,
-  autoplay: 3000,
+  autoplay: 3e3,
   initNo: 1,
   contentClose: false,
   paginationVisible: false,
-  paginationColor: '#fff',
-  onClose: function onClose() {}
+  paginationColor: "#fff",
+  onClose: function onClose() {
+  }
 };
-var ImagePreview = function ImagePreview(props) {
-  var images = props.images,
-    videos = props.videos,
-    show = props.show,
-    initNo = props.initNo,
-    paginationColor = props.paginationColor,
-    paginationVisible = props.paginationVisible,
-    autoplay = props.autoplay,
-    contentClose = props.contentClose,
-    onClose = props.onClose;
+var ImagePreview = function ImagePreview2(props) {
+  var images = props.images, videos = props.videos, show = props.show, initNo = props.initNo, paginationColor = props.paginationColor, paginationVisible = props.paginationVisible, autoplay = props.autoplay, contentClose = props.contentClose, onClose2 = props.onClose;
   var nutImagePreview = useRef(null);
-  var _useState = useState(initNo),
-    _useState2 = _slicedToArray(_useState, 2),
-    innerNo = _useState2[0],
-    setInnerNo = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showPop = _useState4[0],
-    setShowPop = _useState4[1];
-  var _useState5 = useState(1),
-    _useState6 = _slicedToArray(_useState5, 2),
-    active = _useState6[0],
-    setActive = _useState6[1];
-  var _useState7 = useState(1),
-    _useState8 = _slicedToArray(_useState7, 2),
-    maxNo = _useState8[0],
-    setMaxNo = _useState8[1];
+  var _useState = useState(initNo), _useState2 = _slicedToArray(_useState, 2), innerNo = _useState2[0], setInnerNo = _useState2[1];
+  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), showPop = _useState4[0], setShowPop = _useState4[1];
+  var _useState5 = useState(1), _useState6 = _slicedToArray(_useState5, 2), active = _useState6[0], setActive = _useState6[1];
+  var _useState7 = useState(1), _useState8 = _slicedToArray(_useState7, 2), maxNo = _useState8[0], setMaxNo = _useState8[1];
   var _useState9 = useState({
-      scale: 1,
-      moveable: false
-    }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    store = _useState10[0],
-    setStore = _useState10[1];
-  var _useState11 = useState(0),
-    _useState12 = _slicedToArray(_useState11, 2),
-    lastTouchEndTime = _useState12[0],
-    setLastTouchEndTime = _useState12[1]; // 用来辅助监听双击
-  var onTouchStart = function onTouchStart(event) {
+    scale: 1,
+    moveable: false
+  }), _useState10 = _slicedToArray(_useState9, 2), store = _useState10[0], setStore = _useState10[1];
+  var _useState11 = useState(0), _useState12 = _slicedToArray(_useState11, 2), lastTouchEndTime = _useState12[0], setLastTouchEndTime = _useState12[1];
+  var onTouchStart = function onTouchStart2(event) {
     var touches = event.touches;
     var events = touches[0];
     var events2 = touches[1];
-    // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
-    var curTouchTime = new Date().getTime();
+    var curTouchTime = /* @__PURE__ */ (/* @__PURE__ */ new Date()).getTime();
     if (curTouchTime - lastTouchEndTime < 300) {
-      var _store = store;
-      if (_store.scale > 1) {
-        _store.scale = 1;
-      } else if (_store.scale === 1) {
-        _store.scale = 2;
+      var store12 = store;
+      if (store12.scale > 1) {
+        store12.scale = 1;
+      } else if (store12.scale === 1) {
+        store12.scale = 2;
       }
       scaleNow();
     }
     var store1 = store;
     store1.moveable = true;
     if (events2) {
-      // 如果开始两指操作，记录初始时刻两指间的距离
       store1.oriDistance = getDistance({
         x: events.pageX,
         y: events.pageY
@@ -83,10 +75,9 @@ var ImagePreview = function ImagePreview(props) {
         y: events2.pageY
       });
     }
-    // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
     store1.originScale = store1.scale || 1;
   };
-  var onTouchMove = function onTouchMove(event) {
+  var onTouchMove = function onTouchMove2(event) {
     var touches = event.touches;
     var events = touches[0];
     var events2 = touches[1];
@@ -94,9 +85,7 @@ var ImagePreview = function ImagePreview(props) {
       return;
     }
     var store1 = store;
-    // 双指移动
     if (events2) {
-      // 获得当前两点间的距离
       var curDistance = getDistance({
         x: events.pageX,
         y: events.pageY
@@ -104,21 +93,16 @@ var ImagePreview = function ImagePreview(props) {
         x: events2.pageX,
         y: events2.pageY
       });
-      /** 此处计算倍数，距离放大（缩小） 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;
       }
       scaleNow();
     }
   };
-  var onTouchEnd = function onTouchEnd() {
-    setLastTouchEndTime(new Date().getTime());
+  var onTouchEnd = function onTouchEnd2() {
+    setLastTouchEndTime(/* @__PURE__ */ (/* @__PURE__ */ new Date()).getTime());
     var store1 = store;
     store1.moveable = false;
     if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
@@ -126,90 +110,86 @@ var ImagePreview = function ImagePreview(props) {
       scaleNow();
     }
   };
-  var init = function init() {
-    document.addEventListener('touchmove', onTouchMove);
-    document.addEventListener('touchend', onTouchEnd);
-    document.addEventListener('touchcancel', onTouchEnd);
+  var init = function init2() {
+    document.addEventListener("touchmove", onTouchMove);
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchcancel", onTouchEnd);
   };
-  useEffect(function () {
+  useEffect(function() {
     setShowPop(show);
     setInnerNo(initNo);
     setActive(initNo);
     init();
   }, [show, initNo]);
-  useEffect(function () {
-    if (innerNo !== undefined) {
+  useEffect(function() {
+    if (innerNo !== void 0) {
       setActive(innerNo);
     }
-    if (show !== undefined) {
+    if (show !== void 0) {
       setShowPop(show);
     }
     if (images && videos) {
       setMaxNo(images.length + videos.length);
     }
   }, []);
-  var scaleNow = function scaleNow() {
+  var scaleNow = function scaleNow2() {
     if (nutImagePreview.current) {
       nutImagePreview.current.style.transform = "scale(".concat(store.scale, ")");
     }
   };
-  var onCloseInner = function onCloseInner() {
+  var onCloseInner = function onCloseInner2() {
     setShowPop(false);
     setActive(1);
     scaleNow();
-    onClose && onClose();
+    onClose2 && onClose2();
     setStore(_objectSpread(_objectSpread({}, store), {}, {
       scale: 1
     }));
   };
-  // 计算两个点的距离
-  var getDistance = function getDistance(first, second) {
-    // 计算两个点起始时刻的距离和终止时刻的距离，终止时刻距离变大了则放大，变小了则缩小
-    // 放大 k 倍则 scale 也 扩大 k 倍
+  var getDistance = function getDistance2(first, second) {
     return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
   };
-  var slideChangeEnd = function slideChangeEnd(page) {
+  var slideChangeEnd = function slideChangeEnd2(page) {
     setActive(page + 1);
   };
-  var closeOnImg = function closeOnImg() {
-    // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
+  var closeOnImg = function closeOnImg2() {
     if (contentClose) {
       onCloseInner();
     }
   };
   return React__default.createElement(Popup, {
     visible: showPop,
-    popClass: "custom-pop",
+    className: "custom-pop",
     style: {
-      width: '100%'
+      width: "100%"
     },
     onClick: onCloseInner
   }, React__default.createElement("div", {
     className: "nut-imagepreview",
     ref: nutImagePreview,
     onClick: closeOnImg,
-    onTouchStart: onTouchStart
+    onTouchStart
   }, React__default.createElement(Swiper, {
     autoPlay: autoplay,
     className: "nut-imagepreview-swiper",
     loop: true,
     isPreventDefault: false,
     style: {
-      display: showPop ? 'block' : 'none'
+      display: showPop ? "block" : "none"
     },
     direction: "horizontal",
     onChange: slideChangeEnd,
     initPage: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
-    paginationColor: paginationColor,
-    paginationVisible: paginationVisible
-  }, (videos && videos.length > 0 ? videos.map(function (item, index) {
+    paginationColor,
+    paginationVisible
+  }, (videos && videos.length > 0 ? videos.map(function(item, index) {
     return React__default.createElement(SwiperItem, {
       key: index
     }, React__default.createElement(Video, {
       source: item.source,
       options: item.options
     }));
-  }) : []).concat(images && images.length > 0 ? images.map(function (item, index) {
+  }) : []).concat(images && images.length > 0 ? images.map(function(item, index) {
     return React__default.createElement(SwiperItem, {
       key: index
     }, React__default.createElement("img", {
@@ -222,5 +202,7 @@ var ImagePreview = function ImagePreview(props) {
   }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)));
 };
 ImagePreview.defaultProps = defaultProps;
-ImagePreview.displayName = 'NutImagePreview';
-export { ImagePreview as default };
+ImagePreview.displayName = "NutImagePreview";
+export {
+  ImagePreview as default
+};