@rpg-engine/long-bow 0.7.85 → 0.7.86

package/dist/components/QuantitySelector/QuantitySelector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface IQuantitySelectorProps {
+    maxQuantity: number;
+    initialQuantity?: number;
+    title?: string;
+    onConfirm: (quantity: number) => void;
+    onClose: () => void;
+}
+export declare const QuantitySelector: React.FC<IQuantitySelectorProps>;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/Input';
 export * from './components/InternalTabs/InternalTabs';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
+export * from './components/Item/Inventory/ItemQuantitySelectorModal';
 export * from './components/Item/Inventory/ItemSlot';
 export * from './components/itemSelector/ItemSelector';
 export * from './components/Leaderboard/Leaderboard';

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

@@ -30500,71 +30500,68 @@ var Input$1 = /*#__PURE__*/styled__default.input.withConfig({
   componentId: "sc-v8mte9-0"
 })(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
 
-var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
-  var quantity = _ref.quantity,
+var QuantitySelector = function QuantitySelector(_ref) {
+  var maxQuantity = _ref.maxQuantity,
+    initialQuantity = _ref.initialQuantity,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Select quantity' : _ref$title,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose;
-  var _useState = React.useState(quantity),
+  var _useState = React.useState(initialQuantity != null ? initialQuantity : maxQuantity),
     value = _useState[0],
     setValue = _useState[1];
   var inputRef = React.useRef(null);
   React.useEffect(function () {
+    var closeSelector = function closeSelector(e) {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
     if (inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
-      var closeSelector = function closeSelector(e) {
-        if (e.key === 'Escape') {
-          onClose();
-        }
-      };
-      document.addEventListener('keydown', closeSelector);
-      return function () {
-        document.removeEventListener('keydown', closeSelector);
-      };
     }
-    return function () {};
-  }, []);
+    document.addEventListener('keydown', closeSelector);
+    return function () {
+      return document.removeEventListener('keydown', closeSelector);
+    };
+  }, [onClose]);
   return React__default.createElement(StyledContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     width: "25rem"
   }, React__default.createElement(CloseButton$5, {
     className: "container-close",
     onPointerDown: onClose
-  }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
-    style: {
-      width: '100%'
-    },
+  }, "X"), React__default.createElement("h2", null, title), React__default.createElement(StyledForm, {
     onSubmit: function onSubmit(e) {
       e.preventDefault();
       var numberValue = Number(value);
-      if (Number.isNaN(numberValue)) {
-        return;
+      if (!Number.isNaN(numberValue)) {
+        onConfirm(Math.max(1, Math.min(maxQuantity, numberValue)));
       }
-      onConfirm(Math.max(1, Math.min(quantity, numberValue)));
     },
     noValidate: true
   }, React__default.createElement(StyledInput, {
-    innerRef: inputRef,
+    ref: inputRef,
     placeholder: "Enter quantity",
     type: "number",
     min: 1,
-    max: quantity,
+    max: maxQuantity,
     value: value,
     onChange: function onChange(e) {
-      if (Number(e.target.value) >= quantity) {
-        setValue(quantity);
+      if (Number(e.target.value) >= maxQuantity) {
+        setValue(maxQuantity);
         return;
       }
-      setValue(e.target.value);
+      setValue(Number(e.target.value));
     },
     onBlur: function onBlur(e) {
-      var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
-      setValue(newValue);
+      setValue(Math.max(1, Math.min(maxQuantity, Number(e.target.value))));
     }
   }), React__default.createElement(RangeSlider, {
     type: exports.RangeSliderType.Slider,
     valueMin: 1,
-    valueMax: quantity,
+    valueMax: maxQuantity,
     width: "100%",
     onChange: setValue,
     value: value
@@ -30574,21 +30571,34 @@ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
   }, "Confirm")));
 };
 var StyledContainer = /*#__PURE__*/styled__default(RPGUIContainer).withConfig({
-  displayName: "ItemQuantitySelector__StyledContainer",
-  componentId: "sc-yfdtpn-0"
-})(["display:flex;flex-direction:column;align-items:center;"]);
-var StyledForm = /*#__PURE__*/styled__default.form.withConfig({
-  displayName: "ItemQuantitySelector__StyledForm",
-  componentId: "sc-yfdtpn-1"
-})(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
-var StyledInput = /*#__PURE__*/styled__default(Input).withConfig({
-  displayName: "ItemQuantitySelector__StyledInput",
-  componentId: "sc-yfdtpn-2"
-})(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
+  displayName: "QuantitySelector__StyledContainer",
+  componentId: "sc-z4ut57-0"
+})(["position:relative;display:flex;flex-direction:column;align-items:center;padding:1rem;h2{margin:0;margin-bottom:1rem;font-size:1rem;}"]);
 var CloseButton$5 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ItemQuantitySelector__CloseButton",
-  componentId: "sc-yfdtpn-3"
-})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
+  displayName: "QuantitySelector__CloseButton",
+  componentId: "sc-z4ut57-1"
+})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;cursor:pointer;"]);
+var StyledForm = /*#__PURE__*/styled__default.form.withConfig({
+  displayName: "QuantitySelector__StyledForm",
+  componentId: "sc-z4ut57-2"
+})(["display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;"]);
+var StyledInput = /*#__PURE__*/styled__default.input.withConfig({
+  displayName: "QuantitySelector__StyledInput",
+  componentId: "sc-z4ut57-3"
+})(["width:100%;padding:0.5rem;background-color:rgba(0,0,0,0.25);border:none;color:white;font-size:1rem;text-align:center;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
+
+var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
+  var quantity = _ref.quantity,
+    onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose;
+  return React__default.createElement(QuantitySelector, {
+    maxQuantity: quantity,
+    initialQuantity: quantity,
+    title: "Select quantity to move",
+    onConfirm: onConfirm,
+    onClose: onClose
+  });
+};
 
 var ItemQuantitySelectorModal = function ItemQuantitySelectorModal(_ref) {
   var quantitySelect = _ref.quantitySelect,
@@ -34098,6 +34108,7 @@ exports.Input = Input;
 exports.InputRadio = InputRadio$1;
 exports.InternalTabs = InternalTabs;
 exports.ItemContainer = ItemContainer$1;
+exports.ItemQuantitySelectorModal = ItemQuantitySelectorModal;
 exports.ItemSelector = ItemSelector;
 exports.ItemSlot = ItemSlot;
 exports.Leaderboard = Leaderboard;