Disabled droppables and keyboard. Fixes #430 (#509)

package.json

@@ -48,7 +48,7 @@
     "css-box-model": "^0.0.13",
     "memoize-one": "^3.1.1",
     "prop-types": "^15.6.0",
-    "raf-schd": "^2.1.1",
+    "raf-schd": "^2.1.2",
     "react-motion": "^0.5.2",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",

src/state/reducer.js

@@ -532,9 +532,9 @@ export default (state: State = clean('IDLE'), action: Action): State => {
     const existing: DragState = state.drag;
     const isMovingForward: boolean = action.type === 'MOVE_FORWARD';
 
+    // This is possible to do when lifting in a disabled list
     if (!existing.impact.destination) {
-      console.error('cannot move if there is no previous destination');
-      return clean();
+      return state;
     }
 
     const droppable: DroppableDimension = state.dimension.droppable[
@@ -577,21 +577,26 @@ export default (state: State = clean('IDLE'), action: Action): State => {
       return clean();
     }
 
-    if (!state.drag) {
+    const drag: ?DragState = state.drag;
+    if (!drag) {
       console.error('cannot move cross axis if there is no drag information');
       return clean();
     }
 
-    if (!state.drag.impact.destination) {
-      console.error('cannot move cross axis if not in a droppable');
-      return clean();
-    }
+    // It is possible to lift a draggable in a disabled droppable
+    // In which case - use the home droppable id
+    const droppableId: DroppableId = (() => {
+      if (drag.impact.destination) {
+        return drag.impact.destination.droppableId;
+      }
+
+      return drag.initial.descriptor.droppableId;
+    })();
 
-    const current: CurrentDrag = state.drag.current;
-    const descriptor: DraggableDescriptor = state.drag.initial.descriptor;
+    const current: CurrentDrag = drag.current;
+    const descriptor: DraggableDescriptor = drag.initial.descriptor;
     const draggableId: DraggableId = descriptor.id;
     const pageBorderBoxCenter: Position = current.page.borderBoxCenter;
-    const droppableId: DroppableId = state.drag.impact.destination.droppableId;
     const home: DraggableLocation = {
       index: descriptor.index,
       droppableId: descriptor.droppableId,
@@ -605,7 +610,7 @@ export default (state: State = clean('IDLE'), action: Action): State => {
       home,
       draggables: state.dimension.draggable,
       droppables: state.dimension.droppable,
-      previousImpact: state.drag.impact,
+      previousImpact: drag.impact,
       viewport: current.viewport,
     });
 

src/view/draggable/connected-draggable.js

@@ -26,9 +26,11 @@ import type {
   DroppableId,
   DragMovement,
   DraggableDimension,
+  DroppableDimension,
   Direction,
   Displacement,
   PendingDrop,
+  DragState,
 } from '../../types';
 import type {
   MapProps,
@@ -100,23 +102,31 @@ export const makeSelector = (): Selector => {
     }
 
     if (state.phase === 'DRAGGING') {
-      if (!state.drag) {
+      const drag: ?DragState = state.drag;
+      if (!drag) {
         console.error('invalid drag state found in selector');
         return null;
       }
 
       // not the dragging item
-      if (state.drag.initial.descriptor.id !== ownProps.draggableId) {
+      if (drag.initial.descriptor.id !== ownProps.draggableId) {
         return null;
       }
 
-      const offset: Position = state.drag.current.client.offset;
+      const offset: Position = drag.current.client.offset;
       const dimension: DraggableDimension = state.dimension.draggable[ownProps.draggableId];
-      const direction: ?Direction = state.drag.impact.direction;
-      const shouldAnimateDragMovement: boolean = state.drag.current.shouldAnimate;
-      const draggingOver: ?DroppableId = state.drag.impact.destination ?
-        state.drag.impact.destination.droppableId :
-        null;
+      const direction: Direction = (() => {
+        if (drag.impact.direction) {
+          return drag.impact.direction;
+        }
+
+        const home: DroppableDimension =
+          state.dimension.droppable[drag.initial.descriptor.droppableId];
+        return home.axis.direction;
+      })();
+      const shouldAnimateDragMovement: boolean = drag.current.shouldAnimate;
+      const draggingOver: ?DroppableId = drag.impact.destination ?
+        drag.impact.destination.droppableId : null;
 
       return getDraggingProps(
         memoizedOffset(offset.x, offset.y),

stories/src/primatives/author-list.jsx

@@ -33,6 +33,9 @@ const DropZone = styled.div`
 
   /* stop the list collapsing when empty */
   min-width: 600px;
+
+  /* stop the list collapsing when it has no items */
+  min-height: 60px;
 `;
 
 const ScrollContainer = styled.div`

test/unit/view/connected-draggable.spec.js

@@ -106,7 +106,8 @@ describe('Connected Draggable', () => {
           shouldAnimateDragMovement: false,
           shouldAnimateDisplacement: false,
           dimension: preset.inHome1,
-          direction: null,
+          // uses the home direction by default
+          direction: preset.home.axis.direction,
           draggingOver: null,
         });
       });

yarn.lock

@@ -7111,9 +7111,9 @@ radium@^0.19.0:
     inline-style-prefixer "^2.0.5"
     prop-types "^15.5.8"
 
-raf-schd@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-2.1.1.tgz#0b59964cee2e96b7dd46ffaeb5c08740f3a5e7ab"
+raf-schd@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-2.1.2.tgz#ec622b5167f2912089f054dc03ebd5bcf33c8f62"
 
 raf-stub@^2.0.2:
   version "2.0.2"