@rpg-engine/long-bow 0.5.73 → 0.5.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ImageCarousel/SimpleImageCarousel.d.ts +2 -3
- package/dist/long-bow.cjs.development.js +32 -42
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +32 -42
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -2
- package/src/assets/images/backpack.png +0 -0
- package/src/assets/images/depot.png +0 -0
- package/src/components/ImageCarousel/SimpleImageCarousel.tsx +32 -47
- package/src/stories/SimpleImageCarousel.stories.tsx +3 -2
package/dist/long-bow.esm.js
CHANGED
|
@@ -10,7 +10,6 @@ import Draggable from 'react-draggable';
|
|
|
10
10
|
import ReactDOM from 'react-dom';
|
|
11
11
|
import { camelCase } from 'lodash-es';
|
|
12
12
|
import { observer } from 'mobx-react-lite';
|
|
13
|
-
import { Capacitor } from '@capacitor/core';
|
|
14
13
|
import { AiFillCaretRight } from 'react-icons/ai';
|
|
15
14
|
import 'rpgui/rpgui.css';
|
|
16
15
|
import 'rpgui/rpgui.min.js';
|
|
@@ -16011,15 +16010,8 @@ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
|
|
|
16011
16010
|
componentId: "sc-jl6f8-4"
|
|
16012
16011
|
})(["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;}"]);
|
|
16013
16012
|
|
|
16014
|
-
var getTransformedBasePath = function getTransformedBasePath(basePath) {
|
|
16015
|
-
if (Capacitor.isNativePlatform()) {
|
|
16016
|
-
return Capacitor.convertFileSrc(basePath);
|
|
16017
|
-
}
|
|
16018
|
-
return basePath;
|
|
16019
|
-
};
|
|
16020
16013
|
var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
16021
|
-
var
|
|
16022
|
-
imagesSrc = _ref.imagesSrc,
|
|
16014
|
+
var images = _ref.images,
|
|
16023
16015
|
styles = _ref.styles,
|
|
16024
16016
|
_ref$autoCycle = _ref.autoCycle,
|
|
16025
16017
|
autoCycle = _ref$autoCycle === void 0 ? false : _ref$autoCycle,
|
|
@@ -16030,42 +16022,40 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
|
16030
16022
|
var _useState = useState(0),
|
|
16031
16023
|
currentImage = _useState[0],
|
|
16032
16024
|
setCurrentImage = _useState[1];
|
|
16033
|
-
var
|
|
16025
|
+
var autoCycleId = useRef(null);
|
|
16026
|
+
var handleLeftClick = function handleLeftClick() {
|
|
16027
|
+
setCurrentImage(function (prevImage) {
|
|
16028
|
+
return (prevImage - 1 + (images == null ? void 0 : images.length)) % (images == null ? void 0 : images.length);
|
|
16029
|
+
});
|
|
16030
|
+
if (stopAutoCyclingOnInteraction && autoCycleId.current) {
|
|
16031
|
+
clearInterval(autoCycleId.current);
|
|
16032
|
+
autoCycleId.current = null;
|
|
16033
|
+
}
|
|
16034
|
+
};
|
|
16035
|
+
var handleRightClick = function handleRightClick() {
|
|
16036
|
+
setCurrentImage(function (prevImage) {
|
|
16037
|
+
return (prevImage + 1) % (images == null ? void 0 : images.length);
|
|
16038
|
+
});
|
|
16039
|
+
if (stopAutoCyclingOnInteraction && autoCycleId.current) {
|
|
16040
|
+
clearInterval(autoCycleId.current);
|
|
16041
|
+
autoCycleId.current = null;
|
|
16042
|
+
}
|
|
16043
|
+
};
|
|
16034
16044
|
useEffect(function () {
|
|
16035
|
-
|
|
16036
|
-
|
|
16037
|
-
|
|
16038
|
-
|
|
16039
|
-
|
|
16040
|
-
return;
|
|
16041
|
-
}
|
|
16042
|
-
handleRightClick(true);
|
|
16045
|
+
if (autoCycle) {
|
|
16046
|
+
autoCycleId.current = setInterval(function () {
|
|
16047
|
+
setCurrentImage(function (prevImage) {
|
|
16048
|
+
return (prevImage + 1) % (images == null ? void 0 : images.length);
|
|
16049
|
+
});
|
|
16043
16050
|
}, autoCycleDelay);
|
|
16044
16051
|
}
|
|
16045
16052
|
return function () {
|
|
16046
|
-
if (
|
|
16047
|
-
clearInterval(
|
|
16053
|
+
if (autoCycleId.current) {
|
|
16054
|
+
clearInterval(autoCycleId.current);
|
|
16048
16055
|
}
|
|
16049
16056
|
};
|
|
16050
|
-
}, [autoCycle, autoCycleDelay]);
|
|
16051
|
-
var
|
|
16052
|
-
isInteracted.current = true;
|
|
16053
|
-
setCurrentImage(function (oldImage) {
|
|
16054
|
-
return oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1;
|
|
16055
|
-
});
|
|
16056
|
-
};
|
|
16057
|
-
var handleRightClick = function handleRightClick(isAutomatedClick) {
|
|
16058
|
-
if (isAutomatedClick === void 0) {
|
|
16059
|
-
isAutomatedClick = false;
|
|
16060
|
-
}
|
|
16061
|
-
if (!isAutomatedClick) {
|
|
16062
|
-
isInteracted.current = true;
|
|
16063
|
-
}
|
|
16064
|
-
setCurrentImage(function (oldImage) {
|
|
16065
|
-
return oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1;
|
|
16066
|
-
});
|
|
16067
|
-
};
|
|
16068
|
-
var hasMoreThanOneImage = imagesSrc.length > 1;
|
|
16057
|
+
}, [autoCycle, autoCycleDelay, images == null ? void 0 : images.length]);
|
|
16058
|
+
var hasMoreThanOneImage = (images == null ? void 0 : images.length) > 1;
|
|
16069
16059
|
return React.createElement(ImageContainer, {
|
|
16070
16060
|
style: styles
|
|
16071
16061
|
}, hasMoreThanOneImage && React.createElement(CustomLeftArrow, {
|
|
@@ -16076,14 +16066,14 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
|
16076
16066
|
onPointerDown: handleRightClick
|
|
16077
16067
|
}), React.createElement(Carousel, null, React.createElement(FadeInCarouselImg, {
|
|
16078
16068
|
key: currentImage,
|
|
16079
|
-
src:
|
|
16080
|
-
alt:
|
|
16069
|
+
src: images == null ? void 0 : images[currentImage],
|
|
16070
|
+
alt: "Image " + currentImage
|
|
16081
16071
|
})));
|
|
16082
16072
|
};
|
|
16083
16073
|
var ImageContainer = /*#__PURE__*/styled.div.withConfig({
|
|
16084
16074
|
displayName: "SimpleImageCarousel__ImageContainer",
|
|
16085
16075
|
componentId: "sc-gdvbly-0"
|
|
16086
|
-
})(["flex:1;display:flex;justify-content:center;align-items:center;height:100%;margin-right:0.5rem;max-width:400px;position:relative;"]);
|
|
16076
|
+
})(["flex:1;display:flex;justify-content:center;align-items:center;height:100%;margin-right:0.5rem;max-width:400px;position:relative;width:400px;"]);
|
|
16087
16077
|
var CustomLeftArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
|
|
16088
16078
|
displayName: "SimpleImageCarousel__CustomLeftArrow",
|
|
16089
16079
|
componentId: "sc-gdvbly-1"
|