original

src/state/action-creators.js

@@ -141,43 +141,43 @@ export const moveByWindowScroll = (args: MoveByWindowScrollArgs): MoveByWindowSc
   payload: args,
 });
 
-export type MoveBackwardAction = {|
-  type: 'MOVE_BACKWARD',
+export type MoveUpAction = {|
+  type: 'MOVE_UP',
   payload: null
 |}
 
-export const moveBackward = (): MoveBackwardAction => ({
-  type: 'MOVE_BACKWARD',
+export const moveUp = (): MoveUpAction => ({
+  type: 'MOVE_UP',
   payload: null,
 });
 
-export type MoveForwardAction = {|
-  type: 'MOVE_FORWARD',
+export type MoveDownAction = {|
+  type: 'MOVE_DOWN',
   payload: null
 |}
 
-export const moveForward = (): MoveForwardAction => ({
-  type: 'MOVE_FORWARD',
+export const moveDown = (): MoveDownAction => ({
+  type: 'MOVE_DOWN',
   payload: null,
 });
 
-export type CrossAxisMoveForwardAction = {|
-  type: 'CROSS_AXIS_MOVE_FORWARD',
+export type MoveRightAction = {|
+  type: 'MOVE_RIGHT',
   payload: null
 |}
 
-export const crossAxisMoveForward = (): CrossAxisMoveForwardAction => ({
-  type: 'CROSS_AXIS_MOVE_FORWARD',
+export const moveRight = (): MoveRightAction => ({
+  type: 'MOVE_RIGHT',
   payload: null,
 });
 
-export type CrossAxisMoveBackwardAction = {|
-  type: 'CROSS_AXIS_MOVE_BACKWARD',
+export type MoveLeftAction = {|
+  type: 'MOVE_LEFT',
   payload: null
 |}
 
-export const crossAxisMoveBackward = (): CrossAxisMoveBackwardAction => ({
-  type: 'CROSS_AXIS_MOVE_BACKWARD',
+export const moveLeft = (): MoveLeftAction => ({
+  type: 'MOVE_LEFT',
   payload: null,
 });
 
@@ -264,10 +264,10 @@ export type Action =
   UpdateDroppableIsEnabledAction |
   MoveByWindowScrollAction |
   MoveAction |
-  MoveBackwardAction |
-  MoveForwardAction |
-  CrossAxisMoveForwardAction |
-  CrossAxisMoveBackwardAction |
+  MoveUpAction |
+  MoveDownAction |
+  MoveRightAction |
+  MoveLeftAction |
   DropPendingAction |
   DropAction |
   DropAnimateAction |

src/state/reducer.js

@@ -459,7 +459,12 @@ export default (state: State = idle, action: Action): State => {
     }
 
     invariant(state.phase === 'DRAGGING', `${action.type} received while not in DRAGGING phase`);
-    invariant(state.impact.destination, `Cannot ${action.type} if there is no previous destination`);
+
+    // It is possible to lift a draggable in a disabled droppable
+    // In which case it will not have a destination
+    if (!state.impact.destination) {
+      return state;
+    }
 
     const isMovingForward: boolean = action.type === 'MOVE_FORWARD';
 
@@ -504,7 +509,12 @@ export default (state: State = idle, action: Action): State => {
     }
 
     invariant(state.phase === 'DRAGGING', `${action.type} received while not in DRAGGING phase`);
-    invariant(state.impact.destination, `Cannot ${action.type} if there is no previous destination`);
+
+    // It is possible to lift a draggable in a disabled droppable
+    // In which case it will not have a destination
+    if (!state.impact.destination) {
+      return state;
+    }
 
     const home: DraggableLocation = {
       index: state.critical.draggable.index,

src/view/drag-handle/drag-handle-types.js

@@ -3,19 +3,17 @@ import { type Position } from 'css-box-model';
 import { type Node } from 'react';
 import type {
   AutoScrollMode,
-  Direction,
   DraggableId,
-  DropReason,
 } from '../../types';
 
 export type Callbacks = {|
   onLift: ({ clientSelection: Position, autoScrollMode: AutoScrollMode }) => void,
   onMove: (point: Position) => void,
   onWindowScroll: () => void,
-  onMoveForward: () => void,
-  onMoveBackward: () => void,
-  onCrossAxisMoveForward: () => void,
-  onCrossAxisMoveBackward: () => void,
+  onMoveUp: () => void,
+  onMoveDown: () => void,
+  onMoveRight: () => void,
+  onMoveLeft: () => void,
   onDrop: () => void,
   onCancel: () => void,
 |}
@@ -55,8 +53,6 @@ export type Props = {|
   isDragging: boolean,
   // whether the application thinks a drop is occurring
   isDropAnimating: boolean,
-  // the direction of the current droppable
-  direction: ?Direction,
   // get the ref of the draggable
   getDraggableRef: () => ?HTMLElement,
   // whether interactive elements should be permitted to start a drag

src/view/drag-handle/drag-handle.jsx

@@ -209,7 +209,7 @@ export default class DragHandle extends Component<Props> {
       return;
     }
 
-    this.keyboardSensor.onKeyDown(event, this.props);
+    this.keyboardSensor.onKeyDown(event);
   }
 
   onMouseDown = (event: MouseEvent) => {

src/view/drag-handle/sensor/create-keyboard-sensor.js

@@ -9,17 +9,11 @@ import { bindEvents, unbindEvents } from '../util/bind-events';
 import supportedPageVisibilityEventName from '../util/supported-page-visibility-event-name';
 import type { EventBinding } from '../util/event-types';
 import type { KeyboardSensor, CreateSensorArgs } from './sensor-types';
-import type { Props } from '../drag-handle-types';
 
 type State = {|
   isDragging: boolean,
 |}
 
-type ExecuteBasedOnDirection = {|
-  vertical: Function,
-  horizontal: Function,
-|}
-
 type KeyMap = {
   [key: number]: true
 }
@@ -65,9 +59,7 @@ export default ({
   const isDragging = (): boolean => state.isDragging;
   const schedule = createScheduler(callbacks);
 
-  const onKeyDown = (event: KeyboardEvent, props: Props) => {
-    const { direction } = props;
-
+  const onKeyDown = (event: KeyboardEvent) => {
     // not yet dragging
     if (!isDragging()) {
       // We may already be lifting on a child draggable.
@@ -122,57 +114,28 @@ export default ({
 
     // Movement
 
-    // already dragging
-    if (!direction) {
-      console.error('Cannot handle keyboard movement event if direction is not provided');
-      // calling prevent default here as the action resulted in the drop
-      // this one is border line
-      event.preventDefault();
-      cancel();
-      return;
-    }
-
-    const executeBasedOnDirection = (fns: ExecuteBasedOnDirection) => {
-      if (direction === 'vertical') {
-        fns.vertical();
-        return;
-      }
-      fns.horizontal();
-    };
-
     if (event.keyCode === keyCodes.arrowDown) {
       event.preventDefault();
-      executeBasedOnDirection({
-        vertical: schedule.moveForward,
-        horizontal: schedule.crossAxisMoveForward,
-      });
+      schedule.moveDown();
       return;
     }
 
     if (event.keyCode === keyCodes.arrowUp) {
       event.preventDefault();
-      executeBasedOnDirection({
-        vertical: schedule.moveBackward,
-        horizontal: schedule.crossAxisMoveBackward,
-      });
+      schedule.moveUp();
       return;
     }
 
     if (event.keyCode === keyCodes.arrowRight) {
       event.preventDefault();
-      executeBasedOnDirection({
-        vertical: schedule.crossAxisMoveForward,
-        horizontal: schedule.moveForward,
-      });
+      schedule.moveRight();
       return;
     }
 
     if (event.keyCode === keyCodes.arrowLeft) {
       event.preventDefault();
-      executeBasedOnDirection({
-        vertical: schedule.crossAxisMoveBackward,
-        horizontal: schedule.moveBackward,
-      });
+      schedule.moveLeft();
+      return;
     }
 
     // preventing scroll jumping at this time

src/view/drag-handle/sensor/sensor-types.js

@@ -27,7 +27,7 @@ export type MouseSensor = {|
 
 export type KeyboardSensor = {|
   ...SensorBase,
-  onKeyDown: (event: KeyboardEvent, props: Props) => void,
+  onKeyDown: (event: KeyboardEvent) => void,
 |}
 
 export type TouchSensor = {|

src/view/drag-handle/util/create-scheduler.js

@@ -11,29 +11,29 @@ export default (callbacks: Callbacks) => {
   });
 
   const move = rafSchd((point: Position) => memoizedMove(point.x, point.y));
-  const moveForward = rafSchd(callbacks.onMoveForward);
-  const moveBackward = rafSchd(callbacks.onMoveBackward);
-  const crossAxisMoveForward = rafSchd(callbacks.onCrossAxisMoveForward);
-  const crossAxisMoveBackward = rafSchd(callbacks.onCrossAxisMoveBackward);
+  const moveUp = rafSchd(callbacks.onMoveUp);
+  const moveDown = rafSchd(callbacks.onMoveDown);
+  const moveRight = rafSchd(callbacks.onMoveRight);
+  const moveLeft = rafSchd(callbacks.onMoveLeft);
   const windowScrollMove = rafSchd(callbacks.onWindowScroll);
 
   const cancel = () => {
     // cancel all of the next animation frames
 
     move.cancel();
-    moveForward.cancel();
-    moveBackward.cancel();
-    crossAxisMoveForward.cancel();
-    crossAxisMoveBackward.cancel();
+    moveUp.cancel();
+    moveDown.cancel();
+    moveRight.cancel();
+    moveLeft.cancel();
     windowScrollMove.cancel();
   };
 
   return {
     move,
-    moveForward,
-    moveBackward,
-    crossAxisMoveForward,
-    crossAxisMoveBackward,
+    moveUp,
+    moveDown,
+    moveRight,
+    moveLeft,
     windowScrollMove,
     cancel,
   };

src/view/draggable/connected-draggable.js

@@ -24,7 +24,6 @@ import type {
   DroppableId,
   DragMovement,
   DraggableDimension,
-  Direction,
   Displacement,
   PendingDrop,
 } from '../../types';
@@ -48,7 +47,6 @@ const defaultMapProps: MapProps = {
   shouldAnimateDisplacement: true,
   // these properties are only populated when the item is dragging
   dimension: null,
-  direction: null,
   draggingOver: null,
 };
 
@@ -70,7 +68,6 @@ export const makeMapStateToProps = (): Selector => {
       // not relevant
       shouldAnimateDragMovement: false,
       dimension: null,
-      direction: null,
       draggingOver: null,
     }),
   );
@@ -79,8 +76,6 @@ export const makeMapStateToProps = (): Selector => {
     offset: Position,
     shouldAnimateDragMovement: boolean,
     dimension: DraggableDimension,
-    // direction of the droppable you are over
-    direction: ?Direction,
     // the id of the droppable you are over
     draggingOver: ?DroppableId,
   ): MapProps => ({
@@ -90,7 +85,6 @@ export const makeMapStateToProps = (): Selector => {
     offset,
     shouldAnimateDragMovement,
     dimension,
-    direction,
     draggingOver,
   }));
 
@@ -132,7 +126,6 @@ export const makeMapStateToProps = (): Selector => {
 
       const offset: Position = state.current.client.offset;
       const dimension: DraggableDimension = state.dimensions.draggables[ownProps.draggableId];
-      const direction: ?Direction = state.impact.direction;
       const shouldAnimateDragMovement: boolean = state.shouldAnimate;
       const draggingOver: ?DroppableId = state.impact.destination ?
         state.impact.destination.droppableId :
@@ -142,7 +135,6 @@ export const makeMapStateToProps = (): Selector => {
         memoizedOffset(offset.x, offset.y),
         shouldAnimateDragMovement,
         dimension,
-        direction,
         draggingOver,
       );
     }
@@ -156,8 +148,6 @@ export const makeMapStateToProps = (): Selector => {
 
       const draggingOver: ?DroppableId = pending.result.destination ?
         pending.result.destination.droppableId : null;
-      const direction: ?Direction = pending.impact.direction ?
-        pending.impact.direction : null;
 
       // not memoized as it is the only execution
       return {
@@ -167,7 +157,6 @@ export const makeMapStateToProps = (): Selector => {
         // still need to provide the dimension for the placeholder
         dimension: state.dimensions.draggables[ownProps.draggableId],
         draggingOver,
-        direction,
         // animation will be controlled by the isDropAnimating flag
         shouldAnimateDragMovement: false,
         // not relevant,