Merge pull request atlassian#3 from mhelabs/KeyboardBetweenLists6.0.2

Keyboard between lists

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-beautiful-dnd",
-  "version": "6.0.2",
+  "name": "mhe-react-beautiful-dnd",
+  "version": "6.0.2-beta2",
   "description": "Beautiful, accessible drag and drop for lists with React.js",
   "author": "Alex Reardon <[email protected]>",
   "keywords": [
@@ -13,7 +13,7 @@
     "beautiful"
   ],
   "bugs": {
-    "url": "https://github.com/atlassian/react-beautiful-dnd/issues"
+    "url": "https://github.com/mhelabs/react-beautiful-dnd/issues"
   },
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -71,12 +71,12 @@
     "enzyme-adapter-react-15": "^1.0.5",
     "eslint": "^4.15.0",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-flowtype": "^2.41.0",
+    "eslint-plugin-flowtype": "^2.46.3",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jest": "^21.6.1",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.5.1",
-    "flow-bin": "0.69.0",
+    "flow-bin": "0.71.0",
     "jest": "^22.0.5",
     "puppeteer": "^1.2.0",
     "raf-stub": "^2.0.2",
@@ -99,6 +99,6 @@
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/atlassian/react-beautiful-dnd.git"
+    "url": "https://github.com/mhelabs/react-beautiful-dnd.git"
   }
 }

src/state/axis.js

@@ -1,5 +1,5 @@
 // @flow
-import type { HorizontalAxis, VerticalAxis } from '../types';
+import type { Axis, HorizontalAxis, VerticalAxis } from '../types';
 
 export const vertical: VerticalAxis = {
   direction: 'vertical',
@@ -24,3 +24,10 @@ export const horizontal: HorizontalAxis = {
   crossAxisEnd: 'bottom',
   crossAxisSize: 'height',
 };
+
+export function oppositeAxis(axis: Axis) {
+  if (axis.direction === 'horizontal') {
+    return vertical;
+  }
+  return horizontal;
+}

src/state/move-cross-axis/get-best-cross-axis-droppable.js

@@ -22,6 +22,7 @@ type GetBestDroppableArgs = {|
   // all the droppables in the system
   droppables: DroppableDimensionMap,
   viewport: Viewport,
+  customAxis?: Axis,
 |}
 
 const getSafeClipped = (droppable: DroppableDimension): Area => {
@@ -39,14 +40,15 @@ export default ({
   source,
   droppables,
   viewport,
+  customAxis,
 }: GetBestDroppableArgs): ?DroppableDimension => {
   const sourceClipped: ?Area = source.viewport.clipped;
 
   if (!sourceClipped) {
     return null;
   }
 
-  const axis: Axis = source.axis;
+  const axis: Axis = customAxis || source.axis;
   const isBetweenSourceClipped = isWithin(
     sourceClipped[axis.start],
     sourceClipped[axis.end]

src/state/move-cross-axis/index.js

@@ -16,7 +16,9 @@ import type {
   DraggableLocation,
   DragImpact,
   Viewport,
+  Axis,
 } from '../../types';
+import { oppositeAxis as makeOppositeAxis } from '../axis';
 
 type Args = {|
   isMovingForward: boolean,
@@ -35,6 +37,7 @@ type Args = {|
   previousImpact: ?DragImpact,
   // the current viewport
   viewport: Viewport,
+  oppositeAxis?: boolean,
 |}
 
 export default ({
@@ -47,10 +50,12 @@ export default ({
   droppables,
   previousImpact,
   viewport,
+  oppositeAxis,
 }: Args): ?Result => {
   const draggable: DraggableDimension = draggables[draggableId];
   const source: DroppableDimension = droppables[droppableId];
 
+  const axis: Axis = oppositeAxis ? makeOppositeAxis(source.axis) : source.axis;
   // not considering the container scroll changes as container scrolling cancels a keyboard drag
 
   const destination: ?DroppableDimension = getBestCrossAxisDroppable({
@@ -59,6 +64,7 @@ export default ({
     source,
     droppables,
     viewport,
+    customAxis: axis,
   });
 
   // nothing available to move to
@@ -71,7 +77,7 @@ export default ({
   );
 
   const target: ?DraggableDimension = getClosestDraggable({
-    axis: destination.axis,
+    axis,
     pageCenter,
     destination,
     insideDestination,

src/state/reducer.js

@@ -18,9 +18,9 @@ import type {
   InitialDrag,
   PendingDrop,
   Phase,
+  Position,
   DraggableLocation,
   CurrentDragPositions,
-  Position,
   InitialDragPositions,
   LiftRequest,
   Viewport,
@@ -424,6 +424,10 @@ export default (state: State = clean('IDLE'), action: Action): State => {
     const { id, isEnabled } = action.payload;
     const target = state.dimension.droppable[id];
 
+    // This can happen if the enabled state changes on the droppable between
+    // a onDragStart and the initial publishing of the Droppable.
+    // The isEnabled state will be correctly populated when the Droppable dimension
+    // is published. Therefore we do not need to log any error here
     if (!target) {
       console.warn('cannot update enabled state for droppable as it has not yet been collected');
       return state;
@@ -526,41 +530,69 @@ export default (state: State = clean('IDLE'), action: Action): State => {
       return clean();
     }
 
-    const existing: DragState = state.drag;
+    const drag: DragState = state.drag;
     const isMovingForward: boolean = action.type === 'MOVE_FORWARD';
 
-    if (!existing.impact.destination) {
+    if (!drag.impact.destination) {
       console.error('cannot move if there is no previous destination');
       return clean();
     }
 
+    const droppableId: DroppableId = drag.impact.destination.droppableId;
     const droppable: DroppableDimension = state.dimension.droppable[
-      existing.impact.destination.droppableId
+      droppableId
     ];
 
-    const result: ?MoveToNextResult = moveToNextIndex({
+    const current: CurrentDrag = drag.current;
+    const descriptor: DraggableDescriptor = drag.initial.descriptor;
+    const draggableId: DraggableId = descriptor.id;
+    const previousPageCenter: Position = current.page.center;
+    const home: DraggableLocation = {
+      index: descriptor.index,
+      droppableId: descriptor.droppableId,
+    };
+
+    const params = {
       isMovingForward,
-      draggableId: existing.initial.descriptor.id,
-      droppable,
+      draggableId,
       draggables: state.dimension.draggable,
-      previousPageCenter: existing.current.page.center,
-      previousImpact: existing.impact,
-      viewport: existing.current.viewport,
-    });
+      previousImpact: drag.impact,
+      viewport: current.viewport,
+    };
+
+    // First tries to move through the list.
+    // If failed (because at the beginning or end of a list)
+    // Make attempt to move across opposite axis (vertical if lists are placed horizontally)
+    const result: ?MoveToNextResult = moveToNextIndex({
+      droppable,
+      previousPageCenter,
+      ...params,
+    }) || {
+      scrollJumpRequest: null,
+      ...moveCrossAxis({
+        pageCenter: previousPageCenter,
+        droppableId,
+        home,
+        droppables: state.dimension.droppable,
+        oppositeAxis: true,
+        ...params,
+      }),
+    };
 
     // cannot move anyway (at the beginning or end of a list)
     if (!result) {
       return state;
     }
 
     const impact: DragImpact = result.impact;
-    const page: Position = result.pageCenter;
-    const client: Position = subtract(page, existing.current.viewport.scroll);
+    const clientBorderBoxCenter: Position = subtract(
+      result.pageCenter, drag.current.viewport.scroll
+    );
 
     return move({
       state,
       impact,
-      clientSelection: client,
+      clientSelection: clientBorderBoxCenter,
       shouldAnimate: true,
       scrollJumpRequest: result.scrollJumpRequest,
     });

website/src/components/examples/multi-drag/task-app.jsx

@@ -12,6 +12,7 @@ import type { Entities } from './types';
 
 const Container = styled.div`
   display: flex;
+  flex-direction:column;
   user-select: none;
 `;