@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/get-impact-location.js

@@ -0,0 +1,16 @@
+// @flow
+import type { DragImpact, DraggableLocation, Combine } from '../types';
+
+export function tryGetDestination(impact: DragImpact): ?DraggableLocation {
+  if (impact.at && impact.at.type === 'REORDER') {
+    return impact.at.destination;
+  }
+  return null;
+}
+
+export function tryGetCombine(impact: DragImpact): ?Combine {
+  if (impact.at && impact.at.type === 'COMBINE') {
+    return impact.at.combine;
+  }
+  return null;
+}

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

@@ -0,0 +1,11 @@
+// @flow
+import type { DisplacementGroups, DraggableId } from '../types';
+
+type Args = {|
+  displaced: DisplacementGroups,
+  id: DraggableId,
+|};
+
+export default function getIsDisplaced({ displaced, id }: Args): boolean {
+  return Boolean(displaced.visible[id] || displaced.invisible[id]);
+}

package/src/state/get-lift-effect.js

@@ -0,0 +1,82 @@
+// @flow
+import { invariant } from '../invariant';
+import getHomeLocation from './get-home-location';
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  DisplacedBy,
+  Viewport,
+  DraggableIdMap,
+  DisplacementGroups,
+  LiftEffect,
+} from '../types';
+import getDraggablesInsideDroppable from './get-draggables-inside-droppable';
+import getDisplacedBy from './get-displaced-by';
+import getDisplacementGroups from './get-displacement-groups';
+
+type Args = {|
+  draggable: DraggableDimension,
+  home: DroppableDimension,
+  draggables: DraggableDimensionMap,
+  viewport: Viewport,
+|};
+
+type Result = {|
+  afterCritical: LiftEffect,
+  impact: DragImpact,
+|};
+
+export default ({ draggable, home, draggables, viewport }: Args): Result => {
+  const displacedBy: DisplacedBy = getDisplacedBy(
+    home.axis,
+    draggable.displaceBy,
+  );
+
+  const insideHome: DraggableDimension[] = getDraggablesInsideDroppable(
+    home.descriptor.id,
+    draggables,
+  );
+
+  // in a list that does not start at 0 the descriptor.index might be different from the index in the list
+  // eg a list could be: [2,3,4]. A descriptor.index of '2' would actually be in index '0' of the list
+  const rawIndex: number = insideHome.indexOf(draggable);
+  invariant(rawIndex !== -1, 'Expected draggable to be inside home list');
+
+  const afterDragging: DraggableDimension[] = insideHome.slice(rawIndex + 1);
+  const effected: DraggableIdMap = afterDragging.reduce(
+    (previous: DraggableIdMap, item: DraggableDimension): DraggableIdMap => {
+      previous[item.descriptor.id] = true;
+      return previous;
+    },
+    {},
+  );
+  const afterCritical: LiftEffect = {
+    inVirtualList: home.descriptor.mode === 'virtual',
+    displacedBy,
+    effected,
+  };
+
+  const displaced: DisplacementGroups = getDisplacementGroups({
+    afterDragging,
+    destination: home,
+    displacedBy,
+    last: null,
+    viewport: viewport.frame,
+    // originally we do not want any animation as we want
+    // everything to be fixed in the same position that
+    // it started in
+    forceShouldAnimate: false,
+  });
+
+  const impact: DragImpact = {
+    displaced,
+    displacedBy,
+    at: {
+      type: 'REORDER',
+      destination: getHomeLocation(draggable.descriptor),
+    },
+  };
+  return { impact, afterCritical };
+};

package/src/state/get-max-scroll.js

@@ -0,0 +1,30 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { subtract } from './position';
+
+type Args = {|
+  scrollHeight: number,
+  scrollWidth: number,
+  height: number,
+  width: number,
+|};
+export default ({
+  scrollHeight,
+  scrollWidth,
+  height,
+  width,
+}: Args): Position => {
+  const maxScroll: Position = subtract(
+    // full size
+    { x: scrollWidth, y: scrollHeight },
+    // viewport size
+    { x: width, y: height },
+  );
+
+  const adjustedMaxScroll: Position = {
+    x: Math.max(0, maxScroll.x),
+    y: Math.max(0, maxScroll.y),
+  };
+
+  return adjustedMaxScroll;
+};

package/src/state/is-movement-allowed.js

@@ -0,0 +1,6 @@
+// @flow
+import type { State } from '../types';
+// Using function declaration as arrow function does not play well with the %checks syntax
+export default function isMovementAllowed(state: State): boolean %checks {
+  return state.phase === 'DRAGGING' || state.phase === 'COLLECTING';
+}

package/src/state/is-within.js

@@ -0,0 +1,9 @@
+// @flow
+
+// is a value between two other values
+
+export default (
+  lowerBound: number,
+  upperBound: number,
+): ((number) => boolean) => (value: number): boolean =>
+  lowerBound <= value && value <= upperBound;

package/src/state/middleware/auto-scroll.js

@@ -0,0 +1,38 @@
+// @flow
+import { invariant } from '../../invariant';
+import type { AutoScroller } from '../auto-scroller/auto-scroller-types';
+import type { Action, Dispatch, MiddlewareStore } from '../store-types';
+import type { State } from '../../types';
+
+const shouldStop = (action: Action): boolean =>
+  action.type === 'DROP_COMPLETE' ||
+  action.type === 'DROP_ANIMATE' ||
+  action.type === 'FLUSH';
+
+export default (autoScroller: AutoScroller) => (store: MiddlewareStore) => (
+  next: Dispatch,
+) => (action: Action): any => {
+  if (shouldStop(action)) {
+    autoScroller.stop();
+    next(action);
+    return;
+  }
+
+  if (action.type === 'INITIAL_PUBLISH') {
+    // letting the action go first to hydrate the state
+    next(action);
+    const state: State = store.getState();
+    invariant(
+      state.phase === 'DRAGGING',
+      'Expected phase to be DRAGGING after INITIAL_PUBLISH',
+    );
+    autoScroller.start(state);
+    return;
+  }
+
+  // auto scroll happens in response to state changes
+  // releasing all actions to the reducer first
+  next(action);
+
+  autoScroller.scroll(store.getState());
+};

package/src/state/middleware/dimension-marshal-stopper.js

@@ -0,0 +1,20 @@
+// @flow
+import type { Action, Dispatch } from '../store-types';
+import type { DimensionMarshal } from '../dimension-marshal/dimension-marshal-types';
+
+export default (marshal: DimensionMarshal) => () => (next: Dispatch) => (
+  action: Action,
+): any => {
+  // Not stopping a collection on a 'DROP' as we want a collection to continue
+  if (
+    // drag is finished
+    action.type === 'DROP_COMPLETE' ||
+    action.type === 'FLUSH' ||
+    // no longer accepting changes once the drop has started
+    action.type === 'DROP_ANIMATE'
+  ) {
+    marshal.stopPublishing();
+  }
+
+  next(action);
+};

package/src/state/middleware/drop/drop-animation-finish-middleware.js

@@ -0,0 +1,21 @@
+// @flow
+import { invariant } from '../../../invariant';
+import { completeDrop } from '../../action-creators';
+import type { State } from '../../../types';
+import type { MiddlewareStore, Action, Dispatch } from '../../store-types';
+
+export default (store: MiddlewareStore) => (next: Dispatch) => (
+  action: Action,
+): any => {
+  if (action.type !== 'DROP_ANIMATION_FINISHED') {
+    next(action);
+    return;
+  }
+
+  const state: State = store.getState();
+  invariant(
+    state.phase === 'DROP_ANIMATING',
+    'Cannot finish a drop animating when no drop is occurring',
+  );
+  store.dispatch(completeDrop({ completed: state.completed }));
+};

package/src/state/middleware/drop/drop-animation-flush-on-scroll-middleware.js

@@ -0,0 +1,63 @@
+// @flow
+import { dropAnimationFinished } from '../../action-creators';
+import type { State } from '../../../types';
+import type { MiddlewareStore, Action, Dispatch } from '../../store-types';
+import type { EventBinding } from '../../../view/event-bindings/event-types';
+import bindEvents from '../../../view/event-bindings/bind-events';
+
+export default (store: MiddlewareStore) => {
+  let unbind: ?() => void = null;
+  let frameId: ?AnimationFrameID = null;
+
+  function clear() {
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+      frameId = null;
+    }
+
+    if (unbind) {
+      unbind();
+      unbind = null;
+    }
+  }
+
+  return (next: Dispatch) => (action: Action): any => {
+    if (
+      action.type === 'FLUSH' ||
+      action.type === 'DROP_COMPLETE' ||
+      action.type === 'DROP_ANIMATION_FINISHED'
+    ) {
+      clear();
+    }
+
+    next(action);
+
+    if (action.type !== 'DROP_ANIMATE') {
+      return;
+    }
+
+    const binding: EventBinding = {
+      eventName: 'scroll',
+      // capture: true will catch all scroll events, event from scroll containers
+      // once: just in case, we only want to ever fire one
+      options: { capture: true, passive: false, once: true },
+      fn: function flushDropAnimation() {
+        const state: State = store.getState();
+        if (state.phase === 'DROP_ANIMATING') {
+          store.dispatch(dropAnimationFinished());
+        }
+      },
+    };
+
+    // The browser can batch a few scroll events in a single frame
+    // including the one that ended the drag.
+    // Binding after a requestAnimationFrame ensures that any scrolls caused
+    // by the auto scroller are finished
+    // TODO: why is a second window scroll being fired?
+    // It leads to funny drop positions :(
+    frameId = requestAnimationFrame(() => {
+      frameId = null;
+      unbind = bindEvents(window, [binding]);
+    });
+  };
+};

package/src/state/middleware/drop/drop-middleware.js

@@ -0,0 +1,146 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { invariant } from '../../../invariant';
+import type {
+  State,
+  DropReason,
+  Critical,
+  DraggableLocation,
+  DropResult,
+  CompletedDrag,
+  Combine,
+  DimensionMap,
+  DraggableDimension,
+} from '../../../types';
+import type { MiddlewareStore, Dispatch, Action } from '../../store-types';
+import {
+  animateDrop,
+  completeDrop,
+  dropPending,
+  type AnimateDropArgs,
+} from '../../action-creators';
+import { isEqual } from '../../position';
+import getDropDuration from './get-drop-duration';
+import getNewHomeClientOffset from './get-new-home-client-offset';
+import getDropImpact, { type Result } from './get-drop-impact';
+import { tryGetCombine, tryGetDestination } from '../../get-impact-location';
+
+export default ({ getState, dispatch }: MiddlewareStore) => (
+  next: Dispatch,
+) => (action: Action): any => {
+  if (action.type !== 'DROP') {
+    next(action);
+    return;
+  }
+
+  const state: State = getState();
+  const reason: DropReason = action.payload.reason;
+
+  // Still waiting for a bulk collection to publish
+  // We are now shifting the application into the 'DROP_PENDING' phase
+  if (state.phase === 'COLLECTING') {
+    dispatch(dropPending({ reason }));
+    return;
+  }
+
+  // Could have occurred in response to an error
+  if (state.phase === 'IDLE') {
+    return;
+  }
+
+  // Still waiting for our drop pending to end
+  // TODO: should this throw?
+  const isWaitingForDrop: boolean =
+    state.phase === 'DROP_PENDING' && state.isWaiting;
+  invariant(
+    !isWaitingForDrop,
+    'A DROP action occurred while DROP_PENDING and still waiting',
+  );
+
+  invariant(
+    state.phase === 'DRAGGING' || state.phase === 'DROP_PENDING',
+    `Cannot drop in phase: ${state.phase}`,
+  );
+  // We are now in the DRAGGING or DROP_PENDING phase
+
+  const critical: Critical = state.critical;
+  const dimensions: DimensionMap = state.dimensions;
+  const draggable: DraggableDimension =
+    dimensions.draggables[state.critical.draggable.id];
+  // Only keeping impact when doing a user drop - otherwise we are cancelling
+
+  const { impact, didDropInsideDroppable }: Result = getDropImpact({
+    reason,
+    lastImpact: state.impact,
+    afterCritical: state.afterCritical,
+    onLiftImpact: state.onLiftImpact,
+    home: state.dimensions.droppables[state.critical.droppable.id],
+    viewport: state.viewport,
+    draggables: state.dimensions.draggables,
+  });
+
+  // only populating destination / combine if 'didDropInsideDroppable' is true
+  const destination: ?DraggableLocation = didDropInsideDroppable
+    ? tryGetDestination(impact)
+    : null;
+  const combine: ?Combine = didDropInsideDroppable
+    ? tryGetCombine(impact)
+    : null;
+
+  const source: DraggableLocation = {
+    index: critical.draggable.index,
+    droppableId: critical.droppable.id,
+  };
+
+  const result: DropResult = {
+    draggableId: draggable.descriptor.id,
+    type: draggable.descriptor.type,
+    source,
+    reason,
+    mode: state.movementMode,
+    // destination / combine will be null if didDropInsideDroppable is true
+    destination,
+    combine,
+  };
+
+  const newHomeClientOffset: Position = getNewHomeClientOffset({
+    impact,
+    draggable,
+    dimensions,
+    viewport: state.viewport,
+    afterCritical: state.afterCritical,
+  });
+
+  const completed: CompletedDrag = {
+    critical: state.critical,
+    afterCritical: state.afterCritical,
+    result,
+    impact,
+  };
+
+  const isAnimationRequired: boolean =
+    // 1. not already in the right spot
+    !isEqual(state.current.client.offset, newHomeClientOffset) ||
+    // 2. doing a combine (we still want to animate the scale and opacity fade)
+    // looking at the result and not the impact as the combine impact is cleared
+    Boolean(result.combine);
+
+  if (!isAnimationRequired) {
+    dispatch(completeDrop({ completed }));
+    return;
+  }
+
+  const dropDuration: number = getDropDuration({
+    current: state.current.client.offset,
+    destination: newHomeClientOffset,
+    reason,
+  });
+
+  const args: AnimateDropArgs = {
+    newHomeClientOffset,
+    dropDuration,
+    completed,
+  };
+
+  dispatch(animateDrop(args));
+};

package/src/state/middleware/drop/get-drop-duration.js

@@ -0,0 +1,47 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { distance as getDistance } from '../../position';
+import { timings } from '../../../animation';
+import type { DropReason } from '../../../types';
+
+type GetDropDurationArgs = {|
+  current: Position,
+  destination: Position,
+  reason: DropReason,
+|};
+
+const { minDropTime, maxDropTime } = timings;
+const dropTimeRange: number = maxDropTime - minDropTime;
+const maxDropTimeAtDistance: number = 1500;
+// will bring a time lower - which makes it faster
+const cancelDropModifier: number = 0.6;
+
+export default ({
+  current,
+  destination,
+  reason,
+}: GetDropDurationArgs): number => {
+  const distance: number = getDistance(current, destination);
+  // even if there is no distance to travel, we might still need to animate opacity
+  if (distance <= 0) {
+    return minDropTime;
+  }
+
+  if (distance >= maxDropTimeAtDistance) {
+    return maxDropTime;
+  }
+
+  // * range from:
+  // 0px = 0.33s
+  // 1500px and over = 0.55s
+  // * If reason === 'CANCEL' then speeding up the animation
+  // * round to 2 decimal points
+
+  const percentage: number = distance / maxDropTimeAtDistance;
+  const duration: number = minDropTime + dropTimeRange * percentage;
+
+  const withDuration: number =
+    reason === 'CANCEL' ? duration * cancelDropModifier : duration;
+  // To two decimal points by converting to string and back
+  return Number(withDuration.toFixed(2));
+};

package/src/state/middleware/drop/get-drop-impact.js

@@ -0,0 +1,77 @@
+// @flow
+import type {
+  DropReason,
+  DragImpact,
+  Viewport,
+  DroppableDimension,
+  DraggableDimensionMap,
+  LiftEffect,
+} from '../../../types';
+import recompute from '../../update-displacement-visibility/recompute';
+import { emptyGroups } from '../../no-impact';
+
+type Args = {|
+  draggables: DraggableDimensionMap,
+  home: DroppableDimension,
+  reason: DropReason,
+  lastImpact: DragImpact,
+  onLiftImpact: DragImpact,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+export type Result = {|
+  impact: DragImpact,
+  didDropInsideDroppable: boolean,
+|};
+
+export default ({
+  draggables,
+  reason,
+  lastImpact,
+  home,
+  viewport,
+  onLiftImpact,
+}: Args): Result => {
+  if (!lastImpact.at || reason !== 'DROP') {
+    // Dropping outside of a list or the drag was cancelled
+
+    // Going to use the on lift impact
+    // Need to recompute the visibility of the original impact
+    // What is visible can be different to when  the drag started
+
+    const recomputedHomeImpact: DragImpact = recompute({
+      draggables,
+      impact: onLiftImpact,
+      destination: home,
+      viewport,
+      // We need the draggables to animate back to their positions
+      forceShouldAnimate: true,
+    });
+
+    return {
+      impact: recomputedHomeImpact,
+      didDropInsideDroppable: false,
+    };
+  }
+
+  // use the existing impact
+  if (lastImpact.at.type === 'REORDER') {
+    return {
+      impact: lastImpact,
+      didDropInsideDroppable: true,
+    };
+  }
+
+  // When merging we remove the movement so that everything
+  // will animate closed
+  const withoutMovement: DragImpact = {
+    ...lastImpact,
+    displaced: emptyGroups,
+  };
+
+  return {
+    impact: withoutMovement,
+    didDropInsideDroppable: true,
+  };
+};

package/src/state/middleware/drop/get-new-home-client-offset.js

@@ -0,0 +1,54 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  Viewport,
+  DragImpact,
+  DimensionMap,
+  DraggableDimension,
+  DroppableId,
+  LiftEffect,
+} from '../../../types';
+import whatIsDraggedOver from '../../droppable/what-is-dragged-over';
+import { subtract } from '../../position';
+import getClientBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center';
+
+type Args = {|
+  impact: DragImpact,
+  draggable: DraggableDimension,
+  dimensions: DimensionMap,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  impact,
+  draggable,
+  dimensions,
+  viewport,
+  afterCritical,
+}: Args): Position => {
+  const { draggables, droppables } = dimensions;
+  const droppableId: ?DroppableId = whatIsDraggedOver(impact);
+  const destination: ?DroppableDimension = droppableId
+    ? droppables[droppableId]
+    : null;
+  const home: DroppableDimension = droppables[draggable.descriptor.droppableId];
+
+  const newClientCenter: Position = getClientBorderBoxCenter({
+    impact,
+    draggable,
+    draggables,
+    // if there is no destination, then we will be dropping back into the home
+    afterCritical,
+    droppable: destination || home,
+    viewport,
+  });
+
+  const offset: Position = subtract(
+    newClientCenter,
+    draggable.client.borderBox.center,
+  );
+
+  return offset;
+};

package/src/state/middleware/drop/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './drop-middleware';

package/src/state/middleware/focus.js

@@ -0,0 +1,42 @@
+// @flow
+import type { DropResult } from '../../types';
+import type { Action, Dispatch } from '../store-types';
+import type { FocusMarshal } from '../../view/use-focus-marshal/focus-marshal-types';
+
+export default (marshal: FocusMarshal) => {
+  let isWatching: boolean = false;
+
+  return () => (next: Dispatch) => (action: Action): any => {
+    if (action.type === 'INITIAL_PUBLISH') {
+      isWatching = true;
+
+      marshal.tryRecordFocus(action.payload.critical.draggable.id);
+      next(action);
+      marshal.tryRestoreFocusRecorded();
+      return;
+    }
+
+    next(action);
+
+    if (!isWatching) {
+      return;
+    }
+
+    if (action.type === 'FLUSH') {
+      isWatching = false;
+      marshal.tryRestoreFocusRecorded();
+      return;
+    }
+
+    if (action.type === 'DROP_COMPLETE') {
+      isWatching = false;
+      const result: DropResult = action.payload.completed.result;
+
+      // give focus to the combine target when combining
+      if (result.combine) {
+        marshal.tryShiftRecord(result.draggableId, result.combine.draggableId);
+      }
+      marshal.tryRestoreFocusRecorded();
+    }
+  };
+};