@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/Grid.js

@@ -1,32 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "columns", "gap", "center", "square", "reverse", "direction", "style", "className", "onClick"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default from "react";
 import classNames from "classnames";
 import { a as GridContext, G as GridItem } from "./griditem2.js";
 import { p as pxCheck } from "./px-check.js";
-var defaultProps = {
+const defaultProps = {
   columns: 4,
   gap: 0,
   center: true,
@@ -34,15 +11,17 @@ var defaultProps = {
   reverse: false,
   direction: "vertical"
 };
-var Grid = function Grid2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, columns = _defaultProps$props.columns, gap = _defaultProps$props.gap, center = _defaultProps$props.center, square = _defaultProps$props.square, reverse = _defaultProps$props.reverse, direction = _defaultProps$props.direction, style = _defaultProps$props.style, className = _defaultProps$props.className, onClick = _defaultProps$props.onClick, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var childrenDom = React__default.Children.toArray(children);
-  var classPrefix = "nut-grid";
-  var rootClass = function rootClass2() {
-    return classNames(classPrefix, _defineProperty({}, "".concat(classPrefix, "-border"), !gap), className);
+const Grid = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, columns, gap, center, square, reverse, direction, style, className, onClick } = _a, rest = __rest(_a, ["children", "columns", "gap", "center", "square", "reverse", "direction", "style", "className", "onClick"]);
+  const childrenDom = React__default.Children.toArray(children);
+  const classPrefix = "nut-grid";
+  const rootClass = () => {
+    return classNames(classPrefix, {
+      [`${classPrefix}-border`]: !gap
+    }, className);
   };
-  var rootStyle = function rootStyle2() {
-    var styleSelf = {};
+  const rootStyle = () => {
+    let styleSelf = {};
     if (style) {
       styleSelf = style;
     }
@@ -51,24 +30,21 @@ var Grid = function Grid2(props) {
     }
     return styleSelf;
   };
-  return React__default.createElement("div", _objectSpread({
-    className: rootClass(),
-    style: rootStyle()
-  }, rest), React__default.createElement(GridContext.Provider, {
-    value: {
-      onClick
-    }
-  }, childrenDom.map(function(item, idex) {
-    return React__default.cloneElement(item, {
-      index: idex,
-      columns,
-      center,
-      gap,
-      square,
-      reverse,
-      direction
-    });
-  })));
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: rootClass(), style: rootStyle() }, rest),
+    React__default.createElement(GridContext.Provider, { value: { onClick } }, childrenDom.map((item, idex) => {
+      return React__default.cloneElement(item, {
+        index: idex,
+        columns,
+        center,
+        gap,
+        square,
+        reverse,
+        direction
+      });
+    }))
+  );
 };
 Grid.defaultProps = defaultProps;
 Grid.displayName = "NutGrid";

package/dist/esm/Image.js

@@ -1,49 +1,17 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 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: "",
-  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(false), _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(false), _useState6 = _slicedToArray(_useState5, 2), complete = _useState6[0], setComplete = _useState6[1];
-  var imgRef = useRef(null);
-  useEffect(function() {
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { fit: "fill", position: "center", alt: "", width: "", height: "", error: true, loading: true, lazy: false });
+const classPrefix = "nut-image";
+const Image = (props) => {
+  const { className, style, src, fit, position, alt, width, height, radius, error, loading, lazy, onClick, onLoad, onError } = Object.assign(Object.assign({}, defaultProps), props);
+  const [innerLoading, setInnerLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [complete, setComplete] = useState(false);
+  const imgRef = useRef(null);
+  useEffect(() => {
     if (imgRef.current && imgRef.current.complete && !lazy) {
       if (imgRef.current.naturalHeight === 0) {
         handleError();
@@ -54,10 +22,10 @@ var Image = function Image2(props) {
       setInnerLoading(true);
     }
   }, [imgRef]);
-  useEffect(function() {
+  useEffect(() => {
     setComplete(false);
   }, [src]);
-  var handleLoad = function handleLoad2() {
+  const handleLoad = () => {
     if (!complete) {
       setIsError(false);
       setInnerLoading(false);
@@ -65,7 +33,7 @@ var Image = function Image2(props) {
       setComplete(true);
     }
   };
-  var handleError = function handleError2() {
+  const handleError = () => {
     if (!complete) {
       setIsError(true);
       setInnerLoading(false);
@@ -73,28 +41,20 @@ var Image = function Image2(props) {
       setComplete(true);
     }
   };
-  var containerStyle = _objectSpread({
-    height: height ? pxCheck(height) : "",
-    width: width ? pxCheck(width) : "",
-    overflow: radius !== void 0 && radius !== null ? "hidden" : "",
-    borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : ""
-  }, style);
-  var imgStyle = _objectSpread({
-    objectFit: fit,
-    objectPosition: position
-  }, style);
-  var observer = useRef(null);
-  var initObserver = function initObserver2() {
-    var options = {
+  const containerStyle = Object.assign({ height: height ? pxCheck(height) : "", width: width ? pxCheck(width) : "", overflow: radius !== void 0 && radius !== null ? "hidden" : "", borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : "" }, style);
+  const imgStyle = Object.assign({ objectFit: fit, objectPosition: position }, style);
+  const observer = useRef(null);
+  const initObserver = () => {
+    const options = {
       threshold: [0],
       rootMargin: "0px"
       // 对视口进行收缩和扩张
     };
-    observer.current = new IntersectionObserver(function(entires, self) {
-      entires.forEach(function(item) {
+    observer.current = new IntersectionObserver((entires, self) => {
+      entires.forEach((item) => {
         if (item.isIntersecting) {
-          setTimeout(function() {
-            var img = item.target;
+          setTimeout(() => {
+            const img = item.target;
             if (img.dataset.src) {
               img.src = img.dataset.src;
               img.removeAttribute("data-src");
@@ -106,72 +66,57 @@ var Image = function Image2(props) {
     }, options);
     observer.current.observe(imgRef.current);
   };
-  var resetObserver = function resetObserver2() {
+  const resetObserver = () => {
     observer.current.disconnect && observer.current.disconnect();
   };
-  useEffect(function() {
+  useEffect(() => {
     lazy && initObserver();
-    return function() {
+    return () => {
       lazy && resetObserver();
     };
   }, [lazy]);
-  var imageClick = function imageClick2(event) {
+  const imageClick = (event) => {
     onClick && onClick(event);
   };
-  var renderErrorImg = useCallback(function() {
+  const renderErrorImg = useCallback(() => {
     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));
+      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 React__default.createElement("div", { className: "nut-img-error" }, error);
     }
     return null;
   }, [error, isError]);
-  var renderLoading = useCallback(function() {
+  const renderLoading = useCallback(() => {
     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));
+      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 React__default.createElement("div", { className: "nut-img-loading" }, loading);
     }
     return null;
   }, [loading, innerLoading]);
-  return React__default.createElement("div", {
-    className: classNames(classPrefix, className),
-    style: containerStyle,
-    onClick: function onClick2(e) {
+  return React__default.createElement(
+    "div",
+    { className: classNames(classPrefix, className), style: containerStyle, onClick: (e) => {
       imageClick(e);
-    }
-  }, lazy ? React__default.createElement("img", {
-    ref: imgRef,
-    className: "nut-img lazyload",
-    style: imgStyle,
-    "data-src": src,
-    alt,
-    loading: "lazy",
-    onLoad: handleLoad,
-    onError: handleError
-  }) : React__default.createElement("img", {
-    ref: imgRef,
-    className: "nut-img",
-    style: imgStyle,
-    src,
-    alt,
-    onLoad: handleLoad,
-    onError: handleError
-  }), renderLoading(), renderErrorImg());
+    } },
+    lazy ? React__default.createElement("img", { ref: imgRef, className: "nut-img lazyload", style: imgStyle, "data-src": src, alt, loading: "lazy", onLoad: handleLoad, onError: handleError }) : React__default.createElement("img", { ref: imgRef, className: "nut-img", style: imgStyle, src, alt, onLoad: handleLoad, onError: handleError }),
+    renderLoading(),
+    renderErrorImg()
+  );
 };
 Image.defaultProps = defaultProps;
 Image.displayName = "NutImage";

package/dist/esm/ImagePreview.js

@@ -1,26 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 import React__default, { useRef, useState, useEffect } from "react";
 import classNames from "classnames";
 import { Close } from "@nutui/icons-react";
@@ -31,50 +8,37 @@ import Swiper from "./Swiper.js";
 import SwiperItem from "./SwiperItem.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  images: [],
-  videos: [],
-  visible: false,
-  autoPlay: 3e3,
-  defaultValue: 0,
-  closeOnContentClick: false,
-  indicator: false,
-  indicatorColor: "#fff",
-  closeIcon: false,
-  closeIconPosition: "top-right",
-  onChange: function onChange(value) {
-  },
-  onClose: function onClose() {
-  }
-});
-var ImagePreview = function ImagePreview2(props) {
-  var className = props.className, style = props.style, images = props.images, videos = props.videos, visible = props.visible, defaultValue = props.defaultValue, indicatorColor = props.indicatorColor, indicator = props.indicator, autoPlay = props.autoPlay, closeOnContentClick = props.closeOnContentClick, closeIcon = props.closeIcon, closeIconPosition = props.closeIconPosition, onClose2 = props.onClose;
-  var classPrefix = "nut-imagepreview";
-  var ref = useRef(null);
-  var _usePropsValue = usePropsValue({
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { images: [], videos: [], visible: false, autoPlay: 3e3, defaultValue: 0, closeOnContentClick: false, indicator: false, indicatorColor: "#fff", closeIcon: false, closeIconPosition: "top-right", onChange: (value) => {
+}, onClose: () => {
+} });
+const ImagePreview = (props) => {
+  const { className, style, images, videos, visible, defaultValue, indicatorColor, indicator, autoPlay, closeOnContentClick, closeIcon, closeIconPosition, onClose } = props;
+  const classPrefix = "nut-imagepreview";
+  const ref = useRef(null);
+  const [innerNo, setInnerNo] = usePropsValue({
     value: props.value,
     defaultValue,
     finalValue: defaultValue,
-    onChange: function onChange2(val) {
-      var _props$onChange;
-      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, val);
+    onChange: (val) => {
+      var _a;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val);
     }
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), innerNo = _usePropsValue2[0], setInnerNo = _usePropsValue2[1];
-  var _useState = useState(visible), _useState2 = _slicedToArray(_useState, 2), showPop = _useState2[0], setShowPop = _useState2[1];
-  var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), active = _useState4[0], setActive = _useState4[1];
-  var _useState5 = useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), _useState6 = _slicedToArray(_useState5, 2), maxNo = _useState6[0], setMaxNo = _useState6[1];
-  var _useState7 = useState({
+  });
+  const [showPop, setShowPop] = useState(visible);
+  const [active, setActive] = useState(0);
+  const [maxNo, setMaxNo] = useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0));
+  const [store, setStore] = useState({
     scale: 1,
     moveable: false
-  }), _useState8 = _slicedToArray(_useState7, 2), store = _useState8[0], setStore = _useState8[1];
-  var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), lastTouchEndTime = _useState10[0], setLastTouchEndTime = _useState10[1];
-  var onTouchStart = function onTouchStart2(event) {
-    var touches = event.touches;
-    var events = touches[0];
-    var events2 = touches[1];
-    var curTouchTime = (/* @__PURE__ */ new Date()).getTime();
+  });
+  const [lastTouchEndTime, setLastTouchEndTime] = useState(0);
+  const onTouchStart = (event) => {
+    const touches = event.touches;
+    const events = touches[0];
+    const events2 = touches[1];
+    const curTouchTime = (/* @__PURE__ */ new Date()).getTime();
     if (curTouchTime - lastTouchEndTime < 300) {
-      var store12 = store;
+      const store12 = store;
       if (store12.scale > 1) {
         store12.scale = 1;
       } else if (store12.scale === 1) {
@@ -82,7 +46,7 @@ var ImagePreview = function ImagePreview2(props) {
       }
       scaleNow();
     }
-    var store1 = store;
+    const store1 = store;
     store1.moveable = true;
     if (events2) {
       store1.oriDistance = getDistance({
@@ -95,23 +59,23 @@ var ImagePreview = function ImagePreview2(props) {
     }
     store1.originScale = store1.scale || 1;
   };
-  var onTouchMove = function onTouchMove2(event) {
-    var touches = event.touches;
-    var events = touches[0];
-    var events2 = touches[1];
+  const onTouchMove = (event) => {
+    const touches = event.touches;
+    const events = touches[0];
+    const events2 = touches[1];
     if (!store.moveable) {
       return;
     }
-    var store1 = store;
+    const store1 = store;
     if (events2) {
-      var curDistance = getDistance({
+      const curDistance = getDistance({
         x: events.pageX,
         y: events.pageY
       }, {
         x: events2.pageX,
         y: events2.pageY
       });
-      var curScale = curDistance / store1.oriDistance;
+      const curScale = curDistance / store1.oriDistance;
       store1.scale = store1.originScale * curScale;
       if (store1.scale > 3) {
         store1.scale = 3;
@@ -119,109 +83,92 @@ var ImagePreview = function ImagePreview2(props) {
       scaleNow();
     }
   };
-  var onTouchEnd = function onTouchEnd2() {
+  const onTouchEnd = () => {
     setLastTouchEndTime((/* @__PURE__ */ new Date()).getTime());
-    var store1 = store;
+    const store1 = store;
     store1.moveable = false;
     if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
       store1.scale = 1;
       scaleNow();
     }
   };
-  useEffect(function() {
+  useEffect(() => {
     init();
   }, []);
-  var init = function init2() {
+  const init = () => {
     document.addEventListener("touchmove", onTouchMove);
     document.addEventListener("touchend", onTouchEnd);
     document.addEventListener("touchcancel", onTouchEnd);
   };
-  useEffect(function() {
+  useEffect(() => {
     setShowPop(visible);
   }, [visible]);
-  useEffect(function() {
+  useEffect(() => {
     setInnerNo(defaultValue || 1);
   }, [defaultValue]);
-  useEffect(function() {
+  useEffect(() => {
     setActive(innerNo);
   }, [innerNo]);
-  useEffect(function() {
+  useEffect(() => {
     setMaxNo((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0));
   }, [images, videos]);
-  var scaleNow = function scaleNow2() {
+  const scaleNow = () => {
     if (ref.current) {
-      ref.current.style.transform = "scale(".concat(store.scale, ")");
+      ref.current.style.transform = `scale(${store.scale})`;
     }
   };
-  var getDistance = function getDistance2(first, second) {
+  const getDistance = (first, second) => {
     return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
   };
-  var slideChangeEnd = function slideChangeEnd2(page) {
-    var _props$onChange2;
+  const slideChangeEnd = (page) => {
+    var _a;
     setActive(page + 1);
-    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, page + 1);
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, page + 1);
   };
-  var onCloseInner = function onCloseInner2() {
+  const onCloseInner = () => {
     setShowPop(false);
     setActive(innerNo);
     scaleNow();
-    onClose2 && onClose2();
-    setStore(_objectSpread(_objectSpread({}, store), {}, {
-      scale: 1
-    }));
+    onClose && onClose();
+    setStore(Object.assign(Object.assign({}, store), { scale: 1 }));
   };
-  var closeOnImg = function closeOnImg2() {
+  const closeOnImg = () => {
     if (closeOnContentClick) {
       onCloseInner();
     }
   };
-  return React__default.createElement(Popup, {
-    visible: showPop,
-    className: "".concat(classPrefix, "-pop"),
-    style: {
-      width: "100%"
-    },
-    onClick: onCloseInner
-  }, React__default.createElement("div", {
-    className: classNames(classPrefix, className),
-    style,
-    ref,
-    onClick: closeOnImg,
-    onTouchStart
-  }, React__default.createElement(Swiper, {
-    autoPlay,
-    className: "".concat(classPrefix, "-swiper"),
-    loop: true,
-    preventDefault: false,
-    style: {
-      display: showPop ? "block" : "none",
-      "--nutui-indicator-color": indicatorColor
-    },
-    direction: "horizontal",
-    onChange: function onChange2(page) {
-      return slideChangeEnd(page);
-    },
-    defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
-    indicator
-  }, (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) {
-    return React__default.createElement(SwiperItem, {
-      key: index
-    }, React__default.createElement(Image, {
-      src: item.src
-    }));
-  }) : []))), React__default.createElement("div", {
-    className: "".concat(classPrefix, "-index")
-  }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)), closeIcon !== false ? React__default.createElement("div", {
-    className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
-    onClick: onCloseInner
-  }, closeIcon === true ? React__default.createElement(Close, null) : closeIcon) : null);
+  return React__default.createElement(
+    Popup,
+    { visible: showPop, className: `${classPrefix}-pop`, style: { width: "100%" }, onClick: onCloseInner },
+    React__default.createElement(
+      "div",
+      { className: classNames(classPrefix, className), style, ref, onClick: closeOnImg, onTouchStart },
+      React__default.createElement(Swiper, { autoPlay, className: `${classPrefix}-swiper`, loop: true, preventDefault: false, style: {
+        display: showPop ? "block" : "none",
+        "--nutui-indicator-color": indicatorColor
+      }, direction: "horizontal", onChange: (page) => slideChangeEnd(page), defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1), indicator }, (videos && videos.length > 0 ? videos.map((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((item, index) => {
+        return React__default.createElement(
+          SwiperItem,
+          { key: index },
+          React__default.createElement(Image, { src: item.src })
+        );
+      }) : []))
+    ),
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-index` },
+      active,
+      "/",
+      (images ? images.length : 0) + (videos ? videos.length : 0)
+    ),
+    closeIcon !== false ? React__default.createElement("div", { className: `${classPrefix}-close ${closeIconPosition}`, onClick: onCloseInner }, closeIcon === true ? React__default.createElement(Close, null) : closeIcon) : null
+  );
 };
 ImagePreview.defaultProps = defaultProps;
 ImagePreview.displayName = "NutImagePreview";