Improved drag flow

src/state/action-creators.js

@@ -233,6 +233,16 @@ export const clean = (): CleanAction => ({
   payload: null,
 });
 
+type PrepareAction = {
+  type: 'PREPARE',
+  payload: null,
+}
+
+export const prepare = (): PrepareAction => ({
+  type: 'PREPARE',
+  payload: null,
+});
+
 export type DropAnimateAction = {
   type: 'DROP_ANIMATE',
   payload: {|
@@ -279,26 +289,21 @@ export const drop = () =>
   (dispatch: Dispatch, getState: () => State): void => {
     const state: State = getState();
 
-    // This can occur if the user ends a drag before
-    // the collecting phase is finished.
-    // This will not trigger a hook as the hook waits
-    // for a DRAGGING phase before firing a onDragStart
+    // dropped before a drag officially started - this is fine
     if (state.phase === 'COLLECTING_DIMENSIONS') {
-      console.error('canceling drag while collecting');
       dispatch(clean());
       return;
     }
 
+    // dropped in another phase except for dragging - this is an error
     if (state.phase !== 'DRAGGING') {
-      console.error('cannot drop if not dragging', state);
-      // We need to wrap this in a setTimeout to avoid a race
-      // condition with `lift`, which includes timeouts
-      setTimeout(() => dispatch(clean()));
+      console.error(`not able to drop in phase: '${state.phase}'`);
+      dispatch(clean());
       return;
     }
 
     if (!state.drag) {
-      console.error('invalid drag state', state);
+      console.error('not able to drop when there is invalid drag state', state);
       dispatch(clean());
       return;
     }
@@ -434,26 +439,28 @@ export const lift = (id: DraggableId,
   windowScroll: Position,
   isScrollAllowed: boolean,
 ) => (dispatch: Dispatch, getState: Function) => {
-  (() => {
-    const state: State = getState();
-    // quickly finish any current animations
-    if (state.phase === 'DROP_ANIMATING') {
-      if (!state.drop || !state.drop.pending) {
-        console.error('cannot flush drop animation if there is no pending');
-        dispatch(clean());
-        return;
-      }
-      dispatch(completeDrop(state.drop.pending.result));
+  // Quickly finish any current drop animations
+  const initial: State = getState();
+
+  if (initial.phase === 'DROP_ANIMATING') {
+    if (!initial.drop || !initial.drop.pending) {
+      console.error('cannot flush drop animation if there is no pending');
+      dispatch(clean());
+    } else {
+      dispatch(completeDrop(initial.drop.pending.result));
     }
-  })();
+  }
 
   // https://github.com/chenglou/react-motion/issues/437
   // need to allow a flush of react-motion
+  dispatch(prepare());
+
   setTimeout(() => {
     const state: State = getState();
 
-    if (state.phase !== 'IDLE' && state.phase !== 'DRAG_COMPLETE') {
-      dispatch(clean());
+    // drag cancelled before timeout finished
+    if (state.phase !== 'PREPARING') {
+      return;
     }
 
     dispatch(beginLift());
@@ -470,6 +477,7 @@ export const lift = (id: DraggableId,
       if (newState.phase !== 'COLLECTING_DIMENSIONS') {
         return;
       }
+
       dispatch(completeLift(id, type, client, windowScroll, isScrollAllowed));
     });
   });
@@ -487,4 +495,5 @@ export type Action = BeginLiftAction |
   CrossAxisMoveBackwardAction |
   DropAnimateAction |
   DropCompleteAction |
+  PrepareAction |
   CleanAction;

src/state/reducer.js

@@ -37,10 +37,10 @@ const noDimensions: DimensionState = {
 
 const origin: Position = { x: 0, y: 0 };
 
-const clean = memoizeOne((phase: ?Phase): State => {
+const clean = memoizeOne((phase?: Phase = 'IDLE'): State => {
   const state: State = {
     // flow was not good with having a default arg on an optional type
-    phase: phase || 'IDLE',
+    phase,
     drag: null,
     drop: null,
     dimension: noDimensions,
@@ -135,9 +135,17 @@ const move = ({
 };
 
 export default (state: State = clean('IDLE'), action: Action): State => {
+  if (action.type === 'CLEAN') {
+    return clean();
+  }
+
+  if (action.type === 'PREPARE') {
+    return clean('PREPARING');
+  }
+
   if (action.type === 'BEGIN_LIFT') {
-    if (state.phase !== 'IDLE') {
-      console.error('trying to start a lift while another is occurring');
+    if (state.phase !== 'PREPARING') {
+      console.error('trying to start a lift while not preparing for a lift');
       return state;
     }
     return clean('COLLECTING_DIMENSIONS');
@@ -538,9 +546,5 @@ export default (state: State = clean('IDLE'), action: Action): State => {
     };
   }
 
-  if (action.type === 'CLEAN') {
-    return clean();
-  }
-
   return state;
 };

src/types.js

@@ -208,7 +208,30 @@ export type PendingDrop = {|
   result: DropResult,
 |}
 
-export type Phase = 'IDLE' | 'COLLECTING_DIMENSIONS' | 'DRAGGING' | 'DROP_ANIMATING' | 'DROP_COMPLETE';
+export type Phase =
+  // The application rest state
+  'IDLE' |
+
+  // When a drag starts we need to flush any existing animations
+  // that might be occurring. While this flush is occurring we
+  // are in this phase
+  'PREPARING' |
+
+  // After the animations have been flushed we need to collect the
+  // dimensions of all of the Draggable and Droppable components.
+  // At this point a drag has not started yet and the onDragStart
+  // hook has not fired.
+  'COLLECTING_DIMENSIONS' |
+
+  // A drag is active. The onDragStart hook has been fired
+  'DRAGGING' |
+
+  // An optional phase for animating the drop / cancel if it is needed
+  'DROP_ANIMATING' |
+
+  // The final state of a drop / cancel.
+  // This will result in the onDragEnd hook being fired
+  'DROP_COMPLETE';
 
 export type DimensionState = {|
   request: ?TypeId,