@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/droppable/util/get-subject.js

@@ -0,0 +1,63 @@
+// @flow
+import { getRect, type Rect, type Spacing, type BoxModel } from 'css-box-model';
+import type {
+  Axis,
+  Scrollable,
+  DroppableSubject,
+  PlaceholderInSubject,
+} from '../../../types';
+import executeClip from './clip';
+import { offsetByPosition } from '../../spacing';
+
+const scroll = (target: Spacing, frame: ?Scrollable): Spacing => {
+  if (!frame) {
+    return target;
+  }
+
+  return offsetByPosition(target, frame.scroll.diff.displacement);
+};
+
+const increase = (
+  target: Spacing,
+  axis: Axis,
+  withPlaceholder: ?PlaceholderInSubject,
+): Spacing => {
+  if (withPlaceholder && withPlaceholder.increasedBy) {
+    return {
+      ...target,
+      [axis.end]: target[axis.end] + withPlaceholder.increasedBy[axis.line],
+    };
+  }
+  return target;
+};
+
+const clip = (target: Spacing, frame: ?Scrollable): ?Rect => {
+  if (frame && frame.shouldClipSubject) {
+    return executeClip(frame.pageMarginBox, target);
+  }
+  return getRect(target);
+};
+
+type Args = {|
+  page: BoxModel,
+  withPlaceholder: ?PlaceholderInSubject,
+  axis: Axis,
+  frame: ?Scrollable,
+|};
+
+export default ({
+  page,
+  withPlaceholder,
+  axis,
+  frame,
+}: Args): DroppableSubject => {
+  const scrolled: Spacing = scroll(page.marginBox, frame);
+  const increased: Spacing = increase(scrolled, axis, withPlaceholder);
+  const clipped: ?Rect = clip(increased, frame);
+
+  return {
+    page,
+    withPlaceholder,
+    active: clipped,
+  };
+};

package/src/state/droppable/what-is-dragged-over-from-result.js

@@ -0,0 +1,16 @@
+// @flow
+import type { DroppableId, DropResult } from '../../types';
+
+export default (result: DropResult): ?DroppableId => {
+  const { combine, destination } = result;
+
+  if (destination) {
+    return destination.droppableId;
+  }
+
+  if (combine) {
+    return combine.droppableId;
+  }
+
+  return null;
+};

package/src/state/droppable/what-is-dragged-over.js

@@ -0,0 +1,16 @@
+// @flow
+import type { ImpactLocation, DroppableId, DragImpact } from '../../types';
+
+export default (impact: DragImpact): ?DroppableId => {
+  const at: ?ImpactLocation = impact.at;
+
+  if (!at) {
+    return null;
+  }
+
+  if (at.type === 'REORDER') {
+    return at.destination.droppableId;
+  }
+
+  return at.combine.droppableId;
+};

package/src/state/droppable/with-placeholder.js

@@ -0,0 +1,174 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../invariant';
+import type {
+  Axis,
+  DroppableDimension,
+  DraggableDimension,
+  DraggableDimensionMap,
+  Scrollable,
+  DroppableSubject,
+  PlaceholderInSubject,
+} from '../../types';
+import getDraggablesInsideDroppable from '../get-draggables-inside-droppable';
+import { add, patch } from '../position';
+import getSubject from './util/get-subject';
+import isHomeOf from './is-home-of';
+import getDisplacedBy from '../get-displaced-by';
+
+const getRequiredGrowthForPlaceholder = (
+  droppable: DroppableDimension,
+  placeholderSize: Position,
+  draggables: DraggableDimensionMap,
+): ?Position => {
+  const axis: Axis = droppable.axis;
+
+  // A virtual list will most likely not contain all of the Draggables
+  // so counting them does not help.
+  if (droppable.descriptor.mode === 'virtual') {
+    return patch(axis.line, placeholderSize[axis.line]);
+  }
+
+  // TODO: consider margin collapsing?
+  // Using contentBox as that is where the Draggables will sit
+  const availableSpace: number = droppable.subject.page.contentBox[axis.size];
+  const insideDroppable: DraggableDimension[] = getDraggablesInsideDroppable(
+    droppable.descriptor.id,
+    draggables,
+  );
+  const spaceUsed: number = insideDroppable.reduce(
+    (sum: number, dimension: DraggableDimension): number =>
+      sum + dimension.client.marginBox[axis.size],
+    0,
+  );
+  const requiredSpace: number = spaceUsed + placeholderSize[axis.line];
+  const needsToGrowBy: number = requiredSpace - availableSpace;
+
+  // nothing to do here
+  if (needsToGrowBy <= 0) {
+    return null;
+  }
+
+  return patch(axis.line, needsToGrowBy);
+};
+
+const withMaxScroll = (frame: Scrollable, max: Position): Scrollable => ({
+  ...frame,
+  scroll: {
+    ...frame.scroll,
+    max,
+  },
+});
+
+export const addPlaceholder = (
+  droppable: DroppableDimension,
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+): DroppableDimension => {
+  const frame: ?Scrollable = droppable.frame;
+
+  invariant(
+    !isHomeOf(draggable, droppable),
+    'Should not add placeholder space to home list',
+  );
+
+  invariant(
+    !droppable.subject.withPlaceholder,
+    'Cannot add placeholder size to a subject when it already has one',
+  );
+
+  const placeholderSize: Position = getDisplacedBy(
+    droppable.axis,
+    draggable.displaceBy,
+  ).point;
+
+  const requiredGrowth: ?Position = getRequiredGrowthForPlaceholder(
+    droppable,
+    placeholderSize,
+    draggables,
+  );
+
+  const added: PlaceholderInSubject = {
+    placeholderSize,
+    increasedBy: requiredGrowth,
+    oldFrameMaxScroll: droppable.frame ? droppable.frame.scroll.max : null,
+  };
+
+  if (!frame) {
+    const subject: DroppableSubject = getSubject({
+      page: droppable.subject.page,
+      withPlaceholder: added,
+      axis: droppable.axis,
+      frame: droppable.frame,
+    });
+    return {
+      ...droppable,
+      subject,
+    };
+  }
+
+  const maxScroll: Position = requiredGrowth
+    ? add(frame.scroll.max, requiredGrowth)
+    : frame.scroll.max;
+
+  const newFrame: Scrollable = withMaxScroll(frame, maxScroll);
+
+  const subject: DroppableSubject = getSubject({
+    page: droppable.subject.page,
+    withPlaceholder: added,
+    axis: droppable.axis,
+    frame: newFrame,
+  });
+  return {
+    ...droppable,
+    subject,
+    frame: newFrame,
+  };
+};
+
+export const removePlaceholder = (
+  droppable: DroppableDimension,
+): DroppableDimension => {
+  const added: ?PlaceholderInSubject = droppable.subject.withPlaceholder;
+  invariant(
+    added,
+    'Cannot remove placeholder form subject when there was none',
+  );
+
+  const frame: ?Scrollable = droppable.frame;
+
+  if (!frame) {
+    const subject: DroppableSubject = getSubject({
+      page: droppable.subject.page,
+      axis: droppable.axis,
+      frame: null,
+      // cleared
+      withPlaceholder: null,
+    });
+    return {
+      ...droppable,
+      subject,
+    };
+  }
+
+  const oldMaxScroll: ?Position = added.oldFrameMaxScroll;
+  invariant(
+    oldMaxScroll,
+    'Expected droppable with frame to have old max frame scroll when removing placeholder',
+  );
+
+  const newFrame: Scrollable = withMaxScroll(frame, oldMaxScroll);
+
+  const subject: DroppableSubject = getSubject({
+    page: droppable.subject.page,
+    axis: droppable.axis,
+    frame: newFrame,
+    // cleared
+    withPlaceholder: null,
+  });
+  return {
+    ...droppable,
+    subject,
+    frame: newFrame,
+  };
+};

package/src/state/get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center.js

@@ -0,0 +1,29 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type { Viewport, DraggableDimension } from '../../../types';
+import { add, subtract } from '../../position';
+import withViewportDisplacement from '../../with-scroll-change/with-viewport-displacement';
+
+type Args = {|
+  pageBorderBoxCenter: Position,
+  draggable: DraggableDimension,
+  viewport: Viewport,
+|};
+
+export default ({
+  pageBorderBoxCenter,
+  draggable,
+  viewport,
+}: Args): Position => {
+  const withoutPageScrollChange: Position = withViewportDisplacement(
+    viewport,
+    pageBorderBoxCenter,
+  );
+
+  const offset: Position = subtract(
+    withoutPageScrollChange,
+    draggable.page.borderBox.center,
+  );
+
+  return add(draggable.client.borderBox.center, offset);
+};

package/src/state/get-center-from-impact/get-client-border-box-center/index.js

@@ -0,0 +1,44 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  Viewport,
+  DragImpact,
+  DraggableDimension,
+  DraggableDimensionMap,
+  LiftEffect,
+} from '../../../types';
+import getPageBorderBoxCenterFromImpact from '../get-page-border-box-center';
+import getClientFromPageBorderBoxCenter from './get-client-from-page-border-box-center';
+
+type Args = {|
+  impact: DragImpact,
+  draggable: DraggableDimension,
+  droppable: DroppableDimension,
+  draggables: DraggableDimensionMap,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  impact,
+  draggable,
+  droppable,
+  draggables,
+  viewport,
+  afterCritical,
+}: Args): Position => {
+  const pageBorderBoxCenter: Position = getPageBorderBoxCenterFromImpact({
+    impact,
+    draggable,
+    draggables,
+    droppable,
+    afterCritical,
+  });
+
+  return getClientFromPageBorderBoxCenter({
+    pageBorderBoxCenter,
+    draggable,
+    viewport,
+  });
+};

package/src/state/get-center-from-impact/get-page-border-box-center/index.js

@@ -0,0 +1,70 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DragImpact,
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  ImpactLocation,
+  LiftEffect,
+} from '../../../types';
+import whenCombining from './when-combining';
+import whenReordering from './when-reordering';
+import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement';
+
+type Args = {|
+  impact: DragImpact,
+  afterCritical: LiftEffect,
+  draggable: DraggableDimension,
+  droppable: ?DroppableDimension,
+  draggables: DraggableDimensionMap,
+|};
+
+const getResultWithoutDroppableDisplacement = ({
+  impact,
+  draggable,
+  droppable,
+  draggables,
+  afterCritical,
+}: Args): Position => {
+  const original: Position = draggable.page.borderBox.center;
+  const at: ?ImpactLocation = impact.at;
+
+  if (!droppable) {
+    return original;
+  }
+
+  if (!at) {
+    return original;
+  }
+
+  if (at.type === 'REORDER') {
+    return whenReordering({
+      impact,
+      draggable,
+      draggables,
+      droppable,
+      afterCritical,
+    });
+  }
+
+  return whenCombining({
+    impact,
+    draggables,
+    afterCritical,
+  });
+};
+
+export default (args: Args): Position => {
+  const withoutDisplacement: Position = getResultWithoutDroppableDisplacement(
+    args,
+  );
+
+  const droppable: ?DroppableDimension = args.droppable;
+
+  const withDisplacement: Position = droppable
+    ? withDroppableDisplacement(droppable, withoutDisplacement)
+    : withoutDisplacement;
+
+  return withDisplacement;
+};

package/src/state/get-center-from-impact/get-page-border-box-center/when-combining.js

@@ -0,0 +1,39 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../../invariant';
+import type {
+  DraggableDimensionMap,
+  DraggableId,
+  Combine,
+  LiftEffect,
+  DragImpact,
+} from '../../../types';
+import { add } from '../../position';
+import getCombinedItemDisplacement from '../../get-combined-item-displacement';
+import { tryGetCombine } from '../../get-impact-location';
+
+type Args = {|
+  impact: DragImpact,
+  // all draggables in the system
+  draggables: DraggableDimensionMap,
+  afterCritical: LiftEffect,
+|};
+
+// Returns the client offset required to move an item from its
+// original client position to its final resting position
+export default ({ afterCritical, impact, draggables }: Args): Position => {
+  const combine: ?Combine = tryGetCombine(impact);
+  invariant(combine);
+
+  const combineWith: DraggableId = combine.draggableId;
+  const center: Position = draggables[combineWith].page.borderBox.center;
+
+  const displaceBy: Position = getCombinedItemDisplacement({
+    displaced: impact.displaced,
+    afterCritical,
+    combineWith,
+    displacedBy: impact.displacedBy,
+  });
+
+  return add(center, displaceBy);
+};

package/src/state/get-center-from-impact/get-page-border-box-center/when-reordering.js

@@ -0,0 +1,112 @@
+// @flow
+import { offset, type Position, type BoxModel } from 'css-box-model';
+import type {
+  Axis,
+  DragImpact,
+  DraggableId,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DroppableDimension,
+  LiftEffect,
+} from '../../../types';
+import { goBefore, goAfter, goIntoStart } from '../move-relative-to';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import { negate } from '../../position';
+import didStartAfterCritical from '../../did-start-after-critical';
+
+type NewHomeArgs = {|
+  impact: DragImpact,
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+  droppable: DroppableDimension,
+  afterCritical: LiftEffect,
+|};
+
+// Returns the client offset required to move an item from its
+// original client position to its final resting position
+export default ({
+  impact,
+  draggable,
+  draggables,
+  droppable,
+  afterCritical,
+}: NewHomeArgs): Position => {
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    droppable.descriptor.id,
+    draggables,
+  );
+
+  const draggablePage: BoxModel = draggable.page;
+  const axis: Axis = droppable.axis;
+
+  // this will only happen in a foreign list
+  if (!insideDestination.length) {
+    return goIntoStart({
+      axis,
+      moveInto: droppable.page,
+      isMoving: draggablePage,
+    });
+  }
+
+  const { displaced, displacedBy } = impact;
+  const closestAfter: ?DraggableId = displaced.all[0];
+
+  // go before the first displaced item
+  // items can only be displaced forwards
+  if (closestAfter) {
+    const closest: DraggableDimension = draggables[closestAfter];
+    // want to go before where it would be with the displacement
+
+    // target is displaced and is already in it's starting position
+    if (didStartAfterCritical(closestAfter, afterCritical)) {
+      return goBefore({
+        axis,
+        moveRelativeTo: closest.page,
+        isMoving: draggablePage,
+      });
+    }
+
+    // target has been displaced during the drag and it is not in its starting position
+    // we need to account for the displacement
+    const withDisplacement: BoxModel = offset(closest.page, displacedBy.point);
+
+    return goBefore({
+      axis,
+      moveRelativeTo: withDisplacement,
+      isMoving: draggablePage,
+    });
+  }
+
+  // Nothing in list is displaced, we should go after the last item
+
+  const last: DraggableDimension =
+    insideDestination[insideDestination.length - 1];
+
+  // we can just go into our original position if the last item
+  // is the dragging item
+  if (last.descriptor.id === draggable.descriptor.id) {
+    return draggablePage.borderBox.center;
+  }
+
+  if (didStartAfterCritical(last.descriptor.id, afterCritical)) {
+    // if the item started displaced and it is no longer displaced then
+    // we need to go after it it's non-displaced position
+
+    const page: BoxModel = offset(
+      last.page,
+      negate(afterCritical.displacedBy.point),
+    );
+    return goAfter({
+      axis,
+      moveRelativeTo: page,
+      isMoving: draggablePage,
+    });
+  }
+
+  // item is in its resting spot. we can go straight after it
+  return goAfter({
+    axis,
+    moveRelativeTo: last.page,
+    isMoving: draggablePage,
+  });
+};

package/src/state/get-center-from-impact/move-relative-to.js

@@ -0,0 +1,66 @@
+// @flow
+import type { Position, BoxModel, Rect } from 'css-box-model';
+import { patch } from '../position';
+import type { Axis } from '../../types';
+
+type Args = {|
+  axis: Axis,
+  moveRelativeTo: BoxModel,
+  isMoving: BoxModel,
+|};
+
+const distanceFromStartToBorderBoxCenter = (
+  axis: Axis,
+  box: BoxModel,
+): number => box.margin[axis.start] + box.borderBox[axis.size] / 2;
+
+const distanceFromEndToBorderBoxCenter = (axis: Axis, box: BoxModel): number =>
+  box.margin[axis.end] + box.borderBox[axis.size] / 2;
+
+// We align the moving item against the cross axis start of the target
+// We used to align the moving item cross axis center with the cross axis center of the target.
+// However, this leads to a bad experience when reordering columns
+const getCrossAxisBorderBoxCenter = (
+  axis: Axis,
+  target: Rect,
+  isMoving: BoxModel,
+): number =>
+  target[axis.crossAxisStart] +
+  isMoving.margin[axis.crossAxisStart] +
+  isMoving.borderBox[axis.crossAxisSize] / 2;
+
+export const goAfter = ({ axis, moveRelativeTo, isMoving }: Args): Position =>
+  patch(
+    axis.line,
+    // start measuring from the end of the target
+    moveRelativeTo.marginBox[axis.end] +
+      distanceFromStartToBorderBoxCenter(axis, isMoving),
+    getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving),
+  );
+
+export const goBefore = ({ axis, moveRelativeTo, isMoving }: Args): Position =>
+  patch(
+    axis.line,
+    // start measuring from the start of the target
+    moveRelativeTo.marginBox[axis.start] -
+      distanceFromEndToBorderBoxCenter(axis, isMoving),
+    getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving),
+  );
+type GoIntoArgs = {|
+  axis: Axis,
+  moveInto: BoxModel,
+  isMoving: BoxModel,
+|};
+
+// moves into the content box
+export const goIntoStart = ({
+  axis,
+  moveInto,
+  isMoving,
+}: GoIntoArgs): Position =>
+  patch(
+    axis.line,
+    moveInto.contentBox[axis.start] +
+      distanceFromStartToBorderBoxCenter(axis, isMoving),
+    getCrossAxisBorderBoxCenter(axis, moveInto.contentBox, isMoving),
+  );

package/src/state/get-combined-item-displacement.js

@@ -0,0 +1,34 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DisplacementGroups,
+  LiftEffect,
+  DraggableId,
+  DisplacedBy,
+} from '../types';
+import { origin, negate } from './position';
+import didStartAfterCritical from './did-start-after-critical';
+
+type Args = {|
+  displaced: DisplacementGroups,
+  afterCritical: LiftEffect,
+  combineWith: DraggableId,
+  displacedBy: DisplacedBy,
+|};
+
+export default ({
+  displaced,
+  afterCritical,
+  combineWith,
+  displacedBy,
+}: Args): Position => {
+  const isDisplaced: boolean = Boolean(
+    displaced.visible[combineWith] || displaced.invisible[combineWith],
+  );
+
+  if (didStartAfterCritical(combineWith, afterCritical)) {
+    return isDisplaced ? origin : negate(displacedBy.point);
+  }
+
+  return isDisplaced ? displacedBy.point : origin;
+};

package/src/state/get-displaced-by.js

@@ -0,0 +1,17 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import { type Position } from 'css-box-model';
+import type { Axis, DisplacedBy } from '../types';
+import { patch } from './position';
+
+// TODO: memoization needed?
+export default memoizeOne(function getDisplacedBy(
+  axis: Axis,
+  displaceBy: Position,
+): DisplacedBy {
+  const displacement: number = displaceBy[axis.line];
+  return {
+    value: displacement,
+    point: patch(axis.line, displacement),
+  };
+});