@rpg-engine/long-bow 0.5.66 → 0.5.67

package/dist/components/ImageCarousel/SimpleImageCarousel.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 export interface ISimpleImageCarousel {
-    basePath: string;
-    imagesSrc: string[];
+    images: string[];
     styles?: React.CSSProperties;
     autoCycle?: boolean;
     autoCycleDelay?: number;
     stopAutoCyclingOnInteraction?: boolean;
 }
-export declare const SimpleImageCarousel: ({ basePath, imagesSrc, styles, autoCycle, autoCycleDelay, stopAutoCyclingOnInteraction, }: ISimpleImageCarousel) => JSX.Element;
+export declare const SimpleImageCarousel: React.FC<ISimpleImageCarousel>;

package/dist/long-bow.cjs.development.js

@@ -16015,8 +16015,7 @@ var CloseButton$3 = /*#__PURE__*/styled__default.div.withConfig({
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
 
 var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
-  var basePath = _ref.basePath,
-    imagesSrc = _ref.imagesSrc,
+  var images = _ref.images,
     styles = _ref.styles,
     _ref$autoCycle = _ref.autoCycle,
     autoCycle = _ref$autoCycle === void 0 ? false : _ref$autoCycle,
@@ -16027,42 +16026,43 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
   var _useState = React.useState(0),
     currentImage = _useState[0],
     setCurrentImage = _useState[1];
-  var isInteracted = React.useRef(false);
+  var _useState2 = React.useState(null),
+    autoCycleId = _useState2[0],
+    setAutoCycleId = _useState2[1];
+  var handleLeftClick = function handleLeftClick() {
+    setCurrentImage(function (prevImage) {
+      return (prevImage - 1 + images.length) % images.length;
+    });
+    if (stopAutoCyclingOnInteraction && autoCycleId) {
+      clearInterval(autoCycleId);
+      setAutoCycleId(null);
+    }
+  };
+  var handleRightClick = function handleRightClick() {
+    setCurrentImage(function (prevImage) {
+      return (prevImage + 1) % images.length;
+    });
+    if (stopAutoCyclingOnInteraction && autoCycleId) {
+      clearInterval(autoCycleId);
+      setAutoCycleId(null);
+    }
+  };
   React.useEffect(function () {
-    var timer = null;
-    if (autoCycle && !isInteracted.current) {
-      timer = setInterval(function () {
-        if (stopAutoCyclingOnInteraction && isInteracted.current) {
-          clearInterval(timer);
-          return;
-        }
-        handleRightClick(true);
+    if (autoCycle) {
+      var id = setInterval(function () {
+        setCurrentImage(function (prevImage) {
+          return (prevImage + 1) % images.length;
+        });
       }, autoCycleDelay);
+      setAutoCycleId(id);
     }
     return function () {
-      if (timer) {
-        clearInterval(timer);
+      if (autoCycleId) {
+        clearInterval(autoCycleId);
       }
     };
-  }, [autoCycle, autoCycleDelay]);
-  var handleLeftClick = function handleLeftClick() {
-    isInteracted.current = true;
-    setCurrentImage(function (oldImage) {
-      return oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1;
-    });
-  };
-  var handleRightClick = function handleRightClick(isAutomatedClick) {
-    if (isAutomatedClick === void 0) {
-      isAutomatedClick = false;
-    }
-    if (!isAutomatedClick) {
-      isInteracted.current = true;
-    }
-    setCurrentImage(function (oldImage) {
-      return oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1;
-    });
-  };
-  var hasMoreThanOneImage = imagesSrc.length > 1;
+  }, [autoCycle, autoCycleDelay, images.length]);
+  var hasMoreThanOneImage = images.length > 1;
   return React__default.createElement(ImageContainer, {
     style: styles
   }, hasMoreThanOneImage && React__default.createElement(CustomLeftArrow, {
@@ -16073,8 +16073,8 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
     onPointerDown: handleRightClick
   }), React__default.createElement(Carousel, null, React__default.createElement(FadeInCarouselImg, {
     key: currentImage,
-    src: basePath + "/" + imagesSrc[currentImage],
-    alt: imagesSrc[currentImage]
+    src: images[currentImage],
+    alt: "Image " + currentImage
   })));
 };
 var ImageContainer = /*#__PURE__*/styled__default.div.withConfig({