diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx index f6ca329cafa..24b12959d4b 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx @@ -20,8 +20,8 @@ import styles from './LabwareOverlays.css' interface Props { labwareOnDeck: LabwareOnDeck - setHoveredLabware: (val?: LabwareOnDeck | null) => unknown - setDraggedLabware: (val?: LabwareOnDeck | null) => unknown + setHoveredLabware: (val?: LabwareOnDeck | null) => void + setDraggedLabware: (val?: LabwareOnDeck | null) => void swapBlocked: boolean } @@ -38,6 +38,7 @@ export const EditLabware = (props: Props): JSX.Element | null => { const savedLabware = useSelector(labwareIngredSelectors.getSavedLabware) const dispatch = useDispatch>() const { t } = useTranslation('deck') + const ref = React.useRef(null) const { isTiprack } = labwareOnDeck.def.parameters const hasName = savedLabware[labwareOnDeck.id] @@ -62,26 +63,21 @@ export const EditLabware = (props: Props): JSX.Element | null => { const [{ draggedLabware, isOver }, drop] = useDrop(() => ({ accept: DND_TYPES.LABWARE, - canDrop: (item: any) => { - const draggedItem = item?.labwareOnDeck - const draggedLabware = draggedItem?.labwareOnDeck + canDrop: (item: DroppedItem) => { + const draggedLabware = item?.labwareOnDeck const isDifferentSlot = draggedLabware && draggedLabware.slot !== labwareOnDeck.slot return isDifferentSlot && !swapBlocked }, - drop: (item: any) => { - const draggedItem = item?.labwareOnDeck - if (draggedItem) { - dispatch( - moveDeckItem(draggedItem.labwareOnDeck.slot, labwareOnDeck.slot) - ) + drop: (item: DroppedItem) => { + const draggedLabware = item?.labwareOnDeck + if (draggedLabware) { + dispatch(moveDeckItem(draggedLabware.slot, labwareOnDeck.slot)) } }, - hover: (monitor: DropTargetMonitor) => { - if (monitor.canDrop()) { - setHoveredLabware(labwareOnDeck) - } + hover: () => { + setHoveredLabware(labwareOnDeck) }, collect: (monitor: DropTargetMonitor) => ({ isOver: monitor.isOver(), @@ -151,17 +147,18 @@ export const EditLabware = (props: Props): JSX.Element | null => { ) } - const dragResult = drag( -
-
- {contents} -
+ drag(drop(ref)) + + const dragResult = ( +
+ {contents}
) diff --git a/protocol-designer/src/components/steplist/ContextMenu.tsx b/protocol-designer/src/components/steplist/ContextMenu.tsx index 354d8f7113c..e36344c39cf 100644 --- a/protocol-designer/src/components/steplist/ContextMenu.tsx +++ b/protocol-designer/src/components/steplist/ContextMenu.tsx @@ -61,10 +61,6 @@ export const ContextMenu = (props: Props): JSX.Element => { }) const makeHandleContextMenu = (stepId: StepIdType) => (event: MouseEvent) => { - console.log( - 'handle context menu called before isMulti SelectMode', - isMultiSelectMode - ) if (isMultiSelectMode) return event.preventDefault() @@ -84,7 +80,6 @@ export const ContextMenu = (props: Props): JSX.Element => { screenH - clickY > rootH ? clickY + MENU_OFFSET_PX : clickY - rootH - MENU_OFFSET_PX - console.log('handle context menu called') setVisible(true) setStepId(stepId) setPosition({ left, top }) diff --git a/protocol-designer/src/components/steplist/DraggableStepItems.tsx b/protocol-designer/src/components/steplist/DraggableStepItems.tsx index 63c5f476da0..d383698f0e5 100644 --- a/protocol-designer/src/components/steplist/DraggableStepItems.tsx +++ b/protocol-designer/src/components/steplist/DraggableStepItems.tsx @@ -92,8 +92,6 @@ export const DraggableStepItems = ( React.useEffect(() => { setStepIds(orderedStepIds) }, [orderedStepIds]) - console.log('orderedStepIds', orderedStepIds) - console.log('stepIds', stepIds) const clickDrop = (): void => { if (!isEqual(orderedStepIds, stepIds)) { @@ -120,8 +118,7 @@ export const DraggableStepItems = ( stepIds.findIndex(id => stepId === id) const currentIds = isOver ? stepIds : orderedStepIds - console.log('isover', isOver) - console.log('currentIds', currentIds) + return ( <>