@rpg-engine/long-bow 0.7.85 → 0.7.87

package/dist/long-bow.esm.js

@@ -30497,71 +30497,68 @@ var Input$1 = /*#__PURE__*/styled.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 = useState(quantity),
+  var _useState = useState(initialQuantity != null ? initialQuantity : maxQuantity),
     value = _useState[0],
     setValue = _useState[1];
   var inputRef = useRef(null);
   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.createElement(StyledContainer, {
     type: RPGUIContainerTypes.Framed,
     width: "25rem"
   }, React.createElement(CloseButton$5, {
     className: "container-close",
     onPointerDown: onClose
-  }, "X"), React.createElement("h2", null, "Select quantity to move"), React.createElement(StyledForm, {
-    style: {
-      width: '100%'
-    },
+  }, "X"), React.createElement("h2", null, title), React.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.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.createElement(RangeSlider, {
     type: RangeSliderType.Slider,
     valueMin: 1,
-    valueMax: quantity,
+    valueMax: maxQuantity,
     width: "100%",
     onChange: setValue,
     value: value
@@ -30571,50 +30568,68 @@ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
   }, "Confirm")));
 };
 var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
-  displayName: "ItemQuantitySelector__StyledContainer",
-  componentId: "sc-yfdtpn-0"
-})(["display:flex;flex-direction:column;align-items:center;"]);
-var StyledForm = /*#__PURE__*/styled.form.withConfig({
-  displayName: "ItemQuantitySelector__StyledForm",
-  componentId: "sc-yfdtpn-1"
-})(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
-var StyledInput = /*#__PURE__*/styled(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.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.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.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 ItemQuantitySelectorModal = function ItemQuantitySelectorModal(_ref) {
+var validateQuantitySelect = function validateQuantitySelect(quantitySelect) {
+  return _extends({}, quantitySelect, {
+    maxQuantity: Math.max(1, quantitySelect.maxQuantity),
+    initialQuantity: quantitySelect.initialQuantity ? Math.max(1, Math.min(quantitySelect.maxQuantity, quantitySelect.initialQuantity)) : undefined
+  });
+};
+var QuantitySelectorModal = function QuantitySelectorModal(_ref) {
   var quantitySelect = _ref.quantitySelect,
     setQuantitySelect = _ref.setQuantitySelect;
-  return React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
-    quantity: quantitySelect.maxQuantity,
+  var resetQuantitySelect = function resetQuantitySelect() {
+    setQuantitySelect({
+      isOpen: false,
+      maxQuantity: 1,
+      callback: function callback() {}
+    });
+  };
+  // Validate the input values
+  var validatedQuantitySelect = validateQuantitySelect(quantitySelect);
+  return React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(QuantitySelector, {
+    maxQuantity: validatedQuantitySelect.maxQuantity,
+    initialQuantity: validatedQuantitySelect.initialQuantity,
+    title: validatedQuantitySelect.title,
     onConfirm: function onConfirm(quantity) {
-      quantitySelect.callback(quantity);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
+      validatedQuantitySelect.callback(quantity);
+      resetQuantitySelect();
     },
     onClose: function onClose() {
-      quantitySelect.callback(-1);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
+      validatedQuantitySelect.callback(-1);
+      resetQuantitySelect();
     }
   })));
 };
 var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemQuantitySelectorModal__QuantitySelectorContainer",
-  componentId: "sc-1b8cosc-0"
+  displayName: "QuantitySelectorModal__QuantitySelectorContainer",
+  componentId: "sc-aye686-0"
 })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
+var ItemQuantitySelectorModal = function ItemQuantitySelectorModal(_ref) {
+  var quantitySelect = _ref.quantitySelect,
+    setQuantitySelect = _ref.setQuantitySelect;
+  return React.createElement(QuantitySelectorModal, {
+    quantitySelect: quantitySelect,
+    setQuantitySelect: setQuantitySelect
+  });
+};
+
 var MIN_SLOTS_FOR_SCROLL = 20;
 var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
   var itemContainer = _ref.itemContainer,