@rpg-engine/long-bow 0.7.70 → 0.7.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.70",
+  "version": "0.7.72",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -30,8 +30,7 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "configure": "./environment/download-credentials.sh",
-    "update:shared-deps": "yarn add @rpg-engine/shared",
-    "prepublish": "yarn tsc"
+    "update:shared-deps": "yarn add @rpg-engine/shared"
   },
   "peerDependencies": {
     "react": ">=16"

package/src/components/Equipment/EquipmentSet.tsx

@@ -2,7 +2,6 @@ import {
   IEquipmentSet,
   IItem,
   IItemContainer,
-  isMobile,
   ItemContainerType,
   ItemSlotType,
   ItemType,
@@ -11,17 +10,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { IPosition } from '../../types/eventTypes';
 import { DraggableContainer } from '../DraggableContainer';
-import {
-  ItemSlotDraggingProvider,
-  useItemSlotDragging,
-} from '../Item/Inventory/context/ItemSlotDraggingContext';
-import {
-  ItemSlotTooltipProvider,
-  useItemSlotTooltip,
-} from '../Item/Inventory/context/ItemSlotTooltipContext';
 import DraggedItem from '../Item/Inventory/DraggedItem';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
-import { ItemSlotToolTips } from '../Item/Inventory/ItemSlotTooltips';
+import { DraggingProvider } from '../Item/Inventory/context/DraggingContext';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 
 export interface IEquipmentSetProps {
@@ -61,6 +52,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   equipmentSet,
   onClose,
   onMouseOver,
+  onSelected,
   onItemClick,
   atlasIMG,
   atlasJSON,
@@ -69,11 +61,11 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemPlaceDrop,
   onItemOutsideDrop,
   checkIfItemCanBeMoved,
+  checkIfItemShouldDragEnd,
   scale,
   initialPosition,
   onPositionChangeEnd,
   onPositionChangeStart,
-  onSelected,
 }) => {
   const {
     neck,
@@ -114,10 +106,6 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
     ItemSlotType.Accessory,
   ];
 
-  const { dragState } = useItemSlotDragging();
-
-  const { updateItemDetails } = useItemSlotTooltip();
-
   const onRenderEquipmentSlotRange = (start: number, end: number) => {
     const equipmentRange = equipmentData.slice(start, end);
     const slotMaksRange = equipmentMaskSlots.slice(start, end);
@@ -141,6 +129,9 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onPointerDown={(itemType, ContainerType) => {
             if (onItemClick) onItemClick(itemType, item, ContainerType);
           }}
+          onSelected={(optionId: string) => {
+            if (onSelected) onSelected(optionId);
+          }}
           onDragStart={(item, slotIndex, itemContainerType) => {
             if (!item) {
               return;
@@ -154,6 +145,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           }}
           dragScale={scale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           onPlaceDrop={(item, slotIndex, itemContainerType) => {
             if (onItemPlaceDrop)
               onItemPlaceDrop(item, slotIndex, itemContainerType);
@@ -169,52 +161,28 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   };
 
   return (
-    <ItemSlotDraggingProvider>
-      <ItemSlotTooltipProvider>
-        <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
-        <DraggableContainer
-          title={'Equipments'}
-          type={RPGUIContainerTypes.Framed}
-          onCloseButton={() => {
-            if (onClose) onClose();
-          }}
-          width="330px"
-          cancelDrag=".equipment-container-body"
-          scale={scale}
-          initialPosition={initialPosition}
-          onPositionChangeEnd={onPositionChangeEnd}
-          onPositionChangeStart={onPositionChangeStart}
-        >
-          <EquipmentSetContainer className="equipment-container-body">
-            <EquipmentColumn>
-              {onRenderEquipmentSlotRange(0, 3)}
-            </EquipmentColumn>
-            <EquipmentColumn>
-              {onRenderEquipmentSlotRange(3, 7)}
-            </EquipmentColumn>
-            <EquipmentColumn>
-              {onRenderEquipmentSlotRange(7, 10)}
-            </EquipmentColumn>
-          </EquipmentSetContainer>
-        </DraggableContainer>
-
-        <ItemSlotToolTips
-          isFocused={dragState.isFocused}
-          isContextMenuDisabled={isMobile()}
-          dragScale={scale}
-          onSelected={(optionId: string, item: IItem) => {
-            updateItemDetails({
-              item,
-              contextMenu: { visible: false },
-            });
-            if (onSelected) onSelected(optionId);
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          equipmentSet={equipmentSet}
-        />
-      </ItemSlotTooltipProvider>
-    </ItemSlotDraggingProvider>
+    <DraggingProvider>
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
+      <DraggableContainer
+        title={'Equipments'}
+        type={RPGUIContainerTypes.Framed}
+        onCloseButton={() => {
+          if (onClose) onClose();
+        }}
+        width="330px"
+        cancelDrag=".equipment-container-body"
+        scale={scale}
+        initialPosition={initialPosition}
+        onPositionChangeEnd={onPositionChangeEnd}
+        onPositionChangeStart={onPositionChangeStart}
+      >
+        <EquipmentSetContainer className="equipment-container-body">
+          <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>
+          <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>
+          <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>
+        </EquipmentSetContainer>
+      </DraggableContainer>
+    </DraggingProvider>
   );
 };
 

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useCursorPosition } from '../../../hooks/useCursorPosition';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
-import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
+import { useDragging } from './context/DraggingContext';
 
 const CONTAINER_SIZE = 32;
 const OFFSET = CONTAINER_SIZE / 2;
@@ -20,7 +20,7 @@ export const DraggedItem = ({
   atlasIMG,
   scale,
 }: IProps): JSX.Element | null => {
-  const { item } = useItemSlotDragging();
+  const { item } = useDragging();
 
   const { x, y } = useCursorPosition({
     scale,

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

@@ -14,18 +14,10 @@ import { SlotsContainer } from '../../Abstractions/SlotsContainer';
 import { useScrollOnDrag } from '../../../hooks/useScrollOnDrag';
 import { IPosition } from '../../../types/eventTypes';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
-import {
-  ItemSlotDraggingProvider,
-  useItemSlotDragging,
-} from './context/ItemSlotDraggingContext';
-import {
-  ItemSlotTooltipProvider,
-  useItemSlotTooltip,
-} from './context/ItemSlotTooltipContext';
 import { DraggedItem } from './DraggedItem';
 import { ItemQuantitySelectorModal } from './ItemQuantitySelectorModal';
 import { ItemSlot } from './ItemSlot';
-import { ItemSlotToolTips } from './ItemSlotTooltips';
+import { DraggingProvider } from './context/DraggingContext';
 
 export interface IItemContainerProps {
   itemContainer: IItemContainer;
@@ -95,6 +87,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onOutsideDrop,
   checkIfItemCanBeMoved,
   initialPosition,
+  checkIfItemShouldDragEnd,
   scale,
   shortcuts,
   setItemShortcut,
@@ -189,10 +182,14 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               onItemClick(item, itemType, containerType);
             }
           }}
+          onSelected={(optionId: string, item: IItem) => {
+            if (onSelected) onSelected(optionId, item);
+          }}
           onDragStart={onDragStart}
           onDragEnd={onDragEnd}
           dragScale={scale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           openQuantitySelector={(maxQuantity, callback) => {
             setQuantitySelect({
               isOpen: true,
@@ -221,6 +218,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           isSelectingShortcut={settingShortcutIndex !== -1}
+          equipmentSet={equipmentSet}
           setItemShortcut={
             type === ItemContainerType.Inventory ? handleSetShortcut : undefined
           }
@@ -231,69 +229,47 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
     return slots;
   };
 
-  const { updateItemDetails } = useItemSlotTooltip();
-  const { dragState } = useItemSlotDragging();
-
   return (
-    <ItemSlotDraggingProvider>
-      <ItemSlotTooltipProvider>
-        <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
-        <SlotsContainer
-          title={itemContainer.name || 'Container'}
-          onClose={onClose}
-          initialPosition={initialPosition}
-          scale={scale}
-          onPositionChangeEnd={onPositionChangeEnd}
-          onPositionChangeStart={onPositionChangeStart}
+    <DraggingProvider>
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
+      <SlotsContainer
+        title={itemContainer.name || 'Container'}
+        onClose={onClose}
+        initialPosition={initialPosition}
+        scale={scale}
+        onPositionChangeEnd={onPositionChangeEnd}
+        onPositionChangeStart={onPositionChangeStart}
+        isFullScreen={isFullScreen}
+        opacity={opacity}
+      >
+        {type === ItemContainerType.Inventory &&
+          shortcuts &&
+          removeShortcut && (
+            <ShortcutsSetter
+              setSettingShortcutIndex={setSettingShortcutIndex}
+              settingShortcutIndex={settingShortcutIndex}
+              shortcuts={shortcuts}
+              removeShortcut={removeShortcut}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+            />
+          )}
+        <ItemsContainer
+          className="item-container-body"
+          ref={containerRef}
+          isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
           isFullScreen={isFullScreen}
-          opacity={opacity}
         >
-          {type === ItemContainerType.Inventory &&
-            shortcuts &&
-            removeShortcut && (
-              <ShortcutsSetter
-                setSettingShortcutIndex={setSettingShortcutIndex}
-                settingShortcutIndex={settingShortcutIndex}
-                shortcuts={shortcuts}
-                removeShortcut={removeShortcut}
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-              />
-            )}
-          <ItemsContainer
-            className="item-container-body"
-            ref={containerRef}
-            isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
-            isFullScreen={isFullScreen}
-          >
-            {onRenderSlots()}
-          </ItemsContainer>
-        </SlotsContainer>
-
-        <ItemSlotToolTips
-          isFocused={dragState.isFocused}
-          isContextMenuDisabled={disableContextMenu}
-          dragScale={scale}
-          onSelected={(optionId: string, item: IItem) => {
-            updateItemDetails({
-              item,
-              contextMenu: { visible: false },
-            });
-            if (onSelected) onSelected(optionId, item);
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          equipmentSet={equipmentSet}
+          {onRenderSlots()}
+        </ItemsContainer>
+      </SlotsContainer>
+      {quantitySelect.isOpen && (
+        <ItemQuantitySelectorModal
+          quantitySelect={quantitySelect}
+          setQuantitySelect={setQuantitySelect}
         />
-
-        {quantitySelect.isOpen && (
-          <ItemQuantitySelectorModal
-            quantitySelect={quantitySelect}
-            setQuantitySelect={setQuantitySelect}
-          />
-        )}
-      </ItemSlotTooltipProvider>
-    </ItemSlotDraggingProvider>
+      )}
+    </DraggingProvider>
   );
 };