@rpg-engine/long-bow 0.5.49 → 0.5.51

package/dist/long-bow.esm.js

@@ -1,5 +1,5 @@
 import React, { Component, useState, useEffect, useRef, useContext, createContext, useMemo, useCallback, Fragment } from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
@@ -15917,6 +15917,90 @@ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-jl6f8-4"
 })(["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,
+    styles = _ref.styles,
+    _ref$autoCycle = _ref.autoCycle,
+    autoCycle = _ref$autoCycle === void 0 ? false : _ref$autoCycle,
+    _ref$autoCycleDelay = _ref.autoCycleDelay,
+    autoCycleDelay = _ref$autoCycleDelay === void 0 ? 3000 : _ref$autoCycleDelay,
+    _ref$stopAutoCyclingO = _ref.stopAutoCyclingOnInteraction,
+    stopAutoCyclingOnInteraction = _ref$stopAutoCyclingO === void 0 ? false : _ref$stopAutoCyclingO;
+  var _useState = useState(0),
+    currentImage = _useState[0],
+    setCurrentImage = _useState[1];
+  var isInteracted = useRef(false);
+  useEffect(function () {
+    var timer = null;
+    if (autoCycle && !isInteracted.current) {
+      timer = setInterval(function () {
+        if (stopAutoCyclingOnInteraction && isInteracted.current) {
+          clearInterval(timer);
+          return;
+        }
+        handleRightClick();
+      }, autoCycleDelay);
+    }
+    return function () {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
+  }, [autoCycle, autoCycleDelay]);
+  var handleLeftClick = function handleLeftClick() {
+    isInteracted.current = true;
+    setCurrentImage(function (oldImage) {
+      return oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1;
+    });
+  };
+  var handleRightClick = function handleRightClick() {
+    isInteracted.current = true;
+    setCurrentImage(function (oldImage) {
+      return oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1;
+    });
+  };
+  var hasMoreThanOneImage = imagesSrc.length > 1;
+  return React.createElement(ImageContainer, {
+    style: styles
+  }, hasMoreThanOneImage && React.createElement(CustomLeftArrow, {
+    direction: "left",
+    onPointerDown: handleLeftClick
+  }), hasMoreThanOneImage && React.createElement(CustomRightArrow, {
+    direction: "right",
+    onPointerDown: handleRightClick
+  }), React.createElement(Carousel, null, React.createElement(FadeInCarouselImg, {
+    key: currentImage,
+    src: basePath + "/" + imagesSrc[currentImage],
+    alt: imagesSrc[currentImage]
+  })));
+};
+var ImageContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleImageCarousel__ImageContainer",
+  componentId: "sc-gdvbly-0"
+})(["flex:1;display:flex;justify-content:center;align-items:center;height:100%;margin-right:0.5rem;max-width:400px;position:relative;"]);
+var CustomLeftArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
+  displayName: "SimpleImageCarousel__CustomLeftArrow",
+  componentId: "sc-gdvbly-1"
+})(["position:absolute;left:-0.5rem;top:50%;transform:translateY(-50%);"]);
+var CustomRightArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
+  displayName: "SimpleImageCarousel__CustomRightArrow",
+  componentId: "sc-gdvbly-2"
+})(["position:absolute;right:-2.5rem;top:50%;transform:translateY(-50%);"]);
+var Carousel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleImageCarousel__Carousel",
+  componentId: "sc-gdvbly-3"
+})(["display:flex;"]);
+var CarouselImg = /*#__PURE__*/styled.img.withConfig({
+  displayName: "SimpleImageCarousel__CarouselImg",
+  componentId: "sc-gdvbly-4"
+})(["flex:0 0 auto;width:100%;height:auto;margin:0 1rem;border-radius:5px;box-shadow:0 0 10px 0 rgba(0,0,0,0.2);scroll-snap-align:start;margin-right:3rem;"]);
+var fadeIn = /*#__PURE__*/keyframes(["from{opacity:0;}to{opacity:1;}"]);
+var FadeInCarouselImg = /*#__PURE__*/styled(CarouselImg).withConfig({
+  displayName: "SimpleImageCarousel__FadeInCarouselImg",
+  componentId: "sc-gdvbly-5"
+})(["animation:", " 0.5s;"], fadeIn);
+
 var SlotsContainer = function SlotsContainer(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -19114,5 +19198,5 @@ var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
 
-export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map