@rpg-engine/long-bow 0.7.85 → 0.7.86

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,21 +30568,34 @@ 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 ItemQuantitySelector = function ItemQuantitySelector(_ref) {
+  var quantity = _ref.quantity,
+    onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose;
+  return React.createElement(QuantitySelector, {
+    maxQuantity: quantity,
+    initialQuantity: quantity,
+    title: "Select quantity to move",
+    onConfirm: onConfirm,
+    onClose: onClose
+  });
+};
 
 var ItemQuantitySelectorModal = function ItemQuantitySelectorModal(_ref) {
   var quantitySelect = _ref.quantitySelect,
@@ -34071,5 +34081,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemQuantitySelectorModal, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map