fix: cancel drag on scheduling page when item moves beyond container y bounds #320

src/views/components/calendar/Calendar.tsx

@@ -64,7 +64,7 @@ export default function Calendar(): JSX.Element {
                         <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
                             <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pl-4.5 pr-4 pt-5'>
                                 <CalendarSchedules />
-                                <Divider orientation='horizontal' size='100%' className='my-5' />
+                                <Divider orientation='horizontal' size='100%' className='mb-5' />
                                 <ImportantLinks />
                                 <Divider orientation='horizontal' size='100%' className='my-5' />
                                 <TeamLinks />

src/views/components/calendar/CalendarSchedules.tsx

@@ -5,7 +5,7 @@ import List from '@views/components/common/List';
 import ScheduleListItem from '@views/components/common/ScheduleListItem';
 import Text from '@views/components/common/Text/Text';
 import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
-import React from 'react';
+import React, { useRef } from 'react';
 
 import AddSchedule from '~icons/material-symbols/add';
 
@@ -20,6 +20,7 @@ import { usePrompt } from '../common/DialogProvider/DialogProvider';
 export function CalendarSchedules() {
     const [, schedules] = useSchedules();
     const showDialog = usePrompt();
+    const containerRef = useRef<HTMLDivElement>(null);
 
     const handleAddSchedule = () => {
         if (schedules.length >= 10) {
@@ -48,7 +49,7 @@ export function CalendarSchedules() {
     };
 
     return (
-        <div className='min-w-full w-0 items-center'>
+        <div className='min-w-full w-0 items-center pb-5' ref={containerRef}>
             <div className='m0 m-b-2 w-full flex justify-between'>
                 <Text variant='h3' className='text-nowrap'>
                     MY SCHEDULES
@@ -62,6 +63,7 @@ export function CalendarSchedules() {
                     gap={10}
                     draggables={schedules}
                     itemKey={s => s.id}
+                    boundingRef={containerRef}
                     onReordered={reordered => {
                         const activeSchedule = getActiveSchedule();
                         const activeIndex = reordered.findIndex(s => s.id === activeSchedule.id);

src/views/components/common/List.tsx

@@ -1,6 +1,11 @@
-import type { DraggableProvided, DraggableProvidedDragHandleProps, OnDragEndResponder } from '@hello-pangea/dnd';
+import type {
+    DraggableProvided,
+    DraggableProvidedDragHandleProps,
+    OnDragEndResponder,
+    OnDragStartResponder,
+} from '@hello-pangea/dnd';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import type { ReactElement } from 'react';
+import type { ReactElement, RefObject } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import ExtensionRoot from './ExtensionRoot/ExtensionRoot';
@@ -18,6 +23,7 @@ export interface ListProps<T> {
     onReordered: (elements: T[]) => void;
     itemKey: (item: T) => React.Key;
     gap?: number; // Impacts the spacing between items in the list
+    boundingRef?: RefObject<HTMLElement>; // Element that clamps the y-value for draggable items
 }
 
 function wrap<T>(draggableElements: T[], keyTransform: ListProps<T>['itemKey']) {
@@ -72,51 +78,74 @@ function Item<T>(props: {
  * @example
  * <List draggableElements={elements} />
  */
-function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps<T>): JSX.Element {
+function List<T>({ draggables, itemKey, children, onReordered, gap, boundingRef }: ListProps<T>): JSX.Element {
     const [items, setItems] = useState(wrap(draggables, itemKey));
-
+    const [activeItem, setActiveItem] = useState<Element | null>(null);
+    const boundingEl = boundingRef?.current;
     const transformFunction = children;
 
     useEffect(() => {
         setItems(wrap(draggables, itemKey));
-
         // This is on purpose
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [draggables]);
 
+    useEffect(() => {
+        if (!activeItem || !boundingEl) return;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!boundingEl) return;
+
+            const bounds = boundingEl.getBoundingClientRect();
+            const isOutsideBounds = e.clientY < bounds.top || e.clientY > bounds.bottom;
+
+            if (isOutsideBounds) {
+                // force end of drag
+                window.dispatchEvent(
+                    new KeyboardEvent('keydown', {
+                        key: 'Escape',
+                        keyCode: 27,
+                        which: 27,
+                        bubbles: true,
+                    })
+                );
+            }
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        return () => document.removeEventListener('mousemove', handleMouseMove);
+    }, [activeItem, boundingEl]);
+
     const onDragEnd: OnDragEndResponder = useCallback(
         ({ destination, source }) => {
+            setActiveItem(null);
+
             if (!destination) return;
             if (source.index === destination.index) return;
 
             // will reorder in place
             const reordered = reorder(items, source.index, destination.index);
-
             setItems(reordered);
             onReordered(reordered.map(item => item.content));
         },
-
         // This is on purpose
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [items]
     );
 
+    const onDragStart: OnDragStartResponder = useCallback(() => {
+        const el = document.querySelector('.is-dragging');
+        setActiveItem(el);
+    }, []);
+
     return (
         <div style={{ overflow: 'hidden' }}>
-            <DragDropContext onDragEnd={onDragEnd}>
+            <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
                 <Droppable
                     droppableId='droppable'
                     direction='vertical'
                     renderClone={(provided, snapshot, rubric) => {
-                        let { style } = provided.draggableProps;
-                        const transform = style?.transform;
-
-                        if (snapshot.isDragging && transform) {
-                            let [, , y] = transform.match(/translate\(([-\d]+)px, ([-\d]+)px\)/) || [];
-
-                            style.transform = `translate3d(0px, ${y}px, 0px)`; // Apply constrained y value
-                        }
-
+                        const { style } = provided.draggableProps;
                         return (
                             <Item
                                 provided={provided}
@@ -143,7 +172,6 @@ function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps<
                                             {...draggableProps}
                                             style={{
                                                 ...draggableProps.style,
-                                                // if last item, don't add margin
                                                 marginBottom: `${gap}px`,
                                             }}
                                         >