fan-standard-comp 3.2.0 → 3.2.2

package/lib/ImageGallery/SliderContent.js

@@ -0,0 +1,708 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /* eslint-disable */
+var isDraging = false;
+var startCoords = {
+  pageX: 0,
+  pageY: 0
+};
+var endCoords = {
+  pageX: 0,
+  pageY: 0
+};
+var isMoved = false;
+// @ts-ignore
+var dragOrSwipeEnabled = false;
+var isSwiping = false;
+var settings = {
+  numberOfSlideItemsInDom: 10,
+  swipeThreshold: 50,
+  closable: true,
+  enableDrag: true,
+  swipeToClose: true,
+  speed: 400,
+  // mode: 'lg-slide',
+  slideDelay: 0,
+  loop: true,
+  slideEndAnimation: true,
+  counter: true
+};
+var touchAction = 'swipe'; //  'swipe' | 'zoomSwipe' | 'pinch'
+var swipeDirection = 'horizontal';
+var lgBusy = false;
+// let eventTrigger = '' // 当前点击的类型
+// let currentItemsInDom: any[]
+var SliderContent = function SliderContent(props) {
+  var thumbCurrent = props.thumbCurrent,
+    hasThumbnail = props.hasThumbnail,
+    children = props.children,
+    galleryCount = props.galleryCount,
+    coreId = props.coreId,
+    outerRef = props.outerRef,
+    onUpdateTurning = props.onUpdateTurning,
+    onClose = props.onClose;
+  var $sliderOuter = (0, _react.useRef)();
+  var $itemsRef = (0, _react.useRef)([]);
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    thisIndex = _useState2[0],
+    setThisIndex = _useState2[1];
+  var init = function init() {
+    setTimeout(function () {
+      enableDrag();
+      enableSwipe();
+      triggerPosterClick();
+    }, 50);
+  };
+  (0, _react.useEffect)(function () {
+    init();
+  }, []);
+  (0, _react.useEffect)(function () {
+    setThisIndex(thumbCurrent);
+  }, [thumbCurrent]);
+  var enableDrag = function enableDrag() {
+    startCoords = {
+      pageX: 0,
+      pageY: 0
+    };
+    endCoords = {
+      pageX: 0,
+      pageY: 0
+    };
+    isDraging = false;
+    isMoved = false;
+  };
+  var enableSwipe = function enableSwipe() {
+    startCoords = {
+      pageX: 0,
+      pageY: 0
+    };
+    endCoords = {
+      pageX: 0,
+      pageY: 0
+    };
+    isMoved = false;
+    isSwiping = false;
+  };
+  var triggerPosterClick = function triggerPosterClick() {
+    // 判断 视频点击
+    // this.$inner.on('click.lg', (event) => {
+    //   if (
+    //     !this.dragOrSwipeEnabled &&
+    //     this.isPosterElement($LG(event.target))
+    //   ) {
+    //     this.LGel.trigger(lGEvents.posterClick);
+    //   }
+    // });
+  };
+  var onPreviewClick = function onPreviewClick() {
+    if (!dragOrSwipeEnabled) {}
+  };
+  // @ts-ignore
+  var onPreviewMouseDown = function onPreviewMouseDown(e) {
+    var _a;
+    dragOrSwipeEnabled = true;
+    var $item = getSlideItem(thisIndex);
+    // @ts-ignore
+    if ((_a = $item === null || $item === void 0 ? void 0 : $item.contains) === null || _a === void 0 ? void 0 : _a.call($item, e.target)) {
+      e.preventDefault();
+      if (!lgBusy) {
+        manageSwipeClass();
+        startCoords = {
+          pageX: e.pageX,
+          pageY: e.pageY
+        };
+        isDraging = true;
+        // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+        //     this.outer.get().scrollLeft += 1;
+        //     this.outer.get().scrollLeft -= 1;
+        outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.remove('spec-image-preview-grab');
+        outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.add('spec-image-preview-grabbing');
+        // *
+      }
+    }
+  };
+  // @ts-ignore
+  var onPreviewMouseMove = function onPreviewMouseMove(e) {
+    // console.log('判断鼠标往左还是往右', e)
+    if (isDraging) {
+      isMoved = true;
+      endCoords = {
+        pageX: e.pageX,
+        pageY: e.pageY
+      };
+      touchMove(startCoords, endCoords);
+    }
+  };
+  // @ts-ignore
+  var onPreviewMouseUp = function onPreviewMouseUp(event) {
+    if (isMoved) {
+      isMoved = false;
+      touchEnd(endCoords, startCoords, event);
+    } else {
+      // 没有移动且当前点击的不是img标签，则直接关闭
+      if (event.target.tagName !== 'IMG') {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      }
+    }
+    // Prevent execution on click
+    if (isDraging) {
+      isDraging = false;
+      outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.remove('spec-image-preview-grabbing');
+      outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.add('spec-image-preview-grab');
+    }
+  };
+  var onMouseWheel = (0, _react.useCallback)(function (e) {
+    if (!e.deltaY || galleryCount < 2) {
+      return;
+    }
+    e.preventDefault();
+    var lastCall = 0;
+    var now = new Date().getTime();
+    if (now - lastCall < 1000) {
+      return;
+    }
+    // @ts-ignore
+    lastCall = now;
+    if (e.deltaY > 0) {
+      goToNextSlide();
+    } else if (e.deltaY < 0) {
+      goToPrevSlide();
+    }
+  }, [thisIndex]);
+  var onTouchStart = function onTouchStart(e) {
+    var _a;
+    dragOrSwipeEnabled = true;
+    var $item = getSlideItem(thisIndex);
+    // @ts-ignore
+    if (((_a = $item === null || $item === void 0 ? void 0 : $item.contains) === null || _a === void 0 ? void 0 : _a.call($item, e.target)) && e.touches.length === 1) {
+      isSwiping = true;
+      touchAction = 'swipe';
+      manageSwipeClass();
+      startCoords = {
+        pageX: e.touches[0].pageX,
+        pageY: e.touches[0].pageY
+      };
+    }
+  };
+  // @ts-ignore
+  var onTouchMove = function onTouchMove(e) {
+    if (isSwiping && touchAction === 'swipe' && e.touches.length === 1) {
+      endCoords = {
+        pageX: e.touches[0].pageX,
+        pageY: e.touches[0].pageY
+      };
+      touchMove(startCoords, endCoords, e);
+      isMoved = true;
+    }
+  };
+  // @ts-ignore
+  var onTouchEnd = function onTouchEnd(event) {
+    if (touchAction === 'swipe') {
+      if (isMoved) {
+        isMoved = false;
+        touchEnd(endCoords, startCoords, event);
+      } else if (isSwiping) {
+        // const target = $LG(event.target);
+        // if (this.isPosterElement(target)) {
+        //   this.LGel.trigger(lGEvents.posterClick);
+        // }
+      }
+      touchAction = undefined;
+      isSwiping = false;
+    }
+  };
+  var touchMove = function touchMove(startCoords, endCoords, e) {
+    var _a, _b, _c, _d;
+    var distanceX = endCoords.pageX - startCoords.pageX;
+    var distanceY = endCoords.pageY - startCoords.pageY;
+    var allowSwipe = false;
+    if (swipeDirection) {
+      allowSwipe = true;
+    } else {
+      if (Math.abs(distanceX) > 15) {
+        // 向水平左右
+        swipeDirection = 'horizontal';
+        allowSwipe = true;
+      } else if (Math.abs(distanceY) > 15) {
+        // 向垂直上下(功能未实现）
+        swipeDirection = 'vertical';
+        allowSwipe = true;
+      }
+    }
+    if (!allowSwipe) {
+      return;
+    }
+    var $currentSlide = getSlideItem(thisIndex);
+    if (swipeDirection === 'horizontal') {
+      e === null || e === void 0 ? void 0 : e.preventDefault();
+      // reset opacity and transition duration
+      outerRef.current.classList.add('spec-image-preview-dragging');
+      // move current slide
+      setTranslate($currentSlide, distanceX, 0);
+      // move next and prev slide with current slide
+      // @ts-ignore
+      var width = $currentSlide.offsetWidth;
+      var slideWidthAmount = width * 15 / 100;
+      var gutter = slideWidthAmount - Math.abs(distanceX * 10 / 100);
+      var queryFirstPrev = (_b = (_a = outerRef === null || outerRef === void 0 ? void 0 : outerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.spec-image-preview-prev-slide')) === null || _b === void 0 ? void 0 : _b[0];
+      var queryFirstNext = (_d = (_c = outerRef === null || outerRef === void 0 ? void 0 : outerRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.spec-image-preview-next-slide')) === null || _d === void 0 ? void 0 : _d[0];
+      setTranslate(queryFirstPrev, -width + distanceX - gutter, 0);
+      setTranslate(queryFirstNext, width + distanceX + gutter, 0);
+    } else if (swipeDirection === 'vertical') {
+      // if (settings.swipeToClose) {
+      //   e?.preventDefault();
+      //   this.$container.addClass('lg-dragging-vertical');
+      //
+      //   const opacity = 1 - Math.abs(distanceY) / window.innerHeight;
+      //   this.$backdrop.css('opacity', opacity);
+      //
+      //   const scale = 1 - Math.abs(distanceY) / (window.innerWidth * 2);
+      //   this.setTranslate($currentSlide, 0, distanceY, scale, scale);
+      //   if (Math.abs(distanceY) > 100) {
+      //     this.outer
+      //       .addClass('lg-hide-items')
+      //       .removeClass('lg-components-open');
+      //   }
+      // }
+    }
+  };
+  var touchEnd = function touchEnd(endCoords, startCoords, event) {
+    var distance;
+    // keep slide animation for any mode while dragg/swipe
+    outerRef.current.classList.add('spec-image-preview-slide');
+    // set transition duration
+    setTimeout(function () {
+      outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.remove('spec-image-preview-dragging-vertical');
+      outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.remove('spec-image-preview-dragging');
+      outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.remove('spec-image-preview-hide-items');
+      outerRef === null || outerRef === void 0 ? void 0 : outerRef.current.classList.add('spec-image-preview-components-open');
+      var triggerClick = true;
+      if (swipeDirection === 'horizontal') {
+        distance = endCoords.pageX - startCoords.pageX;
+        var distanceAbs = Math.abs(endCoords.pageX - startCoords.pageX);
+        if (distance < 0 && distanceAbs > settings.swipeThreshold) {
+          goToNextSlide(true);
+          triggerClick = false;
+        } else if (distance > 0 && distanceAbs > settings.swipeThreshold) {
+          goToPrevSlide(true);
+          triggerClick = false;
+        }
+      } else if (swipeDirection === 'vertical') {
+        // distance = Math.abs(endCoords.pageY - startCoords.pageY);
+        // if (
+        //   settings.closable &&
+        //   settings.swipeToClose &&
+        //   distance > 100
+        // ) {
+        //   closeGallery();
+        //   return;
+        // } else {
+        //   $backdrop.css('opacity', 1);
+        // }
+      }
+      // this.outer.find('.lg-item').removeAttr('style');
+      // outerRef?.current?.querySelectorAll('.spec-image-preview-item')
+      $itemsRef.current.forEach(function (item) {
+        // item?.classList?.remove('spec-image-preview-prev-slide')
+        // item?.classList?.remove('spec-image-preview-next-slide')
+        // console.log('移除行内样式', item)
+        item.style = '';
+      });
+      if (triggerClick && Math.abs(endCoords.pageX - startCoords.pageX) < 5) {
+        // console.log('Trigger click if distance is less than 5 pix')
+        // Trigger click if distance is less than 5 pix
+        // const target = $LG(event.target);
+        // if (this.isPosterElement(target)) {
+        //   this.LGel.trigger(lGEvents.posterClick);
+        // }
+      }
+      swipeDirection = '';
+    });
+    // remove slide class once drag/swipe is completed if mode is not slide
+    setTimeout(function () {
+      var _a, _b;
+      if (!((_a = outerRef === null || outerRef === void 0 ? void 0 : outerRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains('spec-image-preview-dragging'))) {
+        (_b = outerRef === null || outerRef === void 0 ? void 0 : outerRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove('spec-image-preview-slide');
+      }
+    }, settings.speed + 100);
+  };
+  var setTranslate = function setTranslate($el, xValue, yValue) {
+    var scaleX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    var scaleY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+    if (!$el) return;
+    $el.style.transform = 'translate3d(' + xValue + 'px, ' + yValue + 'px, 0px) scale3d(' + scaleX + ', ' + scaleY + ', 1)';
+  };
+  var makeSlideAnimation = function makeSlideAnimation(direction, currentSlideItem, previousSlideItem) {
+    previousSlideItem.classList.add('spec-image-preview-slide-progress');
+    setTimeout(function () {
+      // remove all transitions
+      outerRef.current.classList.add('spec-image-preview-no-trans');
+      $itemsRef.current.forEach(function (item) {
+        var _a, _b;
+        (_a = item === null || item === void 0 ? void 0 : item.classList) === null || _a === void 0 ? void 0 : _a.remove('spec-image-preview-prev-slide');
+        (_b = item === null || item === void 0 ? void 0 : item.classList) === null || _b === void 0 ? void 0 : _b.remove('spec-image-preview-next-slide');
+      });
+      if (direction === 'prev') {
+        // prev slide
+        currentSlideItem.classList.add('spec-image-preview-prev-slide');
+        previousSlideItem.classList.add('spec-image-preview-next-slide');
+      } else {
+        // next slide
+        currentSlideItem.classList.add('spec-image-preview-next-slide');
+        previousSlideItem.classList.add('spec-image-preview-prev-slide');
+      }
+      // give 50 ms for browser to add/remove class
+      setTimeout(function () {
+        $itemsRef.current.forEach(function (item) {
+          var _a;
+          (_a = item === null || item === void 0 ? void 0 : item.classList) === null || _a === void 0 ? void 0 : _a.remove('spec-image-preview-current');
+        });
+        currentSlideItem.classList.add('spec-image-preview-current');
+        // reset all transitions
+        outerRef.current.classList.remove('spec-image-preview-no-trans');
+      }, 50);
+    }, settings.slideDelay);
+  };
+  /**
+   * Get previous index of the slide
+   */
+  var getPreviousSlideIndex = function getPreviousSlideIndex() {
+    var _a;
+    var prevIndex = 0;
+    try {
+      var firstNode = (_a = outerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.spec-image-preview-current')[0];
+      var currentItemId = firstNode === null || firstNode === void 0 ? void 0 : firstNode.getAttribute('id');
+      // console.log('currentItemId', currentItemId, currentItemId.split('-'))
+      var clsArr = currentItemId.split('-');
+      prevIndex = parseInt(clsArr[clsArr.length - 1]) || 0;
+    } catch (error) {
+      prevIndex = 0;
+    }
+    return prevIndex;
+  };
+  /**
+   * Go to next slide
+   * @param {Boolean} fromTouch - true if slide function called via touch event
+   * @category lGPublicMethods
+   * @example
+   *  const plugin = lightGallery();
+   *  plugin.goToNextSlide();
+   * @see <a href="/demos/methods/">Demo</a>
+   */
+  var goToNextSlide = function goToNextSlide(fromTouch) {
+    var _loop = settings.loop;
+    if (fromTouch && galleryCount < 3) {
+      _loop = false;
+    }
+    if (!lgBusy) {
+      if (thisIndex + 1 < galleryCount) {
+        thisIndex++;
+        // this.LGel.trigger(lGEvents.beforeNextSlide, {
+        //   index: thisIndex,
+        // });
+        slide(thisIndex, !!fromTouch, false, 'next');
+      } else {
+        if (_loop) {
+          thisIndex = 0;
+          // this.LGel.trigger(lGEvents.beforeNextSlide, {
+          //   index: thisIndex,
+          // });
+          slide(thisIndex, !!fromTouch, false, 'next');
+        } else if (settings.slideEndAnimation && !fromTouch) {
+          outerRef.current.classList.add('spec-image-preview-right-end');
+          setTimeout(function () {
+            outerRef.current.classList.remove('spec-image-preview-right-end');
+          }, 400);
+        }
+      }
+    }
+  };
+  /**
+   * Go to previous slides
+   * @param {Boolean} fromTouch - true if slide function called via touch event
+   * @category lGPublicMethods
+   * @example
+   *  const plugin = lightGallery({});
+   *  plugin.goToPrevSlide();
+   * @see <a href="/demos/methods/">Demo</a>
+   *
+   */
+  var goToPrevSlide = function goToPrevSlide(fromTouch) {
+    var _loop = settings.loop;
+    if (fromTouch && galleryCount < 3) {
+      _loop = false;
+    }
+    if (!lgBusy) {
+      if (thisIndex > 0) {
+        thisIndex--;
+        // this.LGel.trigger(lGEvents.beforePrevSlide, {
+        //   index: thisIndex,
+        //   fromTouch,
+        // });
+        slide(thisIndex, !!fromTouch, false, 'prev');
+      } else {
+        if (_loop) {
+          thisIndex = galleryCount - 1;
+          // this.LGel.trigger(lGEvents.beforePrevSlide, {
+          //   index: thisIndex,
+          //   fromTouch,
+          // });
+          slide(thisIndex, !!fromTouch, false, 'prev');
+        } else if (settings.slideEndAnimation && !fromTouch) {
+          outerRef.current.classList.add('spec-image-preview-left-end');
+          setTimeout(function () {
+            outerRef.current.classList.remove('spec-image-preview-left-end');
+          }, 400);
+        }
+      }
+    }
+  };
+  /**
+   * Goto a specific slide.
+   * @param {Number} index - index of the slide
+   * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
+   * @param {Boolean} fromThumb - true if slide function called via thumbnail click
+   * @param {String} direction - Direction of the slide(next/prev)
+   * @category lGPublicMethods
+   * @example
+   *  const plugin = lightGallery();
+   *  // to go to 3rd slide
+   *  plugin.slide(2);
+   *
+   */
+  var slide = function slide(index, fromTouch, fromThumb, direction) {
+    var _a;
+    var prevIndex = getPreviousSlideIndex();
+    // // Prevent multiple call, Required for hsh plugin
+    if (prevIndex === index) {
+      return;
+    }
+    //
+    var numberOfGalleryItems = galleryCount; // this.galleryItems.length;
+    if (!lgBusy) {
+      var currentSlideItem = getSlideItem(index);
+      var previousSlideItem = getSlideItem(prevIndex);
+      var currentGalleryItem = (_a = $itemsRef === null || $itemsRef === void 0 ? void 0 : $itemsRef.current) === null || _a === void 0 ? void 0 : _a[index]; // this.galleryItems[index];
+      // const videoInfo = currentGalleryItem.__slideVideoInfo;
+      // console.log('currentGalleryItem', currentGalleryItem)
+      // outerRef.current.setAttribute('data-lg-slide-type', getSlideType(currentGalleryItem)) // 设置当前播放的类型
+      outerRef.current.setAttribute('data-lg-slide-type', getSlideType(currentGalleryItem)); // TODO.暂时返回image
+      // this.outer.attr(
+      //   'data-lg-slide-type',
+      //   this.getSlideType(currentGalleryItem),
+      // );
+      // this.setDownloadValue(index);
+      // 判断是否是视频
+      // if (videoInfo) {
+      //   const { top, bottom } = this.mediaContainerPosition;
+      //   const videoSize = utils.getSize(
+      //     this.items[index],
+      //     this.outer,
+      //     top + bottom,
+      //     videoInfo && this.settings.videoMaxSize,
+      //   );
+      //   this.resizeVideoSlide(index, videoSize);
+      // }
+      // this.LGel.trigger<BeforeSlideDetail>(lGEvents.beforeSlide, {
+      //   prevIndex,
+      //   index,
+      //   fromTouch: !!fromTouch,
+      //   fromThumb: !!fromThumb,
+      // });
+      lgBusy = true;
+      // clearTimeout(this.hideBarTimeout);
+      // this.arrowDisable(index);
+      if (!direction) {
+        if (index < prevIndex) {
+          direction = 'prev';
+        } else if (index > prevIndex) {
+          direction = 'next';
+        }
+      }
+      if (!fromTouch) {
+        makeSlideAnimation(direction, currentSlideItem, previousSlideItem);
+      } else {
+        // $itemsRef.current.forEach((item: any) => {
+        //   item?.classList?.remove('spec-image-preview-prev-slide')
+        //   item?.classList?.remove('spec-image-preview-next-slide')
+        //   item?.classList?.remove('spec-image-preview-current')
+        // })
+        $itemsRef.current.forEach(function (item) {
+          var _a, _b, _c;
+          (_a = item === null || item === void 0 ? void 0 : item.classList) === null || _a === void 0 ? void 0 : _a.remove('spec-image-preview-prev-slide');
+          (_b = item === null || item === void 0 ? void 0 : item.classList) === null || _b === void 0 ? void 0 : _b.remove('spec-image-preview-next-slide');
+          (_c = item === null || item === void 0 ? void 0 : item.classList) === null || _c === void 0 ? void 0 : _c.remove('spec-image-preview-current');
+        });
+        var touchPrev;
+        var touchNext;
+        if (numberOfGalleryItems > 2) {
+          touchPrev = index - 1;
+          touchNext = index + 1;
+          if (index === 0 && prevIndex === numberOfGalleryItems - 1) {
+            // next slide
+            touchNext = 0;
+            touchPrev = numberOfGalleryItems - 1;
+          } else if (index === numberOfGalleryItems - 1 && prevIndex === 0) {
+            // prev slide
+            touchNext = 0;
+            touchPrev = numberOfGalleryItems - 1;
+          }
+        } else {
+          touchPrev = 0;
+          touchNext = 1;
+        }
+        if (direction === 'prev') {
+          // @ts-ignore
+          getSlideItem(touchNext).classList.add('spec-image-preview-next-slide');
+        } else {
+          // @ts-ignore
+          getSlideItem(touchPrev).classList.add('spec-image-preview-prev-slide');
+        }
+        // @ts-ignore
+        currentSlideItem.classList.add('spec-image-preview-current');
+      }
+      //   // Do not put load content in set timeout as it needs to load immediately when the gallery is opened
+      setTimeout(function () {
+        lgBusy = false;
+        // @ts-ignore
+        previousSlideItem.classList.remove('spec-image-preview-slide-progress');
+        // this.LGel.trigger(lGEvents.afterSlide, {
+        //   prevIndex: prevIndex,
+        //   index,
+        //   fromTouch,
+        //   fromThumb,
+        // });
+      }, settings.speed + 100 + (fromTouch ? 0 : settings.slideDelay));
+    }
+    thisIndex = index;
+    // 更新最新的选中
+    onUpdateTurning === null || onUpdateTurning === void 0 ? void 0 : onUpdateTurning(index);
+  };
+  var getSlideItem = function getSlideItem(index) {
+    return $itemsRef === null || $itemsRef === void 0 ? void 0 : $itemsRef.current[index];
+    // return document.getElementById(getSlideItemId(index));
+  };
+  // const getSlideItemId = (index: number): string => {
+  //   return `${coreId}-item-${index}`;
+  // }
+  // console.log('$itemsRef', $itemsRef)
+  var manageSwipeClass = function manageSwipeClass() {
+    var _a, _b;
+    var _touchNext = thisIndex + 1;
+    var _touchPrev = thisIndex - 1;
+    if (settings.loop && galleryCount > 2) {
+      if (thisIndex === 0) {
+        _touchPrev = galleryCount - 1;
+      } else if (thisIndex === galleryCount - 1) {
+        _touchNext = 0;
+      }
+    }
+    // this.outer.find('.lg-item').removeClass('lg-next-slide lg-prev-slide');
+    // $sliderOuter?.current?.querySelectorAll('.spec-image-preview-item').classList.remove('spec-image-preview-next-slide spec-image-preview-prev-slide')
+    $itemsRef.current.forEach(function (item) {
+      var _a, _b;
+      (_a = item === null || item === void 0 ? void 0 : item.classList) === null || _a === void 0 ? void 0 : _a.remove('spec-image-preview-prev-slide');
+      (_b = item === null || item === void 0 ? void 0 : item.classList) === null || _b === void 0 ? void 0 : _b.remove('spec-image-preview-next-slide');
+    });
+    if (_touchPrev > -1) {
+      // @ts-ignore
+      (_a = getSlideItem(_touchPrev)) === null || _a === void 0 ? void 0 : _a.classList.add('spec-image-preview-prev-slide');
+    }
+    // @ts-ignore
+    (_b = getSlideItem(_touchNext)) === null || _b === void 0 ? void 0 : _b.classList.add('spec-image-preview-next-slide');
+  };
+  // 判断是视频还是图片
+  var getSlideType = function getSlideType(item) {
+    return 'image';
+    if (item.__slideVideoInfo) {
+      return 'video';
+    } else if (item.iframe) {
+      return 'iframe';
+    } else {
+      return 'image';
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if ($sliderOuter === null || $sliderOuter === void 0 ? void 0 : $sliderOuter.current) {
+      $sliderOuter === null || $sliderOuter === void 0 ? void 0 : $sliderOuter.current.addEventListener('wheel', onMouseWheel, {
+        passive: false
+      });
+    }
+    return function () {
+      if ($sliderOuter === null || $sliderOuter === void 0 ? void 0 : $sliderOuter.current) $sliderOuter === null || $sliderOuter === void 0 ? void 0 : $sliderOuter.current.removeEventListener('wheel', onMouseWheel);
+    };
+  }, [$sliderOuter, thisIndex]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'spec-image-preview-content',
+    style: {
+      top: '47px',
+      bottom: hasThumbnail ? '100px' : '10px' // 如果简介文本不显示在图片上面，可配置成154px
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'spec-image-preview-inner',
+    style: {
+      transitionTimingFunction: 'ease',
+      transitionDuration: '300ms'
+    },
+    ref: $sliderOuter
+  }, _react.default.Children.map(children, function (item, index) {
+    // TODO 需要判断预览类型：图片img或者是视频video
+    // item.className =  'spec-image-preview-object spec-image-preview-image'
+    // item.props.className = 'spec-image-preview-object spec-image-preview-image'
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('spec-image-preview-item spec-image-preview-loaded  spec-image-preview-complete  spec-image-preview-complete_ spec-image-preview-zoomable', thisIndex === index ? 'spec-image-preview-current' : ''),
+      key: index,
+      onClick: onPreviewClick,
+      onMouseDown: onPreviewMouseDown,
+      onMouseMove: onPreviewMouseMove,
+      onMouseUp: onPreviewMouseUp,
+      onTouchStart: onTouchStart,
+      onTouchMove: onTouchMove,
+      onTouchEnd: onTouchEnd,
+      id: coreId + '-item-' + index,
+      // @ts-ignore
+      ref: function ref(el) {
+        return $itemsRef.current[index] = el;
+      }
+    }, /*#__PURE__*/_react.default.createElement("picture", {
+      className: 'spec-image-preview-img-wrap',
+      "data-index": index
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      className: 'spec-image-preview-object spec-image-preview-image',
+      src: item.props['data-src' || 'src'],
+      onMouseDown: function onMouseDown(evt) {
+        return evt.preventDefault();
+      }
+    })));
+  })), galleryCount > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('spec-image-preview-prev spec-image-preview-icon', galleryCount === 2 && thumbCurrent === 0 ? 'disabled' : ''),
+    "aria-label": "Previous slide",
+    onClick: function onClick() {
+      return goToPrevSlide === null || goToPrevSlide === void 0 ? void 0 : goToPrevSlide();
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('spec-image-preview-next  spec-image-preview-icon', galleryCount === 2 && thumbCurrent === 1 ? 'disabled' : ''),
+    "aria-label": "Next slide",
+    onClick: function onClick() {
+      return goToNextSlide === null || goToNextSlide === void 0 ? void 0 : goToNextSlide();
+    }
+  })));
+};
+var _default = exports.default = SliderContent;
+/* eslint-disable */