@rpg-engine/long-bow 0.5.74 → 0.5.76
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/Dropdown.d.ts +1 -0
- package/dist/components/ImageCarousel/SimpleImageCarousel.d.ts +2 -3
- package/dist/long-bow.cjs.development.js +42 -49
- 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 +42 -49
- 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/Dropdown.tsx +14 -6
- package/src/components/ImageCarousel/SimpleImageCarousel.tsx +32 -48
- package/src/stories/Dropdown.stories.tsx +10 -2
- 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');
|
|
@@ -14893,7 +14892,9 @@ var ItemTypes = /*#__PURE__*/styled__default.div.withConfig({
|
|
|
14893
14892
|
var Dropdown = function Dropdown(_ref) {
|
|
14894
14893
|
var options = _ref.options,
|
|
14895
14894
|
width = _ref.width,
|
|
14896
|
-
onChange = _ref.onChange
|
|
14895
|
+
onChange = _ref.onChange,
|
|
14896
|
+
_ref$opensUp = _ref.opensUp,
|
|
14897
|
+
opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
|
|
14897
14898
|
var dropdownId = uuid.v4();
|
|
14898
14899
|
var _useState = React.useState(''),
|
|
14899
14900
|
selectedValue = _useState[0],
|
|
@@ -14913,10 +14914,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
14913
14914
|
return o.value === selectedValue;
|
|
14914
14915
|
}).length < 1;
|
|
14915
14916
|
}
|
|
14916
|
-
/**
|
|
14917
|
-
* make a selection if there is no selected value already present
|
|
14918
|
-
* or if there is a selected value but its not in new options
|
|
14919
|
-
*/
|
|
14920
14917
|
if (change) {
|
|
14921
14918
|
setSelectedValue(firstOption.value);
|
|
14922
14919
|
setSelectedOption(firstOption.option);
|
|
@@ -14943,7 +14940,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
14943
14940
|
}
|
|
14944
14941
|
}, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions$1, {
|
|
14945
14942
|
className: "rpgui-dropdown-imp",
|
|
14946
|
-
opened: opened
|
|
14943
|
+
opened: opened,
|
|
14944
|
+
opensUp: opensUp
|
|
14947
14945
|
}, options.map(function (option) {
|
|
14948
14946
|
return React__default.createElement("li", {
|
|
14949
14947
|
key: option.id,
|
|
@@ -14968,8 +14966,12 @@ var DropdownSelect$1 = /*#__PURE__*/styled__default.p.withConfig({
|
|
|
14968
14966
|
var DropdownOptions$1 = /*#__PURE__*/styled__default.ul.withConfig({
|
|
14969
14967
|
displayName: "Dropdown__DropdownOptions",
|
|
14970
14968
|
componentId: "sc-8arn65-2"
|
|
14971
|
-
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
14969
|
+
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
14972
14970
|
return props.opened ? 'block' : 'none';
|
|
14971
|
+
}, function (props) {
|
|
14972
|
+
return props.opensUp ? '100%' : 'auto';
|
|
14973
|
+
}, function (props) {
|
|
14974
|
+
return props.opensUp ? 'auto' : '100%';
|
|
14973
14975
|
});
|
|
14974
14976
|
|
|
14975
14977
|
var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
|
|
@@ -16015,15 +16017,8 @@ var CloseButton$3 = /*#__PURE__*/styled__default.div.withConfig({
|
|
|
16015
16017
|
componentId: "sc-jl6f8-4"
|
|
16016
16018
|
})(["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
16019
|
|
|
16018
|
-
var getTransformedBasePath = function getTransformedBasePath(basePath) {
|
|
16019
|
-
if (core.Capacitor.isNativePlatform()) {
|
|
16020
|
-
return core.Capacitor.convertFileSrc(basePath);
|
|
16021
|
-
}
|
|
16022
|
-
return basePath;
|
|
16023
|
-
};
|
|
16024
16020
|
var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
16025
|
-
var
|
|
16026
|
-
imagesSrc = _ref.imagesSrc,
|
|
16021
|
+
var images = _ref.images,
|
|
16027
16022
|
styles = _ref.styles,
|
|
16028
16023
|
_ref$autoCycle = _ref.autoCycle,
|
|
16029
16024
|
autoCycle = _ref$autoCycle === void 0 ? false : _ref$autoCycle,
|
|
@@ -16034,42 +16029,40 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
|
16034
16029
|
var _useState = React.useState(0),
|
|
16035
16030
|
currentImage = _useState[0],
|
|
16036
16031
|
setCurrentImage = _useState[1];
|
|
16037
|
-
var
|
|
16032
|
+
var autoCycleId = React.useRef(null);
|
|
16033
|
+
var handleLeftClick = function handleLeftClick() {
|
|
16034
|
+
setCurrentImage(function (prevImage) {
|
|
16035
|
+
return (prevImage - 1 + (images == null ? void 0 : images.length)) % (images == null ? void 0 : images.length);
|
|
16036
|
+
});
|
|
16037
|
+
if (stopAutoCyclingOnInteraction && autoCycleId.current) {
|
|
16038
|
+
clearInterval(autoCycleId.current);
|
|
16039
|
+
autoCycleId.current = null;
|
|
16040
|
+
}
|
|
16041
|
+
};
|
|
16042
|
+
var handleRightClick = function handleRightClick() {
|
|
16043
|
+
setCurrentImage(function (prevImage) {
|
|
16044
|
+
return (prevImage + 1) % (images == null ? void 0 : images.length);
|
|
16045
|
+
});
|
|
16046
|
+
if (stopAutoCyclingOnInteraction && autoCycleId.current) {
|
|
16047
|
+
clearInterval(autoCycleId.current);
|
|
16048
|
+
autoCycleId.current = null;
|
|
16049
|
+
}
|
|
16050
|
+
};
|
|
16038
16051
|
React.useEffect(function () {
|
|
16039
|
-
|
|
16040
|
-
|
|
16041
|
-
|
|
16042
|
-
|
|
16043
|
-
|
|
16044
|
-
return;
|
|
16045
|
-
}
|
|
16046
|
-
handleRightClick(true);
|
|
16052
|
+
if (autoCycle) {
|
|
16053
|
+
autoCycleId.current = setInterval(function () {
|
|
16054
|
+
setCurrentImage(function (prevImage) {
|
|
16055
|
+
return (prevImage + 1) % (images == null ? void 0 : images.length);
|
|
16056
|
+
});
|
|
16047
16057
|
}, autoCycleDelay);
|
|
16048
16058
|
}
|
|
16049
16059
|
return function () {
|
|
16050
|
-
if (
|
|
16051
|
-
clearInterval(
|
|
16060
|
+
if (autoCycleId.current) {
|
|
16061
|
+
clearInterval(autoCycleId.current);
|
|
16052
16062
|
}
|
|
16053
16063
|
};
|
|
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;
|
|
16064
|
+
}, [autoCycle, autoCycleDelay, images == null ? void 0 : images.length]);
|
|
16065
|
+
var hasMoreThanOneImage = (images == null ? void 0 : images.length) > 1;
|
|
16073
16066
|
return React__default.createElement(ImageContainer, {
|
|
16074
16067
|
style: styles
|
|
16075
16068
|
}, hasMoreThanOneImage && React__default.createElement(CustomLeftArrow, {
|
|
@@ -16080,14 +16073,14 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
|
|
|
16080
16073
|
onPointerDown: handleRightClick
|
|
16081
16074
|
}), React__default.createElement(Carousel, null, React__default.createElement(FadeInCarouselImg, {
|
|
16082
16075
|
key: currentImage,
|
|
16083
|
-
src:
|
|
16084
|
-
alt:
|
|
16076
|
+
src: images == null ? void 0 : images[currentImage],
|
|
16077
|
+
alt: "Image " + currentImage
|
|
16085
16078
|
})));
|
|
16086
16079
|
};
|
|
16087
16080
|
var ImageContainer = /*#__PURE__*/styled__default.div.withConfig({
|
|
16088
16081
|
displayName: "SimpleImageCarousel__ImageContainer",
|
|
16089
16082
|
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;
|
|
16083
|
+
})(["flex:1;display:flex;justify-content:center;align-items:center;height:100%;margin-right:0.5rem;max-width:400px;position:relative;width:400px;"]);
|
|
16091
16084
|
var CustomLeftArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
|
|
16092
16085
|
displayName: "SimpleImageCarousel__CustomLeftArrow",
|
|
16093
16086
|
componentId: "sc-gdvbly-1"
|