@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/middleware/util/validate-dimensions.js

@@ -0,0 +1,71 @@
+// @flow
+import type {
+  Critical,
+  DimensionMap,
+  DraggableDimension,
+} from '../../../types';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import { warning } from '../../../dev-warning';
+
+type ErrorMap = {
+  [index: number]: true,
+};
+
+function checkIndexes(insideDestination: DraggableDimension[]) {
+  // no point running if there are 1 or less items
+  if (insideDestination.length <= 1) {
+    return;
+  }
+
+  const indexes: number[] = insideDestination.map(
+    (d: DraggableDimension): number => d.descriptor.index,
+  );
+
+  const errors: ErrorMap = {};
+
+  for (let i = 1; i < indexes.length; i++) {
+    const current: number = indexes[i];
+    const previous: number = indexes[i - 1];
+
+    // this will be an error if:
+    // 1. index is not consecutive
+    // 2. index is duplicated (which is true if #1 is not passed)
+    if (current !== previous + 1) {
+      errors[current] = true;
+    }
+  }
+
+  if (!Object.keys(errors).length) {
+    return;
+  }
+
+  const formatted: string = indexes
+    .map((index: number): string => {
+      const hasError: boolean = Boolean(errors[index]);
+
+      return hasError ? `[🔥${index}]` : `${index}`;
+    })
+    .join(', ');
+
+  warning(`
+    Detected non-consecutive <Draggable /> indexes.
+
+    (This can cause unexpected bugs)
+
+    ${formatted}
+  `);
+}
+
+export default function validateDimensions(
+  critical: Critical,
+  dimensions: DimensionMap,
+): void {
+  // wrapping entire block for better minification
+  if (process.env.NODE_ENV !== 'production') {
+    const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+      critical.droppable.id,
+      dimensions.draggables,
+    );
+    checkIndexes(insideDestination);
+  }
+}

package/src/state/move-in-direction/index.js

@@ -0,0 +1,84 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type { PublicResult } from './move-in-direction-types';
+import type {
+  DroppableId,
+  DraggingState,
+  Direction,
+  DroppableDimension,
+  DraggableDimension,
+  DroppableDimensionMap,
+  DragImpact,
+} from '../../types';
+import moveToNextPlace from './move-to-next-place';
+import moveCrossAxis from './move-cross-axis';
+import whatIsDraggedOver from '../droppable/what-is-dragged-over';
+
+type Args = {|
+  state: DraggingState,
+  type: 'MOVE_UP' | 'MOVE_RIGHT' | 'MOVE_DOWN' | 'MOVE_LEFT',
+|};
+
+const getDroppableOver = (
+  impact: DragImpact,
+  droppables: DroppableDimensionMap,
+): ?DroppableDimension => {
+  const id: ?DroppableId = whatIsDraggedOver(impact);
+  return id ? droppables[id] : null;
+};
+
+export default ({ state, type }: Args): ?PublicResult => {
+  const isActuallyOver: ?DroppableDimension = getDroppableOver(
+    state.impact,
+    state.dimensions.droppables,
+  );
+  const isMainAxisMovementAllowed: boolean = Boolean(isActuallyOver);
+  const home: DroppableDimension =
+    state.dimensions.droppables[state.critical.droppable.id];
+  // use home when not actually over a droppable (can happen when move is disabled)
+  const isOver: DroppableDimension = isActuallyOver || home;
+
+  const direction: Direction = isOver.axis.direction;
+  const isMovingOnMainAxis: boolean =
+    (direction === 'vertical' &&
+      (type === 'MOVE_UP' || type === 'MOVE_DOWN')) ||
+    (direction === 'horizontal' &&
+      (type === 'MOVE_LEFT' || type === 'MOVE_RIGHT'));
+
+  // This movement is not permitted right now
+  if (isMovingOnMainAxis && !isMainAxisMovementAllowed) {
+    return null;
+  }
+
+  const isMovingForward: boolean =
+    type === 'MOVE_DOWN' || type === 'MOVE_RIGHT';
+
+  const draggable: DraggableDimension =
+    state.dimensions.draggables[state.critical.draggable.id];
+  const previousPageBorderBoxCenter: Position =
+    state.current.page.borderBoxCenter;
+  const { draggables, droppables } = state.dimensions;
+
+  return isMovingOnMainAxis
+    ? moveToNextPlace({
+        isMovingForward,
+        previousPageBorderBoxCenter,
+        draggable,
+        destination: isOver,
+        draggables,
+        viewport: state.viewport,
+        previousClientSelection: state.current.client.selection,
+        previousImpact: state.impact,
+        afterCritical: state.afterCritical,
+      })
+    : moveCrossAxis({
+        isMovingForward,
+        previousPageBorderBoxCenter,
+        draggable,
+        isOver,
+        draggables,
+        droppables,
+        viewport: state.viewport,
+        afterCritical: state.afterCritical,
+      });
+};

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

@@ -0,0 +1,168 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import { invariant } from '../../../invariant';
+import { closest } from '../../position';
+import isWithin from '../../is-within';
+import { getCorners } from '../../spacing';
+import isPartiallyVisibleThroughFrame from '../../visibility/is-partially-visible-through-frame';
+import { toDroppableList } from '../../dimension-structures';
+import type {
+  Axis,
+  DroppableDimension,
+  DroppableDimensionMap,
+  Viewport,
+} from '../../../types';
+
+type GetBestDroppableArgs = {|
+  isMovingForward: boolean,
+  // the current position of the dragging item
+  pageBorderBoxCenter: Position,
+  // the home of the draggable
+  source: DroppableDimension,
+  // all the droppables in the system
+  droppables: DroppableDimensionMap,
+  viewport: Viewport,
+|};
+
+const getKnownActive = (droppable: DroppableDimension): Rect => {
+  const rect: ?Rect = droppable.subject.active;
+
+  invariant(rect, 'Cannot get clipped area from droppable');
+
+  return rect;
+};
+
+export default ({
+  isMovingForward,
+  pageBorderBoxCenter,
+  source,
+  droppables,
+  viewport,
+}: GetBestDroppableArgs): ?DroppableDimension => {
+  const active: ?Rect = source.subject.active;
+
+  if (!active) {
+    return null;
+  }
+
+  const axis: Axis = source.axis;
+  const isBetweenSourceClipped = isWithin(active[axis.start], active[axis.end]);
+  const candidates: DroppableDimension[] = toDroppableList(droppables)
+    // Remove the source droppable from the list
+    .filter((droppable: DroppableDimension): boolean => droppable !== source)
+    // Remove any options that are not enabled
+    .filter((droppable: DroppableDimension): boolean => droppable.isEnabled)
+    // Remove any droppables that do not have a visible subject
+    .filter((droppable: DroppableDimension): boolean =>
+      Boolean(droppable.subject.active),
+    )
+    // Remove any that are not visible in the window
+    .filter((droppable: DroppableDimension): boolean =>
+      isPartiallyVisibleThroughFrame(viewport.frame)(getKnownActive(droppable)),
+    )
+    .filter((droppable: DroppableDimension): boolean => {
+      const activeOfTarget: Rect = getKnownActive(droppable);
+
+      // is the target in front of the source on the cross axis?
+      if (isMovingForward) {
+        return active[axis.crossAxisEnd] < activeOfTarget[axis.crossAxisEnd];
+      }
+      // is the target behind the source on the cross axis?
+      return activeOfTarget[axis.crossAxisStart] < active[axis.crossAxisStart];
+    })
+    // Must have some overlap on the main axis
+    .filter((droppable: DroppableDimension): boolean => {
+      const activeOfTarget: Rect = getKnownActive(droppable);
+
+      const isBetweenDestinationClipped = isWithin(
+        activeOfTarget[axis.start],
+        activeOfTarget[axis.end],
+      );
+
+      return (
+        isBetweenSourceClipped(activeOfTarget[axis.start]) ||
+        isBetweenSourceClipped(activeOfTarget[axis.end]) ||
+        isBetweenDestinationClipped(active[axis.start]) ||
+        isBetweenDestinationClipped(active[axis.end])
+      );
+    })
+    // Sort on the cross axis
+    .sort((a: DroppableDimension, b: DroppableDimension) => {
+      const first: number = getKnownActive(a)[axis.crossAxisStart];
+      const second: number = getKnownActive(b)[axis.crossAxisStart];
+
+      if (isMovingForward) {
+        return first - second;
+      }
+      return second - first;
+    })
+    // Find the droppables that have the same cross axis value as the first item
+    .filter(
+      (
+        droppable: DroppableDimension,
+        index: number,
+        array: DroppableDimension[],
+      ): boolean =>
+        getKnownActive(droppable)[axis.crossAxisStart] ===
+        getKnownActive(array[0])[axis.crossAxisStart],
+    );
+
+  // no possible candidates
+  if (!candidates.length) {
+    return null;
+  }
+
+  // only one result - all done!
+  if (candidates.length === 1) {
+    return candidates[0];
+  }
+
+  // At this point we have a number of candidates that
+  // all have the same axis.crossAxisStart value.
+
+  // Check to see if the center position is within the size of a Droppable on the main axis
+  const contains: DroppableDimension[] = candidates.filter(
+    (droppable: DroppableDimension) => {
+      const isWithinDroppable = isWithin(
+        getKnownActive(droppable)[axis.start],
+        getKnownActive(droppable)[axis.end],
+      );
+      return isWithinDroppable(pageBorderBoxCenter[axis.line]);
+    },
+  );
+
+  if (contains.length === 1) {
+    return contains[0];
+  }
+
+  // The center point of the draggable falls on the boundary between two droppables
+  if (contains.length > 1) {
+    // sort on the main axis and choose the first
+    return contains.sort(
+      (a: DroppableDimension, b: DroppableDimension): number =>
+        getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start],
+    )[0];
+  }
+
+  // The center is not contained within any droppable
+  // 1. Find the candidate that has the closest corner
+  // 2. If there is a tie - choose the one that is first on the main axis
+  return candidates.sort(
+    (a: DroppableDimension, b: DroppableDimension): number => {
+      const first = closest(pageBorderBoxCenter, getCorners(getKnownActive(a)));
+      const second = closest(
+        pageBorderBoxCenter,
+        getCorners(getKnownActive(b)),
+      );
+
+      // if the distances are not equal - choose the shortest
+      if (first !== second) {
+        return first - second;
+      }
+
+      // They both have the same distance -
+      // choose the one that is first on the main axis
+      return getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start];
+    },
+  )[0];
+};

package/src/state/move-in-direction/move-cross-axis/get-closest-draggable.js

@@ -0,0 +1,79 @@
+// @flow
+import { type Position } from 'css-box-model';
+import type {
+  Viewport,
+  DraggableDimension,
+  DroppableDimension,
+  LiftEffect,
+} from '../../../types';
+import { distance } from '../../position';
+import { isTotallyVisible } from '../../visibility/is-visible';
+import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement';
+import {
+  getCurrentPageBorderBox,
+  getCurrentPageBorderBoxCenter,
+} from './without-starting-displacement';
+
+type Args = {|
+  pageBorderBoxCenter: Position,
+  viewport: Viewport,
+  // the droppable that is being moved to
+  destination: DroppableDimension,
+  // the droppables inside the destination
+  insideDestination: DraggableDimension[],
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  pageBorderBoxCenter,
+  viewport,
+  destination,
+  insideDestination,
+  afterCritical,
+}: Args): ?DraggableDimension => {
+  const sorted: DraggableDimension[] = insideDestination
+    .filter((draggable: DraggableDimension): boolean =>
+      // Allowing movement to draggables that are not visible in the viewport
+      // but must be visible in the droppable
+      // We can improve this, but this limitation is easier for now
+      isTotallyVisible({
+        target: getCurrentPageBorderBox(draggable, afterCritical),
+        destination,
+        viewport: viewport.frame,
+        withDroppableDisplacement: true,
+      }),
+    )
+    .sort((a: DraggableDimension, b: DraggableDimension): number => {
+      // Need to consider the change in scroll in the destination
+      const distanceToA = distance(
+        pageBorderBoxCenter,
+        withDroppableDisplacement(
+          destination,
+          getCurrentPageBorderBoxCenter(a, afterCritical),
+        ),
+      );
+      const distanceToB = distance(
+        pageBorderBoxCenter,
+        withDroppableDisplacement(
+          destination,
+          getCurrentPageBorderBoxCenter(b, afterCritical),
+        ),
+      );
+
+      // if a is closer - return a
+      if (distanceToA < distanceToB) {
+        return -1;
+      }
+
+      // if b is closer - return b
+      if (distanceToB < distanceToA) {
+        return 1;
+      }
+
+      // if the distance to a and b are the same:
+      // return the one with the lower index (it will be higher on the main axis)
+      return a.descriptor.index - b.descriptor.index;
+    });
+
+  return sorted[0] || null;
+};

package/src/state/move-in-direction/move-cross-axis/index.js

@@ -0,0 +1,109 @@
+// @flow
+import { type Position } from 'css-box-model';
+import type { PublicResult } from '../move-in-direction-types';
+import type {
+  DroppableDimension,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DroppableDimensionMap,
+  DragImpact,
+  Viewport,
+  LiftEffect,
+} from '../../../types';
+import getBestCrossAxisDroppable from './get-best-cross-axis-droppable';
+import getClosestDraggable from './get-closest-draggable';
+// import moveToNewDroppable from './move-to-new-droppable';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import getClientFromPageBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center';
+import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center';
+import moveToNewDroppable from './move-to-new-droppable';
+
+type Args = {|
+  isMovingForward: boolean,
+  // the current page center of the dragging item
+  previousPageBorderBoxCenter: Position,
+  // the dragging item
+  draggable: DraggableDimension,
+  // the droppable the dragging item is in
+  isOver: DroppableDimension,
+  // all the dimensions in the system
+  draggables: DraggableDimensionMap,
+  droppables: DroppableDimensionMap,
+  // the current viewport
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  isMovingForward,
+  previousPageBorderBoxCenter,
+  draggable,
+  isOver,
+  draggables,
+  droppables,
+  viewport,
+  afterCritical,
+}: Args): ?PublicResult => {
+  // not considering the container scroll changes as container scrolling cancels a keyboard drag
+
+  const destination: ?DroppableDimension = getBestCrossAxisDroppable({
+    isMovingForward,
+    pageBorderBoxCenter: previousPageBorderBoxCenter,
+    source: isOver,
+    droppables,
+    viewport,
+  });
+
+  // nothing available to move to
+  if (!destination) {
+    return null;
+  }
+
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    destination.descriptor.id,
+    draggables,
+  );
+
+  const moveRelativeTo: ?DraggableDimension = getClosestDraggable({
+    pageBorderBoxCenter: previousPageBorderBoxCenter,
+    viewport,
+    destination,
+    insideDestination,
+    afterCritical,
+  });
+
+  const impact: ?DragImpact = moveToNewDroppable({
+    previousPageBorderBoxCenter,
+    destination,
+    draggable,
+    draggables,
+    moveRelativeTo,
+    insideDestination,
+    viewport,
+    afterCritical,
+  });
+
+  if (!impact) {
+    return null;
+  }
+
+  const pageBorderBoxCenter: Position = getPageBorderBoxCenter({
+    impact,
+    draggable,
+    droppable: destination,
+    draggables,
+    afterCritical,
+  });
+
+  const clientSelection: Position = getClientFromPageBorderBoxCenter({
+    pageBorderBoxCenter,
+    draggable,
+    viewport,
+  });
+
+  return {
+    clientSelection,
+    impact,
+    scrollJumpRequest: null,
+  };
+};

package/src/state/move-in-direction/move-cross-axis/move-to-new-droppable.js

@@ -0,0 +1,121 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DragImpact,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DroppableDimension,
+  Viewport,
+  DisplacedBy,
+  LiftEffect,
+} from '../../../types';
+import getDisplacedBy from '../../get-displaced-by';
+import { emptyGroups, noDisplacedBy } from '../../no-impact';
+import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center';
+import isTotallyVisibleInNewLocation from '../move-to-next-place/is-totally-visible-in-new-location';
+import { addPlaceholder } from '../../droppable/with-placeholder';
+import isHomeOf from '../../droppable/is-home-of';
+import calculateReorderImpact from '../../calculate-drag-impact/calculate-reorder-impact';
+
+type Args = {|
+  previousPageBorderBoxCenter: Position,
+  moveRelativeTo: ?DraggableDimension,
+  insideDestination: DraggableDimension[],
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+  destination: DroppableDimension,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  previousPageBorderBoxCenter,
+  moveRelativeTo,
+  insideDestination,
+  draggable,
+  draggables,
+  destination,
+  viewport,
+  afterCritical,
+}: Args): ?DragImpact => {
+  if (!moveRelativeTo) {
+    // Draggables available, but none are candidates for movement
+    if (insideDestination.length) {
+      return null;
+    }
+
+    // Try move to top of empty list if it is visible
+    const proposed: DragImpact = {
+      displaced: emptyGroups,
+      displacedBy: noDisplacedBy,
+      at: {
+        type: 'REORDER',
+        destination: {
+          droppableId: destination.descriptor.id,
+          index: 0,
+        },
+      },
+    };
+    const proposedPageBorderBoxCenter: Position = getPageBorderBoxCenter({
+      impact: proposed,
+      draggable,
+      droppable: destination,
+      draggables,
+      afterCritical,
+    });
+
+    // need to add room for a placeholder in a foreign list
+    const withPlaceholder: DroppableDimension = isHomeOf(draggable, destination)
+      ? destination
+      : addPlaceholder(destination, draggable, draggables);
+
+    const isVisibleInNewLocation: boolean = isTotallyVisibleInNewLocation({
+      draggable,
+      destination: withPlaceholder,
+      newPageBorderBoxCenter: proposedPageBorderBoxCenter,
+      viewport: viewport.frame,
+      // already taken into account by getPageBorderBoxCenter
+      withDroppableDisplacement: false,
+      onlyOnMainAxis: true,
+    });
+
+    return isVisibleInNewLocation ? proposed : null;
+  }
+
+  const isGoingBeforeTarget: boolean = Boolean(
+    // Using <= as we optimise slightly for moving before items in a new list
+    // This is nicer in lists with fixed height items
+    previousPageBorderBoxCenter[destination.axis.line] <=
+      moveRelativeTo.page.borderBox.center[destination.axis.line],
+  );
+
+  const proposedIndex: number = (() => {
+    const relativeTo: number = moveRelativeTo.descriptor.index;
+
+    if (moveRelativeTo.descriptor.id === draggable.descriptor.id) {
+      return relativeTo;
+    }
+
+    if (isGoingBeforeTarget) {
+      return relativeTo;
+    }
+
+    return relativeTo + 1;
+  })();
+
+  const displacedBy: DisplacedBy = getDisplacedBy(
+    destination.axis,
+    draggable.displaceBy,
+  );
+
+  return calculateReorderImpact({
+    draggable,
+    insideDestination,
+    destination,
+    viewport,
+    displacedBy,
+    // last groups won't be relevant
+    last: emptyGroups,
+    index: proposedIndex,
+  });
+};

package/src/state/move-in-direction/move-cross-axis/without-starting-displacement.js

@@ -0,0 +1,31 @@
+// @flow
+import type { Position, Rect, Spacing } from 'css-box-model';
+import type { DraggableDimension, LiftEffect } from '../../../types';
+import { negate, subtract } from '../../position';
+import { offsetByPosition } from '../../spacing';
+import didStartAfterCritical from '../../did-start-after-critical';
+
+export const getCurrentPageBorderBoxCenter = (
+  draggable: DraggableDimension,
+  afterCritical: LiftEffect,
+): Position => {
+  // If an item started displaced it is now resting
+  // in a non-displaced location
+  const original: Position = draggable.page.borderBox.center;
+  return didStartAfterCritical(draggable.descriptor.id, afterCritical)
+    ? subtract(original, afterCritical.displacedBy.point)
+    : original;
+};
+
+export const getCurrentPageBorderBox = (
+  draggable: DraggableDimension,
+  afterCritical: LiftEffect,
+): Spacing => {
+  // If an item started displaced it is now resting
+  // in a non-displaced location
+  const original: Rect = draggable.page.borderBox;
+
+  return didStartAfterCritical(draggable.descriptor.id, afterCritical)
+    ? offsetByPosition(original, negate(afterCritical.displacedBy.point))
+    : original;
+};

package/src/state/move-in-direction/move-in-direction-types.js

@@ -0,0 +1,9 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type { DragImpact } from '../../types';
+
+export type PublicResult = {|
+  clientSelection: Position,
+  impact: DragImpact,
+  scrollJumpRequest: ?Position,
+|};