@rpg-engine/long-bow 0.5.22 → 0.5.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.22",
+  "version": "0.5.23",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -9,12 +9,11 @@ import {
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { IPosition } from '../../../types/eventTypes';
-import ModalPortal from '../../Abstractions/ModalPortal';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
 import { DraggedItem } from './DraggedItem';
+import { ItemQuantitySelectorModal } from './ItemQuantitySelectorModal';
 import { ItemSlot } from './ItemSlot';
 import { DraggingProvider } from './context/DraggingContext';
 
@@ -186,29 +185,10 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         </ItemsContainer>
       </SlotsContainer>
       {quantitySelect.isOpen && (
-        <ModalPortal>
-          <QuantitySelectorContainer>
-            <ItemQuantitySelector
-              quantity={quantitySelect.maxQuantity}
-              onConfirm={quantity => {
-                quantitySelect.callback(quantity);
-                setQuantitySelect({
-                  isOpen: false,
-                  maxQuantity: 1,
-                  callback: () => {},
-                });
-              }}
-              onClose={() => {
-                quantitySelect.callback(-1);
-                setQuantitySelect({
-                  isOpen: false,
-                  maxQuantity: 1,
-                  callback: () => {},
-                });
-              }}
-            />
-          </QuantitySelectorContainer>
-        </ModalPortal>
+        <ItemQuantitySelectorModal
+          quantitySelect={quantitySelect}
+          setQuantitySelect={setQuantitySelect}
+        />
       )}
     </DraggingProvider>
   );
@@ -223,16 +203,3 @@ const ItemsContainer = styled.div`
   overflow-x: hidden;
   width: 415px;
 `;
-
-const QuantitySelectorContainer = styled.div`
-  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);
-`;

package/src/components/Item/Inventory/ItemQuantitySelectorModal.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../../Abstractions/ModalPortal';
+import { ItemQuantitySelector } from './ItemQuantitySelector';
+
+export interface IQuantitySelect {
+  isOpen: boolean;
+  maxQuantity: number;
+  callback: (_quantity: number) => void;
+}
+
+interface IProps {
+  quantitySelect: IQuantitySelect;
+  setQuantitySelect: React.Dispatch<React.SetStateAction<IQuantitySelect>>;
+}
+
+export const ItemQuantitySelectorModal = ({
+  quantitySelect,
+  setQuantitySelect,
+}: IProps) => {
+  return (
+    <ModalPortal>
+      <QuantitySelectorContainer>
+        <ItemQuantitySelector
+          quantity={quantitySelect.maxQuantity}
+          onConfirm={quantity => {
+            quantitySelect.callback(quantity);
+            setQuantitySelect({
+              isOpen: false,
+              maxQuantity: 1,
+              callback: () => {},
+            });
+          }}
+          onClose={() => {
+            quantitySelect.callback(-1);
+            setQuantitySelect({
+              isOpen: false,
+              maxQuantity: 1,
+              callback: () => {},
+            });
+          }}
+        />
+      </QuantitySelectorContainer>
+    </ModalPortal>
+  );
+};
+
+const QuantitySelectorContainer = styled.div`
+  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);
+`;