@rpg-engine/long-bow 0.3.80 → 0.3.82

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

@@ -1,215 +1,218 @@
-import {
-  IEquipmentSet,
-  IItem,
-  IItemContainer,
-  IShortcut,
-  ItemContainerType,
-  ItemType,
-} from '@rpg-engine/shared';
-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 { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
-import { ItemSlot } from './ItemSlot';
-
-export interface IItemContainerProps {
-  itemContainer: IItemContainer;
-  onClose?: () => void;
-  onItemClick?: (
-    item: IItem,
-    ItemType: IItem['type'],
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragStart?: (
-    item: IItem,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragEnd?: (quantity?: number) => void;
-  onOutsideDrop?: (item: IItem, position: IPosition) => void;
-  onItemPlaceDrop?: (
-    item: IItem | null,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  scale?: number;
-  checkIfItemCanBeMoved: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
-  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
-  onSelected?: (optionId: string, item: IItem) => void;
-  type: ItemContainerType;
-  atlasJSON: any;
-  atlasIMG: any;
-  disableContextMenu?: boolean;
-  initialPosition?: { x: number; y: number };
-  shortcuts?: IShortcut[];
-  setItemShortcut?: (key: string, index: number) => void;
-  removeShortcut?: (index: number) => void;
-  equipmentSet?: IEquipmentSet | null;
-}
-
-export const ItemContainer: React.FC<IItemContainerProps> = ({
-  itemContainer,
-  onClose,
-  onMouseOver,
-  onSelected,
-  onItemClick,
-  type,
-  atlasJSON,
-  atlasIMG,
-  disableContextMenu = false,
-  onItemDragEnd,
-  onItemDragStart,
-  onItemPlaceDrop,
-  onOutsideDrop,
-  checkIfItemCanBeMoved,
-  initialPosition,
-  checkIfItemShouldDragEnd,
-  scale,
-  shortcuts,
-  setItemShortcut,
-  removeShortcut,
-  equipmentSet,
-}) => {
-  const [quantitySelect, setQuantitySelect] = useState({
-    isOpen: false,
-    maxQuantity: 1,
-    callback: (_quantity: number) => {},
-  });
-  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
-
-  const onRenderSlots = () => {
-    const slots = [];
-
-    for (let i = 0; i < itemContainer.slotQty; i++) {
-      slots.push(
-        <ItemSlot
-          isContextMenuDisabled={disableContextMenu}
-          key={i}
-          slotIndex={i}
-          item={itemContainer.slots?.[i] || null}
-          itemContainerType={type}
-          onMouseOver={(event, slotIndex, item) => {
-            if (onMouseOver) onMouseOver(event, slotIndex, item);
-          }}
-          onPointerDown={(itemType, containerType, item) => {
-            if (settingShortcutIndex !== -1) {
-              setSettingShortcutIndex(-1);
-
-              if (
-                itemType === ItemType.Consumable ||
-                itemType === ItemType.Tool
-              ) {
-                setItemShortcut?.(item.key, settingShortcutIndex);
-              }
-            } else if (onItemClick) onItemClick(item, itemType, containerType);
-          }}
-          onSelected={(optionId: string, item: IItem) => {
-            if (onSelected) onSelected(optionId, item);
-          }}
-          onDragStart={(item, slotIndex, itemContainerType) => {
-            if (onItemDragStart)
-              onItemDragStart(item, slotIndex, itemContainerType);
-          }}
-          onDragEnd={quantity => {
-            if (onItemDragEnd) onItemDragEnd(quantity);
-          }}
-          dragScale={scale}
-          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-          openQuantitySelector={(maxQuantity, callback) => {
-            setQuantitySelect({
-              isOpen: true,
-              maxQuantity,
-              callback,
-            });
-          }}
-          onPlaceDrop={(item, slotIndex, itemContainerType) => {
-            if (onItemPlaceDrop)
-              onItemPlaceDrop(item, slotIndex, itemContainerType);
-          }}
-          onOutsideDrop={(item, position) => {
-            if (onOutsideDrop) onOutsideDrop(item, position);
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          isSelectingShortcut={settingShortcutIndex !== -1}
-          equipmentSet={equipmentSet}
-        />
-      );
-    }
-    return slots;
-  };
-
-  return (
-    <>
-      <SlotsContainer
-        title={itemContainer.name || 'Container'}
-        onClose={onClose}
-        initialPosition={initialPosition}
-        scale={scale}
-      >
-        {type === ItemContainerType.Inventory &&
-          shortcuts &&
-          removeShortcut && (
-            <ShortcutsSetter
-              setSettingShortcutIndex={setSettingShortcutIndex}
-              settingShortcutIndex={settingShortcutIndex}
-              shortcuts={shortcuts}
-              removeShortcut={removeShortcut}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-            />
-          )}
-        <ItemsContainer className="item-container-body">
-          {onRenderSlots()}
-        </ItemsContainer>
-      </SlotsContainer>
-      {quantitySelect.isOpen && (
-        <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>
-      )}
-    </>
-  );
-};
-
-const ItemsContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-`;
-
-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);
-`;
+import {
+  IEquipmentSet,
+  IItem,
+  IItemContainer,
+  IShortcut,
+  ItemContainerType,
+  ItemType,
+} from '@rpg-engine/shared';
+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 { ItemSlot } from './ItemSlot';
+
+export interface IItemContainerProps {
+  itemContainer: IItemContainer;
+  onClose?: () => void;
+  onItemClick?: (
+    item: IItem,
+    ItemType: IItem['type'],
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragStart?: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragEnd?: (quantity?: number) => void;
+  onOutsideDrop?: (item: IItem, position: IPosition) => void;
+  onItemPlaceDrop?: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  scale?: number;
+  checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onSelected?: (optionId: string, item: IItem) => void;
+  type: ItemContainerType;
+  atlasJSON: any;
+  atlasIMG: any;
+  disableContextMenu?: boolean;
+  initialPosition?: { x: number; y: number };
+  shortcuts?: IShortcut[];
+  setItemShortcut?: (key: string, index: number) => void;
+  removeShortcut?: (index: number) => void;
+  equipmentSet?: IEquipmentSet | null;
+}
+
+export const ItemContainer: React.FC<IItemContainerProps> = ({
+  itemContainer,
+  onClose,
+  onMouseOver,
+  onSelected,
+  onItemClick,
+  type,
+  atlasJSON,
+  atlasIMG,
+  disableContextMenu = false,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onOutsideDrop,
+  checkIfItemCanBeMoved,
+  initialPosition,
+  checkIfItemShouldDragEnd,
+  scale,
+  shortcuts,
+  setItemShortcut,
+  removeShortcut,
+  equipmentSet,
+}) => {
+  const [quantitySelect, setQuantitySelect] = useState({
+    isOpen: false,
+    maxQuantity: 1,
+    callback: (_quantity: number) => {},
+  });
+  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+
+  const onRenderSlots = () => {
+    const slots = [];
+
+    for (let i = 0; i < itemContainer.slotQty; i++) {
+      slots.push(
+        <ItemSlot
+          isContextMenuDisabled={disableContextMenu}
+          key={i}
+          slotIndex={i}
+          item={itemContainer.slots?.[i] || null}
+          itemContainerType={type}
+          onMouseOver={(event, slotIndex, item) => {
+            if (onMouseOver) onMouseOver(event, slotIndex, item);
+          }}
+          onPointerDown={(itemType, containerType, item) => {
+            if (settingShortcutIndex !== -1) {
+              setSettingShortcutIndex(-1);
+
+              if (
+                itemType === ItemType.Consumable ||
+                itemType === ItemType.Tool
+              ) {
+                setItemShortcut?.(item.key, settingShortcutIndex);
+              }
+            } else if (onItemClick) onItemClick(item, itemType, containerType);
+          }}
+          onSelected={(optionId: string, item: IItem) => {
+            if (onSelected) onSelected(optionId, item);
+          }}
+          onDragStart={(item, slotIndex, itemContainerType) => {
+            if (onItemDragStart)
+              onItemDragStart(item, slotIndex, itemContainerType);
+          }}
+          onDragEnd={quantity => {
+            if (onItemDragEnd) onItemDragEnd(quantity);
+          }}
+          dragScale={scale}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
+          openQuantitySelector={(maxQuantity, callback) => {
+            setQuantitySelect({
+              isOpen: true,
+              maxQuantity,
+              callback,
+            });
+          }}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
+          onOutsideDrop={(item, position) => {
+            if (onOutsideDrop) onOutsideDrop(item, position);
+          }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          isSelectingShortcut={settingShortcutIndex !== -1}
+          equipmentSet={equipmentSet}
+        />
+      );
+    }
+    return slots;
+  };
+
+  return (
+    <>
+      <SlotsContainer
+        title={itemContainer.name || 'Container'}
+        onClose={onClose}
+        initialPosition={initialPosition}
+        scale={scale}
+      >
+        {type === ItemContainerType.Inventory &&
+          shortcuts &&
+          removeShortcut && (
+            <ShortcutsSetter
+              setSettingShortcutIndex={setSettingShortcutIndex}
+              settingShortcutIndex={settingShortcutIndex}
+              shortcuts={shortcuts}
+              removeShortcut={removeShortcut}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+            />
+          )}
+        <ItemsContainer className="item-container-body">
+          {onRenderSlots()}
+        </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>
+      )}
+    </>
+  );
+};
+
+const ItemsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+
+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/ItemContainerTypes.ts

@@ -1,6 +1,6 @@
-export enum SlotContainerType {
-  INVENTORY = 'Inventory',
-  EQUIPMENT_SET = 'EquipmentSet',
-  LOOT = 'Loot',
-  MAP_CONTAINER = 'Map-Container',
-}
+export enum SlotContainerType {
+  INVENTORY = 'Inventory',
+  EQUIPMENT_SET = 'EquipmentSet',
+  LOOT = 'Loot',
+  MAP_CONTAINER = 'Map-Container',
+}