@rpg-engine/long-bow 0.7.39 → 0.7.41

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

@@ -1,24 +1,21 @@
 import { IEquipmentSet, IItem } from '@rpg-engine/shared';
 import React from 'react';
-import { IPosition } from '../../../types/eventTypes';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { MobileItemTooltip } from '../Cards/MobileItemTooltip';
 import { IContextMenuItem } from './itemContainerHelper';
+import type { ContextMenuState, TooltipState } from './ItemSlot';
 
 interface IProps {
-  isTooltipVisible: boolean;
+  tooltipState: TooltipState;
+  setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
+  contextMenuState: ContextMenuState;
+  setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
   isFocused: boolean;
-  isContextMenuVisible: boolean;
   isContextMenuDisabled: boolean;
   item: IItem | null;
-  isTooltipMobileVisible: boolean;
   contextActions: IContextMenuItem[];
-  contextMenuPosition: IPosition;
   dragScale: number | undefined;
-  setIsContextMenuVisible: (visible: boolean) => void;
-  setIsTooltipMobileVisible: (visible: boolean) => void;
-  setIsTooltipVisible: (visible: boolean) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   atlasIMG: any;
   atlasJSON: any;
@@ -26,17 +23,15 @@ interface IProps {
 }
 
 export const ItemSlotToolTips = ({
-  isTooltipVisible,
+  tooltipState,
+  setTooltipState,
+  contextMenuState,
+  setContextMenuState,
   isFocused,
-  isContextMenuVisible,
   isContextMenuDisabled,
   item,
   contextActions,
-  contextMenuPosition,
   dragScale,
-  setIsContextMenuVisible,
-  setIsTooltipMobileVisible,
-  isTooltipMobileVisible,
   onSelected,
   atlasIMG,
   atlasJSON,
@@ -44,7 +39,7 @@ export const ItemSlotToolTips = ({
 }: IProps): JSX.Element => {
   return (
     <>
-      {isTooltipVisible && item && !isFocused && (
+      {tooltipState.visible && item && !isFocused && (
         <ItemTooltip
           item={item}
           atlasIMG={atlasIMG}
@@ -53,19 +48,19 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {isTooltipMobileVisible && item && (
+      {tooltipState.mobileVisible && item && (
         <MobileItemTooltip
           item={item}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           equipmentSet={equipmentSet}
           closeTooltip={() => {
-            setIsTooltipMobileVisible(false);
+            setTooltipState(prev => ({ ...prev, mobileVisible: false }));
           }}
           scale={dragScale}
           options={contextActions}
           onSelected={(optionId: string) => {
-            setIsContextMenuVisible(false);
+            setContextMenuState(prev => ({ ...prev, visible: false }));
             if (item) {
               onSelected?.(optionId, item);
             }
@@ -73,19 +68,20 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
+      {!isContextMenuDisabled && contextMenuState.visible && contextActions && (
         <RelativeListMenu
           options={contextActions}
           onSelected={(optionId: string) => {
-            setIsContextMenuVisible(false);
+            setContextMenuState(prev => ({ ...prev, visible: false }));
+
             if (item) {
               onSelected?.(optionId, item);
             }
           }}
           onOutsideClick={() => {
-            setIsContextMenuVisible(false);
+            setContextMenuState(prev => ({ ...prev, visible: false }));
           }}
-          pos={contextMenuPosition}
+          pos={contextMenuState.position}
         />
       )}
     </>

package/src/stories/UI/containers/ItemContainer.stories.tsx

@@ -23,7 +23,7 @@ export default meta;
 
 const onMouseOver = (_event: any, slotIndex: number, item: IItem | null) => {
   if (!item) {
-    // console.log(`Free at ${slotIndex}` )
+    console.log(`Free at ${slotIndex}`);
     return;
   }
   console.log(`${item.name} at ${slotIndex}`);
@@ -115,12 +115,22 @@ const Template: Story<IItemContainerProps & ITemplateProps> = ({
       onItemPlaceDrop={(item, slotIndex) => {
         // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
 
+        console.log({
+          item: item?.name,
+          sI: slotIndex,
+          dragK: dragItem?.key,
+          itemK: item?.key,
+          dragSlot,
+          slotIndex,
+        });
+
         if (!item || (dragItem?.key === item?.key && dragSlot !== slotIndex)) {
           console.log('allow');
           allowedToDrop = true;
           dropSlot = slotIndex;
           dropItem = item ? item : null;
         } else {
+          console.log('not allowing drop');
           allowedToDrop = false;
           dropSlot = -1;
           dropItem = null;