@nutui/nutui-react 1.3.0 → 1.3.1-beta.2

package/dist/esm/ConfigProvider.js

@@ -114,6 +114,22 @@ var zhCN = {
     title4: '搜索框文本设置',
     title5: '自定义图标设置',
     title6: '数据改变监听'
+  },
+  audio: {
+    back: '快退',
+    forward: '快进',
+    pause: '暂停',
+    start: '开始',
+    mute: '静音',
+    tips: 'onPlayEnd事件在loop=false时才会触发'
+  },
+  datepicker: {
+    year: '年',
+    month: '月',
+    day: '日',
+    hour: '时',
+    min: '分',
+    seconds: '秒'
   }
 };
 var defaultProps = {

package/dist/esm/DatePicker.js

@@ -10,6 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React__default, { useState, useRef, useEffect } from 'react';
 import Picker from './Picker.js';
+import { useConfig } from './ConfigProvider.js';
 var currentYear = new Date().getFullYear();
 var defaultProps = {
   modelValue: null,
@@ -42,6 +43,35 @@ var DatePicker = function DatePicker(props) {
       style = _defaultProps$props.style,
       rest = _objectWithoutProperties(_defaultProps$props, _excluded);
 
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale; // const [translated] = useTranslate<T>({
+  //   'zh-CN': {
+  //     year: '年',
+  //     month: '月',
+  //     day: '日',
+  //     hour: '时',
+  //     min: '分',
+  //     seconds: '秒',
+  //   },
+  //   'zh-TW': {
+  //     year: '年',
+  //     month: '月',
+  //     day: '日',
+  //     hour: '時',
+  //     min: '分',
+  //     seconds: '秒',
+  //   },
+  //   'en-US': {
+  //     year: 'Year',
+  //     month: 'Month',
+  //     day: 'Day',
+  //     hour: 'Hour',
+  //     min: 'Minute',
+  //     seconds: 'Second',
+  //   },
+  // })
+
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       show = _useState2[0],
@@ -68,13 +98,14 @@ var DatePicker = function DatePicker(props) {
     return Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN(val.getTime());
   };
 
+  var datepickerLang = locale.datepicker;
   var zhCNType = {
-    day: '日',
-    year: '年',
-    month: '月',
-    hour: '时',
-    minute: '分',
-    seconds: '秒'
+    day: datepickerLang.day,
+    year: datepickerLang.year,
+    month: datepickerLang.month,
+    hour: datepickerLang.hour,
+    minute: datepickerLang.min,
+    seconds: datepickerLang.seconds
   };
 
   var formatValue = function formatValue(value) {

package/dist/esm/Dialog.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["visible", "footer", "noOkBtn", "noCancelBtn", "lockScroll", "okBtnDisabled", "cancelAutoClose", "okText", "cancelText", "onClosed", "onCancel", "onOk"];
+var _excluded = ["visible", "footer", "noFooter", "noOkBtn", "noCancelBtn", "lockScroll", "okBtnDisabled", "cancelAutoClose", "okText", "cancelText", "onClosed", "onCancel", "onOk"];
 
 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; }
 
@@ -12,7 +12,6 @@ import classNames from 'classnames';
 import Button from './Button.js';
 import { CSSTransition } from 'react-transition-group';
 import ReactDOM__default from 'react-dom';
-import { useConfig } from './ConfigProvider.js';
 
 var Content = function Content(props) {
   var visible = props.visible,
@@ -241,8 +240,8 @@ function confirm(config, renderFunc) {
 }
 
 var defaultProps = {
-  okText: '',
-  cancelText: '',
+  okText: '确认',
+  cancelText: '取消',
   mask: true,
   closeOnClickOverlay: true,
   noFooter: false,
@@ -256,11 +255,9 @@ var defaultProps = {
 };
 
 var BaseDialog = function BaseDialog(props, ref) {
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
   var visible = props.visible,
       footer = props.footer,
+      noFooter = props.noFooter,
       noOkBtn = props.noOkBtn,
       noCancelBtn = props.noCancelBtn,
       lockScroll = props.lockScroll,
@@ -274,7 +271,7 @@ var BaseDialog = function BaseDialog(props, ref) {
       restProps = _objectWithoutProperties(props, _excluded);
 
   var renderFooter = function renderFooter() {
-    if (footer === null) return '';
+    if (footer === null || noFooter) return '';
 
     var handleCancel = function handleCancel(e) {
       e.stopPropagation();
@@ -302,20 +299,16 @@ var BaseDialog = function BaseDialog(props, ref) {
       plain: true,
       type: "primary",
       className: "nut-dialog__footer-cancel",
-      onClick: function onClick(e) {
-        return handleCancel(e);
-      }
-    }, cancelText || locale.cancel), !noOkBtn && React__default.createElement(Button, {
+      onClick: handleCancel
+    }, cancelText), !noOkBtn && React__default.createElement(Button, {
       size: "small",
       type: "primary",
       className: classNames('nut-dialog__footer-ok', {
         disabled: okBtnDisabled
       }),
       disabled: okBtnDisabled,
-      onClick: function onClick(e) {
-        return handleOk(e);
-      }
-    }, okText || locale.confirm));
+      onClick: handleOk
+    }, okText));
     return footerContent;
   };
 

package/dist/esm/Elevator.js

@@ -135,10 +135,12 @@ var Elevator = function Elevator(props) {
   var touchMove = function touchMove(e) {
     var firstTouch = e.touches[0];
     touchState.current.y2 = firstTouch.pageY;
-    var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
-    var cacheIndex = state.current.anchorIndex + delta;
+    var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0; // delta 是一个浮点数, 需要四舍五入一下, 否则页面会找不到最终计算后的index
+
+    var cacheIndex = state.current.anchorIndex + Math.ceil(delta);
     setCodeIndex(cacheIndex);
     scrollTo(cacheIndex);
+    e.preventDefault();
   };
 
   var touchEnd = function touchEnd() {
@@ -229,6 +231,17 @@ var Elevator = function Elevator(props) {
     if (state.current.fixedTop === fixedTop) return;
     state.current.fixedTop = fixedTop;
   }, [state.current.diff, titleHeight]);
+  var refIndexBar = useRef(null); // 之前的代码, 手指在index条上下移动的时候, 下面的列表也会跟随滚动, 需要阻止默认事件
+  // 如果使用react的touchmove, 没有找到可以设置passive的选项, 无法阻止默认事件, 所以使用了原生的方法进行添加
+
+  useEffect(function () {
+    refIndexBar.current && refIndexBar.current.addEventListener('touchmove', touchMove, {
+      passive: false
+    });
+    return function () {
+      refIndexBar.current && refIndexBar.current.removeEventListener('touchmove', touchMove);
+    };
+  }, []);
   return React__default.createElement("div", _objectSpread({
     className: "".concat(b(), " ").concat(className)
   }, rest), isSticky && scrollY > 0 ? React__default.createElement("div", {
@@ -267,12 +280,10 @@ var Elevator = function Elevator(props) {
       current: true
     })
   }, indexList[codeIndex][acceptKey]) : null, React__default.createElement("div", {
+    ref: refIndexBar,
     className: b('bars'),
     onTouchStart: function onTouchStart(event) {
       return touchStart(event);
-    },
-    onTouchMove: function onTouchMove(event) {
-      return touchMove(event);
     }
   }, React__default.createElement("div", {
     className: b('bars__inner')

package/dist/esm/Grid/style/index.js

@@ -0,0 +1,2 @@
+
+require('../../../packages/grid/grid.scss')

package/dist/esm/Grid.js

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "columnNum", "border", "gutter", "center", "square", "reverse", "direction", "style", "iconSize", "iconColor", "className"];
+
+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 from 'react';
+import { useConfig } from './ConfigProvider.js';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  direction: 'vertical',
+  iconSize: 28,
+  iconColor: ''
+};
+
+var Grid = function Grid(props) {
+  useConfig();
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      columnNum = _defaultProps$props.columnNum,
+      border = _defaultProps$props.border,
+      gutter = _defaultProps$props.gutter,
+      center = _defaultProps$props.center,
+      square = _defaultProps$props.square,
+      reverse = _defaultProps$props.reverse,
+      direction = _defaultProps$props.direction,
+      style = _defaultProps$props.style,
+      iconSize = _defaultProps$props.iconSize,
+      iconColor = _defaultProps$props.iconColor,
+      className = _defaultProps$props.className,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var childrenDom = React__default.Children.toArray(children);
+
+  var pxCheck = function pxCheck(value) {
+    return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+  };
+
+  var b = cn('grid');
+
+  var rootClass = function rootClass() {
+    var prefixCls = b();
+    return "".concat(className, " ").concat(prefixCls, " ").concat(border && !gutter ? "".concat(b('border')) : '');
+  };
+
+  var rootStyle = function rootStyle() {
+    var styleSelf = {};
+
+    if (style) {
+      styleSelf = style;
+    }
+
+    if (gutter) {
+      styleSelf.paddingLeft = pxCheck(gutter);
+    }
+
+    return styleSelf;
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: rootClass(),
+    style: rootStyle()
+  }, rest), childrenDom.map(function (item, idex) {
+    return React__default.cloneElement(item, {
+      index: idex,
+      columnNum: columnNum,
+      center: center,
+      border: border,
+      gutter: gutter,
+      square: square,
+      reverse: reverse,
+      direction: direction,
+      parentIconSize: iconSize,
+      parentIconColor: iconColor
+    });
+  }));
+};
+
+Grid.defaultProps = defaultProps;
+Grid.displayName = 'NutGrid';
+export { Grid as default };

package/dist/esm/GridItem/style/index.js

@@ -0,0 +1,2 @@
+
+require('../../../packages/griditem/griditem.scss')

package/dist/esm/GridItem.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "columnNum", "index", "gutter", "square", "text", "icon", "iconColor", "iconSize", "parentIconSize", "parentIconColor", "border", "center", "reverse", "direction"];
+
+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 from 'react';
+import { useConfig } from './ConfigProvider.js';
+import { c as cn } from './bem-893ad28d.js';
+import Icon from './Icon.js';
+import '@bem-react/classname';
+var defaultProps = {
+  text: '',
+  icon: '',
+  iconSize: '',
+  iconColor: '',
+  parentIconSize: '',
+  parentIconColor: '',
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  direction: 'vertical'
+};
+
+var GridItem = function GridItem(props) {
+  useConfig();
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      columnNum = _defaultProps$props.columnNum,
+      index = _defaultProps$props.index,
+      gutter = _defaultProps$props.gutter,
+      square = _defaultProps$props.square,
+      text = _defaultProps$props.text,
+      icon = _defaultProps$props.icon,
+      iconColor = _defaultProps$props.iconColor,
+      iconSize = _defaultProps$props.iconSize,
+      parentIconSize = _defaultProps$props.parentIconSize,
+      parentIconColor = _defaultProps$props.parentIconColor,
+      border = _defaultProps$props.border,
+      center = _defaultProps$props.center,
+      reverse = _defaultProps$props.reverse,
+      direction = _defaultProps$props.direction,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var b = cn('grid-item');
+
+  var pxCheck = function pxCheck(value) {
+    return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+  };
+
+  var rootStyle = function rootStyle() {
+    var style = {
+      flexBasis: "".concat(100 / +columnNum, "%")
+    };
+
+    if (square) {
+      style.paddingTop = "".concat(100 / +columnNum, "%");
+    } else if (gutter) {
+      style.paddingRight = pxCheck(gutter);
+
+      if (index >= columnNum) {
+        style.marginTop = pxCheck(gutter);
+      }
+    }
+
+    return style;
+  };
+
+  var contentClass = function contentClass() {
+    return "".concat(b('content'), " ").concat(border && b('content--border'), " ").concat(border && gutter && b('content--surround'), "  ").concat(center && b('content--center'), " ").concat(square && b('content--square'), " ").concat(reverse && b('content--reverse'), " ").concat(!!direction && b("content--".concat(direction)), "\n      ");
+  };
+
+  var isIconName = function isIconName() {
+    return typeof icon === 'string';
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: b(),
+    style: rootStyle()
+  }, rest), React__default.createElement("div", {
+    className: contentClass()
+  }, icon && isIconName() ? React__default.createElement(Icon, {
+    name: icon,
+    size: iconSize || parentIconSize,
+    color: iconColor || parentIconColor
+  }) : React__default.createElement(React__default.Fragment, null, icon), text && React__default.createElement("div", {
+    className: "nut-grid-item__text"
+  }, text), children && React__default.createElement(React__default.Fragment, null, children)));
+};
+
+GridItem.defaultProps = defaultProps;
+GridItem.displayName = 'NutGridItem';
+export { GridItem as default };

package/dist/esm/ImagePreview/style/index.js

@@ -0,0 +1,2 @@
+
+require('../../../packages/imagepreview/imagepreview.scss')

package/dist/esm/ImagePreview.js

@@ -0,0 +1,257 @@
+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';
+var defaultProps = {
+  images: [],
+  videos: [],
+  show: false,
+  autoplay: 3000,
+  initNo: 1,
+  contentClose: false,
+  paginationVisible: false,
+  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 nutImagePreview = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showPop = _useState2[0],
+      setShowPop = _useState2[1];
+
+  var _useState3 = useState(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      active = _useState4[0],
+      setActive = _useState4[1];
+
+  var _useState5 = useState(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      maxNo = _useState6[0],
+      setMaxNo = _useState6[1];
+
+  var _useState7 = 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 onTouchStart(event) {
+    var touches = event.touches;
+    var events = touches[0];
+    var events2 = touches[1]; // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
+
+    var curTouchTime = 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;
+      }
+
+      scaleNow();
+    }
+
+    var store1 = store;
+    store1.moveable = true;
+
+    if (events2) {
+      // 如果开始两指操作，记录初始时刻两指间的距离
+      store1.oriDistance = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      });
+    } // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
+
+
+    store1.originScale = store1.scale || 1;
+  };
+
+  var onTouchMove = function onTouchMove(event) {
+    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
+      });
+      /** 此处计算倍数，距离放大（缩小） 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 store1 = store;
+    store1.moveable = false;
+
+    if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
+      store1.scale = 1;
+      scaleNow();
+    }
+  };
+
+  var init = function init() {
+    document.addEventListener('touchmove', onTouchMove);
+    document.addEventListener('touchend', onTouchEnd);
+    document.addEventListener('touchcancel', onTouchEnd);
+  };
+
+  useEffect(function () {
+    if (show !== undefined) {
+      setShowPop(show);
+      init();
+    }
+  }, [show]);
+  useEffect(function () {
+    if (initNo !== undefined) {
+      setActive(initNo);
+    }
+
+    if (show !== undefined) {
+      setShowPop(show);
+    }
+
+    if (images && videos) {
+      setMaxNo(images.length + videos.length);
+    }
+  }, []);
+
+  var scaleNow = function scaleNow() {
+    if (nutImagePreview.current) {
+      nutImagePreview.current.style.transform = "scale(".concat(store.scale, ")");
+    }
+  };
+
+  var onCloseInner = function onCloseInner() {
+    setShowPop(false);
+    setActive(1);
+    scaleNow();
+    onClose && onClose();
+    setStore(_objectSpread(_objectSpread({}, store), {}, {
+      scale: 1
+    }));
+  }; // 计算两个点的距离
+
+
+  var getDistance = function getDistance(first, second) {
+    // 计算两个点起始时刻的距离和终止时刻的距离，终止时刻距离变大了则放大，变小了则缩小
+    // 放大 k 倍则 scale 也 扩大 k 倍
+    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+  };
+
+  var slideChangeEnd = function slideChangeEnd(page) {
+    setActive(page + 1);
+  };
+
+  var closeOnImg = function closeOnImg() {
+    // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
+    if (contentClose) {
+      onCloseInner();
+    }
+  };
+
+  return React__default.createElement(Popup, {
+    visible: showPop,
+    popClass: "custom-pop",
+    style: {
+      width: '100%'
+    },
+    onClick: onCloseInner
+  }, React__default.createElement("div", {
+    className: "nut-imagepreview",
+    ref: nutImagePreview,
+    onClick: closeOnImg,
+    onTouchStart: onTouchStart
+  }, React__default.createElement(Swiper, {
+    autoPlay: autoplay,
+    className: "nut-imagepreview-swiper",
+    loop: true,
+    isPreventDefault: false,
+    style: {
+      display: showPop ? 'block' : 'none'
+    },
+    direction: "horizontal",
+    onChange: slideChangeEnd,
+    initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1),
+    paginationColor: paginationColor,
+    paginationVisible: 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
+    }));
+  }), images && images.length > 0 && images.map(function (item, index) {
+    return React__default.createElement(SwiperItem, {
+      key: index
+    }, React__default.createElement("img", {
+      src: item.src,
+      alt: "",
+      className: "nut-imagepreview-img"
+    }));
+  }))), React__default.createElement("div", {
+    className: "nut-imagepreview-index"
+  }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)));
+};
+
+ImagePreview.defaultProps = defaultProps;
+ImagePreview.displayName = 'NutImagePreview';
+export { ImagePreview as default };

package/dist/esm/Menu/style/index.js

@@ -0,0 +1,3 @@
+
+require('../../MenuItem/style')
+require('../../../packages/menu/menu.scss')