@rpg-engine/long-bow 0.5.30 → 0.5.32

package/package.json

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

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

@@ -117,7 +117,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
     const dragContainer = useRef<HTMLDivElement>(null);
 
-    const { setDraggingItem } = useDragging();
+    const { item: draggingItem, setDraggingItem } = useDragging();
 
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
@@ -160,6 +160,7 @@ export const ItemSlot: React.FC<IProps> = observer(
       setDraggingItem(null);
 
       const target = e.target as HTMLElement;
+
       if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
         const index = parseInt(target.id.split('_')[1]);
         if (!isNaN(index)) {
@@ -167,6 +168,11 @@ export const ItemSlot: React.FC<IProps> = observer(
         }
       }
 
+      // remove the class react-draggable-dragging from the element
+      // to prevent the item from being dragged again
+
+      target.classList.remove('react-draggable-dragging');
+
       if (wasDragged && item && !isSelectingShortcut) {
         //@ts-ignore
         const classes: string[] = Array.from(e.target?.classList);
@@ -241,8 +247,6 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
 
       if (onDragStart && containerType) {
-        setDraggingItem(item);
-
         onDragStart(item, slotIndex, containerType);
       }
     };
@@ -255,10 +259,15 @@ export const ItemSlot: React.FC<IProps> = observer(
         setWasDragged(true);
         setIsFocused(true);
       }
+
+      if (!draggingItem) {
+        setDraggingItem(item);
+      }
     };
 
     return (
       <Container
+        isDraggingItem={!!draggingItem}
         item={item}
         className="rpgui-icon empty-slot"
         onMouseUp={() => {
@@ -363,13 +372,15 @@ interface ContainerTypes {
   item: IItem | null;
   containerType?: ItemContainerType | null;
   isSelectingShortcut?: boolean;
+  isDraggingItem?: boolean;
 }
 
 const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
   .react-draggable-dragging {
-    opacity: 0;
+    // if is dragging item, set opacity to 0
+    opacity: ${({ isDraggingItem }) => (isDraggingItem ? 0 : 1)};
   }
 
   position: relative;