@rpg-engine/long-bow 0.5.74 → 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 -48
- package/src/stories/SimpleImageCarousel.stories.tsx +3 -2
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface ISimpleImageCarousel {
|
|
3
|
-
|
|
4
|
-
imagesSrc: string[];
|
|
3
|
+
images: string[];
|
|
5
4
|
styles?: React.CSSProperties;
|
|
6
5
|
autoCycle?: boolean;
|
|
7
6
|
autoCycleDelay?: number;
|
|
8
7
|
stopAutoCyclingOnInteraction?: boolean;
|
|
9
8
|
}
|
|
10
|
-
export declare const SimpleImageCarousel:
|
|
9
|
+
export declare const SimpleImageCarousel: React.FC<ISimpleImageCarousel>;
|
|
@@ -18,7 +18,6 @@ var Draggable = _interopDefault(require('react-draggable'));
|
|
|
18
18
|
var ReactDOM = _interopDefault(require('react-dom'));
|
|
19
19
|
var lodash = require('lodash');
|
|
20
20
|
var mobxReactLite = require('mobx-react-lite');
|
|
21
|
-
var core = require('@capacitor/core');
|
|
22
21
|
var ai = require('react-icons/ai');
|
|
23
22
|
require('rpgui/rpgui.css');
|
|
24
23
|
require('rpgui/rpgui.min.js');
|
|
@@ -16015,15 +16014,8 @@ var CloseButton$3 = /*#__PURE__*/styled__default.div.withConfig({
|
|
|
16015
16014
|
componentId: "sc-jl6f8-4"
|
|
16016
16015
|
})(["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;}"]);
|
|
16017
16016
|
|
|
16018
|
-
var getTransformedBasePath = function getTransformedBasePath(basePath) {
|
|
16019
|
-
if (core.Capacitor.isNativePlatform()) {
|
|
16020
|
-
return core.Capacitor.convertFileSrc(basePath);
|
|
16021
|
-
}
|
|
16022
|
-
return basePath;
|
|
16023
|
-
};
|
|
16024
16017
|
var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
16025
|
-
var
|
|
16026
|
-
imagesSrc = _ref.imagesSrc,
|
|
16018
|
+
var images = _ref.images,
|
|
16027
16019
|
styles = _ref.styles,
|
|
16028
16020
|
_ref$autoCycle = _ref.autoCycle,
|
|
16029
16021
|
autoCycle = _ref$autoCycle === void 0 ? false : _ref$autoCycle,
|
|
@@ -16034,42 +16026,40 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
|
16034
16026
|
var _useState = React.useState(0),
|
|
16035
16027
|
currentImage = _useState[0],
|
|
16036
16028
|
setCurrentImage = _useState[1];
|
|
16037
|
-
var
|
|
16029
|
+
var autoCycleId = React.useRef(null);
|
|
16030
|
+
var handleLeftClick = function handleLeftClick() {
|
|
16031
|
+
setCurrentImage(function (prevImage) {
|
|
16032
|
+
return (prevImage - 1 + (images == null ? void 0 : images.length)) % (images == null ? void 0 : images.length);
|
|
16033
|
+
});
|
|
16034
|
+
if (stopAutoCyclingOnInteraction && autoCycleId.current) {
|
|
16035
|
+
clearInterval(autoCycleId.current);
|
|
16036
|
+
autoCycleId.current = null;
|
|
16037
|
+
}
|
|
16038
|
+
};
|
|
16039
|
+
var handleRightClick = function handleRightClick() {
|
|
16040
|
+
setCurrentImage(function (prevImage) {
|
|
16041
|
+
return (prevImage + 1) % (images == null ? void 0 : images.length);
|
|
16042
|
+
});
|
|
16043
|
+
if (stopAutoCyclingOnInteraction && autoCycleId.current) {
|
|
16044
|
+
clearInterval(autoCycleId.current);
|
|
16045
|
+
autoCycleId.current = null;
|
|
16046
|
+
}
|
|
16047
|
+
};
|
|
16038
16048
|
React.useEffect(function () {
|
|
16039
|
-
|
|
16040
|
-
|
|
16041
|
-
|
|
16042
|
-
|
|
16043
|
-
|
|
16044
|
-
return;
|
|
16045
|
-
}
|
|
16046
|
-
handleRightClick(true);
|
|
16049
|
+
if (autoCycle) {
|
|
16050
|
+
autoCycleId.current = setInterval(function () {
|
|
16051
|
+
setCurrentImage(function (prevImage) {
|
|
16052
|
+
return (prevImage + 1) % (images == null ? void 0 : images.length);
|
|
16053
|
+
});
|
|
16047
16054
|
}, autoCycleDelay);
|
|
16048
16055
|
}
|
|
16049
16056
|
return function () {
|
|
16050
|
-
if (
|
|
16051
|
-
clearInterval(
|
|
16057
|
+
if (autoCycleId.current) {
|
|
16058
|
+
clearInterval(autoCycleId.current);
|
|
16052
16059
|
}
|
|
16053
16060
|
};
|
|
16054
|
-
}, [autoCycle, autoCycleDelay]);
|
|
16055
|
-
var
|
|
16056
|
-
isInteracted.current = true;
|
|
16057
|
-
setCurrentImage(function (oldImage) {
|
|
16058
|
-
return oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1;
|
|
16059
|
-
});
|
|
16060
|
-
};
|
|
16061
|
-
var handleRightClick = function handleRightClick(isAutomatedClick) {
|
|
16062
|
-
if (isAutomatedClick === void 0) {
|
|
16063
|
-
isAutomatedClick = false;
|
|
16064
|
-
}
|
|
16065
|
-
if (!isAutomatedClick) {
|
|
16066
|
-
isInteracted.current = true;
|
|
16067
|
-
}
|
|
16068
|
-
setCurrentImage(function (oldImage) {
|
|
16069
|
-
return oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1;
|
|
16070
|
-
});
|
|
16071
|
-
};
|
|
16072
|
-
var hasMoreThanOneImage = imagesSrc.length > 1;
|
|
16061
|
+
}, [autoCycle, autoCycleDelay, images == null ? void 0 : images.length]);
|
|
16062
|
+
var hasMoreThanOneImage = (images == null ? void 0 : images.length) > 1;
|
|
16073
16063
|
return React__default.createElement(ImageContainer, {
|
|
16074
16064
|
style: styles
|
|
16075
16065
|
}, hasMoreThanOneImage && React__default.createElement(CustomLeftArrow, {
|
|
@@ -16080,14 +16070,14 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
|
16080
16070
|
onPointerDown: handleRightClick
|
|
16081
16071
|
}), React__default.createElement(Carousel, null, React__default.createElement(FadeInCarouselImg, {
|
|
16082
16072
|
key: currentImage,
|
|
16083
|
-
src:
|
|
16084
|
-
alt:
|
|
16073
|
+
src: images == null ? void 0 : images[currentImage],
|
|
16074
|
+
alt: "Image " + currentImage
|
|
16085
16075
|
})));
|
|
16086
16076
|
};
|
|
16087
16077
|
var ImageContainer = /*#__PURE__*/styled__default.div.withConfig({
|
|
16088
16078
|
displayName: "SimpleImageCarousel__ImageContainer",
|
|
16089
16079
|
componentId: "sc-gdvbly-0"
|
|
16090
|
-
})(["flex:1;display:flex;justify-content:center;align-items:center;height:100%;margin-right:0.5rem;max-width:400px;width:400px;
|
|
16080
|
+
})(["flex:1;display:flex;justify-content:center;align-items:center;height:100%;margin-right:0.5rem;max-width:400px;position:relative;width:400px;"]);
|
|
16091
16081
|
var CustomLeftArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
|
|
16092
16082
|
displayName: "SimpleImageCarousel__CustomLeftArrow",
|
|
16093
16083
|
componentId: "sc-gdvbly-1"
|