@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/move-in-direction/move-to-next-place/index.js

@@ -0,0 +1,132 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  Viewport,
+  LiftEffect,
+} from '../../../types';
+import type { PublicResult } from '../move-in-direction-types';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import moveToNextCombine from './move-to-next-combine';
+import moveToNextIndex from './move-to-next-index';
+import isHomeOf from '../../droppable/is-home-of';
+import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center';
+import speculativelyIncrease from '../../update-displacement-visibility/speculatively-increase';
+import getClientFromPageBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center';
+import { subtract } from '../../position';
+import isTotallyVisibleInNewLocation from './is-totally-visible-in-new-location';
+
+type Args = {|
+  isMovingForward: boolean,
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  draggables: DraggableDimensionMap,
+  previousImpact: DragImpact,
+  viewport: Viewport,
+  previousClientSelection: Position,
+  previousPageBorderBoxCenter: Position,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  isMovingForward,
+  draggable,
+  destination,
+  draggables,
+  previousImpact,
+  viewport,
+  previousPageBorderBoxCenter,
+  previousClientSelection,
+  afterCritical,
+}: Args): ?PublicResult => {
+  if (!destination.isEnabled) {
+    return null;
+  }
+
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    destination.descriptor.id,
+    draggables,
+  );
+  const isInHomeList: boolean = isHomeOf(draggable, destination);
+
+  const impact: ?DragImpact =
+    moveToNextCombine({
+      isMovingForward,
+      draggable,
+      destination,
+      insideDestination,
+      previousImpact,
+    }) ||
+    moveToNextIndex({
+      isMovingForward,
+      isInHomeList,
+      draggable,
+      draggables,
+      destination,
+      insideDestination,
+      previousImpact,
+      viewport,
+      afterCritical,
+    });
+
+  if (!impact) {
+    return null;
+  }
+
+  const pageBorderBoxCenter: Position = getPageBorderBoxCenter({
+    impact,
+    draggable,
+    droppable: destination,
+    draggables,
+    afterCritical,
+  });
+
+  const isVisibleInNewLocation: boolean = isTotallyVisibleInNewLocation({
+    draggable,
+    destination,
+    newPageBorderBoxCenter: pageBorderBoxCenter,
+    viewport: viewport.frame,
+    // already taken into account by getPageBorderBoxCenter
+    withDroppableDisplacement: false,
+    // we only care about it being visible relative to the main axis
+    // this is important with dynamic changes as scroll bar and toggle
+    // on the cross axis during a drag
+    onlyOnMainAxis: true,
+  });
+
+  if (isVisibleInNewLocation) {
+    // using the client center as the selection point
+    const clientSelection: Position = getClientFromPageBorderBoxCenter({
+      pageBorderBoxCenter,
+      draggable,
+      viewport,
+    });
+    return {
+      clientSelection,
+      impact,
+      scrollJumpRequest: null,
+    };
+  }
+
+  const distance: Position = subtract(
+    pageBorderBoxCenter,
+    previousPageBorderBoxCenter,
+  );
+
+  const cautious: DragImpact = speculativelyIncrease({
+    impact,
+    viewport,
+    destination,
+    draggables,
+    maxScrollChange: distance,
+  });
+
+  return {
+    clientSelection: previousClientSelection,
+    impact: cautious,
+    scrollJumpRequest: distance,
+  };
+};

package/src/state/move-in-direction/move-to-next-place/is-totally-visible-in-new-location.js

@@ -0,0 +1,52 @@
+// @flow
+import { type Position, type Rect, type Spacing } from 'css-box-model';
+import { subtract } from '../../position';
+import { offsetByPosition } from '../../spacing';
+import {
+  isTotallyVisible,
+  isTotallyVisibleOnAxis,
+  type Args as IsVisibleArgs,
+} from '../../visibility/is-visible';
+import type { DraggableDimension, DroppableDimension } from '../../../types';
+
+type Args = {|
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  newPageBorderBoxCenter: Position,
+  viewport: Rect,
+  // only allowing a 'false' value. Being super clear
+  withDroppableDisplacement: false,
+  onlyOnMainAxis?: boolean,
+|};
+
+export default ({
+  draggable,
+  destination,
+  newPageBorderBoxCenter,
+  viewport,
+  withDroppableDisplacement,
+  onlyOnMainAxis = false,
+}: Args): boolean => {
+  // What would the location of the Draggable be once the move is completed?
+  // We are not considering margins for this calculation.
+  // This is because a move might move a Draggable slightly outside of the bounds
+  // of a Droppable (which is okay)
+  const changeNeeded: Position = subtract(
+    newPageBorderBoxCenter,
+    draggable.page.borderBox.center,
+  );
+  const shifted: Spacing = offsetByPosition(
+    draggable.page.borderBox,
+    changeNeeded,
+  );
+
+  // Must be totally visible, not just partially visible.
+  const args: IsVisibleArgs = {
+    target: shifted,
+    destination,
+    withDroppableDisplacement,
+    viewport,
+  };
+
+  return onlyOnMainAxis ? isTotallyVisibleOnAxis(args) : isTotallyVisible(args);
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-combine/index.js

@@ -0,0 +1,97 @@
+// @flow
+import { invariant } from '../../../../invariant';
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DragImpact,
+  CombineImpact,
+  DraggableLocation,
+  DraggableId,
+} from '../../../../types';
+import { tryGetDestination } from '../../../get-impact-location';
+import { findIndex } from '../../../../native-with-fallback';
+import removeDraggableFromList from '../../../remove-draggable-from-list';
+
+export type Args = {|
+  isMovingForward: boolean,
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  insideDestination: DraggableDimension[],
+  previousImpact: DragImpact,
+|};
+
+export default ({
+  isMovingForward,
+  draggable,
+  destination,
+  insideDestination,
+  previousImpact,
+}: Args): ?DragImpact => {
+  if (!destination.isCombineEnabled) {
+    return null;
+  }
+
+  const location: ?DraggableLocation = tryGetDestination(previousImpact);
+
+  if (!location) {
+    return null;
+  }
+
+  function getImpact(target: DraggableId) {
+    const at: CombineImpact = {
+      type: 'COMBINE',
+      combine: {
+        draggableId: target,
+        droppableId: destination.descriptor.id,
+      },
+    };
+    return {
+      ...previousImpact,
+      at,
+    };
+  }
+
+  const all: DraggableId[] = previousImpact.displaced.all;
+  const closestId: ?DraggableId = all.length ? all[0] : null;
+
+  if (isMovingForward) {
+    return closestId ? getImpact(closestId) : null;
+  }
+
+  const withoutDraggable = removeDraggableFromList(
+    draggable,
+    insideDestination,
+  );
+
+  // Moving backwards
+
+  // if nothing is displaced - move backwards onto the last item
+  if (!closestId) {
+    if (!withoutDraggable.length) {
+      return null;
+    }
+    const last: DraggableDimension =
+      withoutDraggable[withoutDraggable.length - 1];
+    return getImpact(last.descriptor.id);
+  }
+
+  // We are moving from being between two displaced items
+  // backwards onto the first one
+
+  // need to find the first item before the closest
+  const indexOfClosest: number = findIndex(
+    withoutDraggable,
+    (d) => d.descriptor.id === closestId,
+  );
+  invariant(indexOfClosest !== -1, 'Could not find displaced item in set');
+
+  const proposedIndex: number = indexOfClosest - 1;
+
+  // There is no displaced item before
+  if (proposedIndex < 0) {
+    return null;
+  }
+
+  const before: DraggableDimension = withoutDraggable[proposedIndex];
+  return getImpact(before.descriptor.id);
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine.js

@@ -0,0 +1,52 @@
+// @flow
+import type {
+  DroppableDimension,
+  Combine,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DisplacementGroups,
+  DraggableId,
+  LiftEffect,
+} from '../../../../types';
+import didStartAfterCritical from '../../../did-start-after-critical';
+
+type Args = {|
+  isMovingForward: boolean,
+  destination: DroppableDimension,
+  displaced: DisplacementGroups,
+  draggables: DraggableDimensionMap,
+  combine: Combine,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  isMovingForward,
+  destination,
+  draggables,
+  combine,
+  afterCritical,
+}: Args): ?number => {
+  if (!destination.isCombineEnabled) {
+    return null;
+  }
+  const combineId: DraggableId = combine.draggableId;
+  const combineWith: DraggableDimension = draggables[combineId];
+  const combineWithIndex: number = combineWith.descriptor.index;
+  const didCombineWithStartAfterCritical: boolean = didStartAfterCritical(
+    combineId,
+    afterCritical,
+  );
+
+  if (didCombineWithStartAfterCritical) {
+    if (isMovingForward) {
+      return combineWithIndex;
+    }
+    return combineWithIndex - 1;
+  }
+
+  if (isMovingForward) {
+    return combineWithIndex + 1;
+  }
+
+  return combineWithIndex;
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-index/from-reorder.js

@@ -0,0 +1,43 @@
+// @flow
+import type { DraggableDimension, DraggableLocation } from '../../../../types';
+
+type Args = {|
+  isMovingForward: boolean,
+  isInHomeList: boolean,
+  location: DraggableLocation,
+  insideDestination: DraggableDimension[],
+|};
+
+export default ({
+  isMovingForward,
+  isInHomeList,
+  insideDestination,
+  location,
+}: Args): ?number => {
+  // cannot move in the list
+  if (!insideDestination.length) {
+    return null;
+  }
+
+  const currentIndex: number = location.index;
+  const proposedIndex: number = isMovingForward
+    ? currentIndex + 1
+    : currentIndex - 1;
+
+  // Accounting for lists that might not start with an index of 0
+  const firstIndex: number = insideDestination[0].descriptor.index;
+  const lastIndex: number =
+    insideDestination[insideDestination.length - 1].descriptor.index;
+
+  // When in foreign list we allow movement after the last item
+  const upperBound: number = isInHomeList ? lastIndex : lastIndex + 1;
+
+  if (proposedIndex < firstIndex) {
+    return null;
+  }
+  if (proposedIndex > upperBound) {
+    return null;
+  }
+
+  return proposedIndex;
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-index/index.js

@@ -0,0 +1,86 @@
+// @flow
+import { invariant } from '../../../../invariant';
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  LiftEffect,
+  Viewport,
+  ImpactLocation,
+} from '../../../../types';
+import calculateReorderImpact from '../../../calculate-drag-impact/calculate-reorder-impact';
+import fromCombine from './from-combine';
+import fromReorder from './from-reorder';
+
+export type Args = {|
+  isMovingForward: boolean,
+  isInHomeList: boolean,
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+  destination: DroppableDimension,
+  insideDestination: DraggableDimension[],
+  previousImpact: DragImpact,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  isMovingForward,
+  isInHomeList,
+  draggable,
+  draggables,
+  destination,
+  insideDestination,
+  previousImpact,
+  viewport,
+  afterCritical,
+}: Args): ?DragImpact => {
+  const wasAt: ?ImpactLocation = previousImpact.at;
+  invariant(wasAt, 'Cannot move in direction without previous impact location');
+
+  if (wasAt.type === 'REORDER') {
+    const newIndex: ?number = fromReorder({
+      isMovingForward,
+      isInHomeList,
+      location: wasAt.destination,
+      insideDestination,
+    });
+    // TODO: can we just pass new index on?
+    if (newIndex == null) {
+      return null;
+    }
+    return calculateReorderImpact({
+      draggable,
+      insideDestination,
+      destination,
+      viewport,
+      last: previousImpact.displaced,
+      displacedBy: previousImpact.displacedBy,
+      index: newIndex,
+    });
+  }
+
+  // COMBINE
+  const newIndex: ?number = fromCombine({
+    isMovingForward,
+    destination,
+    displaced: previousImpact.displaced,
+    draggables,
+    combine: wasAt.combine,
+    afterCritical,
+  });
+  if (newIndex == null) {
+    return null;
+  }
+
+  return calculateReorderImpact({
+    draggable,
+    insideDestination,
+    destination,
+    viewport,
+    last: previousImpact.displaced,
+    displacedBy: previousImpact.displacedBy,
+    index: newIndex,
+  });
+};

package/src/state/no-impact.js

@@ -0,0 +1,33 @@
+// @flow
+import type {
+  DisplacementGroups,
+  DragImpact,
+  DisplacedBy,
+  LiftEffect,
+} from '../types';
+import { origin } from './position';
+
+export const noDisplacedBy: DisplacedBy = {
+  point: origin,
+  value: 0,
+};
+
+export const emptyGroups: DisplacementGroups = {
+  invisible: {},
+  visible: {},
+  all: [],
+};
+
+const noImpact: DragImpact = {
+  displaced: emptyGroups,
+  displacedBy: noDisplacedBy,
+  at: null,
+};
+
+export default noImpact;
+
+export const noAfterCritical: LiftEffect = {
+  inVirtualList: false,
+  effected: {},
+  displacedBy: noDisplacedBy,
+};

package/src/state/patch-dimension-map.js

@@ -0,0 +1,11 @@
+// @flow
+import type { DimensionMap, DroppableDimension } from '../types';
+import patchDroppableMap from './patch-droppable-map';
+
+export default (
+  dimensions: DimensionMap,
+  updated: DroppableDimension,
+): DimensionMap => ({
+  draggables: dimensions.draggables,
+  droppables: patchDroppableMap(dimensions.droppables, updated),
+});

package/src/state/patch-droppable-map.js

@@ -0,0 +1,10 @@
+// @flow
+import type { DroppableDimension, DroppableDimensionMap } from '../types';
+
+export default (
+  droppables: DroppableDimensionMap,
+  updated: DroppableDimension,
+): DroppableDimensionMap => ({
+  ...droppables,
+  [updated.descriptor.id]: updated,
+});

package/src/state/position.js

@@ -0,0 +1,58 @@
+// @flow
+import { type Position } from 'css-box-model';
+
+export const origin: Position = { x: 0, y: 0 };
+
+export const add = (point1: Position, point2: Position): Position => ({
+  x: point1.x + point2.x,
+  y: point1.y + point2.y,
+});
+
+export const subtract = (point1: Position, point2: Position): Position => ({
+  x: point1.x - point2.x,
+  y: point1.y - point2.y,
+});
+
+export const isEqual = (point1: Position, point2: Position): boolean =>
+  point1.x === point2.x && point1.y === point2.y;
+
+export const negate = (point: Position): Position => ({
+  // if the value is already 0, do not return -0
+  x: point.x !== 0 ? -point.x : 0,
+  y: point.y !== 0 ? -point.y : 0,
+});
+
+// Allows you to build a position from values.
+// Really useful when working with the Axis type
+// patch('x', 5)    = { x: 5, y: 0 }
+// patch('y', 5, 1) = { x: 1, y: 5 }
+export const patch = (
+  line: 'x' | 'y',
+  value: number,
+  otherValue?: number = 0,
+): Position => ({
+  // set the value of 'x', or 'y'
+  [line]: value,
+  // set the value of the other line
+  [line === 'x' ? 'y' : 'x']: otherValue,
+});
+
+// Returns the distance between two points
+// https://www.mathsisfun.com/algebra/distance-2-points.html
+export const distance = (point1: Position, point2: Position): number =>
+  Math.sqrt(
+    Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2),
+  );
+
+// When given a list of points, it finds the smallest distance to any point
+export const closest = (target: Position, points: Position[]): number =>
+  Math.min(...points.map((point: Position) => distance(target, point)));
+
+// used to apply any function to both values of a point
+// eg: const floor = apply(Math.floor)(point);
+export const apply = (fn: (value: number) => number) => (
+  point: Position,
+): Position => ({
+  x: fn(point.x),
+  y: fn(point.y),
+});

package/src/state/post-reducer/when-moving/refresh-snap.js

@@ -0,0 +1,67 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { invariant } from '../../../invariant';
+import type {
+  DroppableDimension,
+  DraggableDimension,
+  StateWhenUpdatesAllowed,
+  DroppableId,
+  DimensionMap,
+  DragImpact,
+  Viewport,
+} from '../../../types';
+import whatIsDraggedOver from '../../droppable/what-is-dragged-over';
+import recomputeDisplacementVisibility from '../../update-displacement-visibility/recompute';
+import getClientBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center';
+import update from './update';
+
+type Args = {|
+  state: StateWhenUpdatesAllowed,
+  dimensions?: DimensionMap,
+  viewport?: Viewport,
+|};
+
+export default ({
+  state,
+  dimensions: forcedDimensions,
+  viewport: forcedViewport,
+}: // when a draggable is changing enabled state, sometimes it needs to force refresh an impact
+Args): StateWhenUpdatesAllowed => {
+  invariant(state.movementMode === 'SNAP');
+
+  const needsVisibilityCheck: DragImpact = state.impact;
+  const viewport: Viewport = forcedViewport || state.viewport;
+  const dimensions: DimensionMap = forcedDimensions || state.dimensions;
+  const { draggables, droppables } = dimensions;
+
+  const draggable: DraggableDimension = draggables[state.critical.draggable.id];
+  const isOver: ?DroppableId = whatIsDraggedOver(needsVisibilityCheck);
+  invariant(isOver, 'Must be over a destination in SNAP movement mode');
+  const destination: DroppableDimension = droppables[isOver];
+
+  const impact: DragImpact = recomputeDisplacementVisibility({
+    impact: needsVisibilityCheck,
+    viewport,
+    destination,
+    draggables,
+  });
+
+  const clientSelection: Position = getClientBorderBoxCenter({
+    impact,
+    draggable,
+    droppable: destination,
+    draggables,
+    viewport,
+    afterCritical: state.afterCritical,
+  });
+
+  return update({
+    // new
+    impact,
+    clientSelection,
+    // pass through
+    state,
+    dimensions,
+    viewport,
+  });
+};