@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/middleware/lift.js

@@ -0,0 +1,66 @@
+// @flow
+import { invariant } from '../../invariant';
+import type { DimensionMarshal } from '../dimension-marshal/dimension-marshal-types';
+import type { State, ScrollOptions, LiftRequest } from '../../types';
+import type { MiddlewareStore, Action, Dispatch } from '../store-types';
+import {
+  completeDrop,
+  initialPublish,
+  flush,
+  beforeInitialCapture,
+} from '../action-creators';
+import validateDimensions from './util/validate-dimensions';
+
+export default (marshal: DimensionMarshal) => ({
+  getState,
+  dispatch,
+}: MiddlewareStore) => (next: Dispatch) => (action: Action): any => {
+  if (action.type !== 'LIFT') {
+    next(action);
+    return;
+  }
+  const { id, clientSelection, movementMode } = action.payload;
+  const initial: State = getState();
+
+  // flush dropping animation if needed
+  // this can change the descriptor of the dragging item
+  // Will call the onDragEnd responders
+
+  if (initial.phase === 'DROP_ANIMATING') {
+    dispatch(completeDrop({ completed: initial.completed }));
+  }
+
+  invariant(getState().phase === 'IDLE', 'Unexpected phase to start a drag');
+
+  // Removing any placeholders before we capture any starting dimensions
+  dispatch(flush());
+
+  // Let consumers know we are just about to publish
+  // We are only publishing a small amount of information as
+  // things might change as a result of the onBeforeCapture callback
+  dispatch(beforeInitialCapture({ draggableId: id, movementMode }));
+
+  // will communicate with the marshal to start requesting dimensions
+  const scrollOptions: ScrollOptions = {
+    shouldPublishImmediately: movementMode === 'SNAP',
+  };
+  const request: LiftRequest = {
+    draggableId: id,
+    scrollOptions,
+  };
+  // Let's get the marshal started!
+  const { critical, dimensions, viewport } = marshal.startPublishing(request);
+
+  validateDimensions(critical, dimensions);
+
+  // Okay, we are good to start dragging now
+  dispatch(
+    initialPublish({
+      critical,
+      dimensions,
+      clientSelection,
+      movementMode,
+      viewport,
+    }),
+  );
+};

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

@@ -0,0 +1,37 @@
+// @flow
+import { drop } from '../action-creators';
+import type { State } from '../../types';
+import type { MiddlewareStore, Dispatch, Action } from '../store-types';
+
+export default (store: MiddlewareStore) => (next: Dispatch) => (
+  action: Action,
+): any => {
+  // Always let the action go through first
+  next(action);
+
+  if (action.type !== 'PUBLISH_WHILE_DRAGGING') {
+    return;
+  }
+
+  // A bulk replace occurred - check if
+  // 1. there is a pending drop
+  // 2. that the pending drop is no longer waiting
+
+  const postActionState: State = store.getState();
+
+  // no pending drop after the publish
+  if (postActionState.phase !== 'DROP_PENDING') {
+    return;
+  }
+
+  // the pending drop is still waiting for completion
+  if (postActionState.isWaiting) {
+    return;
+  }
+
+  store.dispatch(
+    drop({
+      reason: postActionState.reason,
+    }),
+  );
+};

package/src/state/middleware/responders/async-marshal.js

@@ -0,0 +1,55 @@
+// @flow
+import { invariant } from '../../../invariant';
+import { findIndex } from '../../../native-with-fallback';
+
+type Entry = {|
+  timerId: TimeoutID,
+  callback: Function,
+|};
+
+export type AsyncMarshal = {|
+  add: (fn: Function) => void,
+  flush: () => void,
+|};
+
+export default () => {
+  const entries: Entry[] = [];
+
+  const execute = (timerId: TimeoutID) => {
+    const index: number = findIndex(
+      entries,
+      (item: Entry): boolean => item.timerId === timerId,
+    );
+    invariant(index !== -1, 'Could not find timer');
+    // delete in place
+    const [entry] = entries.splice(index, 1);
+    entry.callback();
+  };
+
+  const add = (fn: Function) => {
+    const timerId: TimeoutID = setTimeout(() => execute(timerId));
+    const entry: Entry = {
+      timerId,
+      callback: fn,
+    };
+    entries.push(entry);
+  };
+
+  const flush = () => {
+    // nothing to flush
+    if (!entries.length) {
+      return;
+    }
+
+    const shallow: Entry[] = [...entries];
+    // clearing entries in case a callback adds some more callbacks
+    entries.length = 0;
+
+    shallow.forEach((entry: Entry) => {
+      clearTimeout(entry.timerId);
+      entry.callback();
+    });
+  };
+
+  return { add, flush };
+};

package/src/state/middleware/responders/expiring-announce.js

@@ -0,0 +1,44 @@
+// @flow
+import type { Announce } from '../../../types';
+import { warning } from '../../../dev-warning';
+
+export type ExpiringAnnounce = Announce & {
+  wasCalled: () => boolean,
+};
+
+export default (announce: Announce): ExpiringAnnounce => {
+  let wasCalled: boolean = false;
+  let isExpired: boolean = false;
+
+  // not allowing async announcements
+  const timeoutId: TimeoutID = setTimeout(() => {
+    isExpired = true;
+  });
+
+  const result = (message: string): void => {
+    if (wasCalled) {
+      warning('Announcement already made. Not making a second announcement');
+
+      return;
+    }
+
+    if (isExpired) {
+      warning(`
+        Announcements cannot be made asynchronously.
+        Default message has already been announced.
+      `);
+      return;
+    }
+
+    wasCalled = true;
+    announce(message);
+    clearTimeout(timeoutId);
+  };
+
+  // getter for isExpired
+  // using this technique so that a consumer cannot
+  // set the isExpired or wasCalled flags
+  result.wasCalled = (): boolean => wasCalled;
+
+  return result;
+};

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

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

package/src/state/middleware/responders/is-equal.js

@@ -0,0 +1,57 @@
+// @flow
+import type { Critical, DraggableLocation, Combine } from '../../../types';
+
+export const areLocationsEqual = (
+  first: ?DraggableLocation,
+  second: ?DraggableLocation,
+): boolean => {
+  // if both are null - we are equal
+  if (first == null && second == null) {
+    return true;
+  }
+
+  // if one is null - then they are not equal
+  if (first == null || second == null) {
+    return false;
+  }
+
+  // compare their actual values
+  return (
+    first.droppableId === second.droppableId && first.index === second.index
+  );
+};
+
+export const isCombineEqual = (first: ?Combine, second: ?Combine): boolean => {
+  // if both are null - we are equal
+  if (first == null && second == null) {
+    return true;
+  }
+
+  // only one is null
+  if (first == null || second == null) {
+    return false;
+  }
+
+  return (
+    first.draggableId === second.draggableId &&
+    first.droppableId === second.droppableId
+  );
+};
+
+export const isCriticalEqual = (first: Critical, second: Critical): boolean => {
+  if (first === second) {
+    return true;
+  }
+
+  const isDraggableEqual: boolean =
+    first.draggable.id === second.draggable.id &&
+    first.draggable.droppableId === second.draggable.droppableId &&
+    first.draggable.type === second.draggable.type &&
+    first.draggable.index === second.draggable.index;
+
+  const isDroppableEqual: boolean =
+    first.droppable.id === second.droppable.id &&
+    first.droppable.type === second.droppable.type;
+
+  return isDraggableEqual && isDroppableEqual;
+};

package/src/state/middleware/responders/publisher.js

@@ -0,0 +1,253 @@
+// @flow
+import { invariant } from '../../../invariant';
+import messagePreset from '../../../screen-reader-message-preset';
+import * as timings from '../../../debug/timings';
+import getExpiringAnnounce, {
+  type ExpiringAnnounce,
+} from './expiring-announce';
+import getAsyncMarshal, { type AsyncMarshal } from './async-marshal';
+import type {
+  DropResult,
+  Responders,
+  ResponderProvided,
+  Critical,
+  BeforeCapture,
+  DragImpact,
+  DraggableLocation,
+  Combine,
+  DragStart,
+  Announce,
+  DragUpdate,
+  MovementMode,
+  DraggableId,
+  OnBeforeCaptureResponder,
+  OnBeforeDragStartResponder,
+  OnDragStartResponder,
+  OnDragUpdateResponder,
+  OnDragEndResponder,
+} from '../../../types';
+import { isCombineEqual, isCriticalEqual, areLocationsEqual } from './is-equal';
+import { tryGetDestination, tryGetCombine } from '../../get-impact-location';
+
+const withTimings = (key: string, fn: Function) => {
+  timings.start(key);
+  fn();
+  timings.finish(key);
+};
+
+const getDragStart = (critical: Critical, mode: MovementMode): DragStart => ({
+  draggableId: critical.draggable.id,
+  type: critical.droppable.type,
+  source: {
+    droppableId: critical.droppable.id,
+    index: critical.draggable.index,
+  },
+  mode,
+});
+
+type AnyPrimaryResponderFn =
+  | OnDragStartResponder
+  | OnDragUpdateResponder
+  | OnDragEndResponder;
+type AnyResponderData = DragStart | DragUpdate | DropResult;
+
+const execute = (
+  responder: ?AnyPrimaryResponderFn,
+  data: AnyResponderData,
+  announce: Announce,
+  getDefaultMessage: (data: any) => string,
+) => {
+  if (!responder) {
+    announce(getDefaultMessage(data));
+    return;
+  }
+
+  const willExpire: ExpiringAnnounce = getExpiringAnnounce(announce);
+  const provided: ResponderProvided = {
+    announce: willExpire,
+  };
+
+  // Casting because we are not validating which data type is going into which responder
+  responder((data: any), provided);
+
+  if (!willExpire.wasCalled()) {
+    announce(getDefaultMessage(data));
+  }
+};
+
+type WhileDragging = {|
+  mode: MovementMode,
+  lastCritical: Critical,
+  lastCombine: ?Combine,
+  lastLocation: ?DraggableLocation,
+|};
+
+export default (getResponders: () => Responders, announce: Announce) => {
+  const asyncMarshal: AsyncMarshal = getAsyncMarshal();
+  let dragging: ?WhileDragging = null;
+
+  const beforeCapture = (draggableId: DraggableId, mode: MovementMode) => {
+    invariant(
+      !dragging,
+      'Cannot fire onBeforeCapture as a drag start has already been published',
+    );
+    withTimings('onBeforeCapture', () => {
+      // No use of screen reader for this responder
+      const fn: ?OnBeforeCaptureResponder = getResponders().onBeforeCapture;
+      if (fn) {
+        const before: BeforeCapture = {
+          draggableId,
+          mode,
+        };
+        fn(before);
+      }
+    });
+  };
+
+  const beforeStart = (critical: Critical, mode: MovementMode) => {
+    invariant(
+      !dragging,
+      'Cannot fire onBeforeDragStart as a drag start has already been published',
+    );
+    withTimings('onBeforeDragStart', () => {
+      // No use of screen reader for this responder
+      const fn: ?OnBeforeDragStartResponder = getResponders().onBeforeDragStart;
+      if (fn) {
+        fn(getDragStart(critical, mode));
+      }
+    });
+  };
+
+  const start = (critical: Critical, mode: MovementMode) => {
+    invariant(
+      !dragging,
+      'Cannot fire onBeforeDragStart as a drag start has already been published',
+    );
+    const data: DragStart = getDragStart(critical, mode);
+    dragging = {
+      mode,
+      lastCritical: critical,
+      lastLocation: data.source,
+      lastCombine: null,
+    };
+
+    // we will flush this frame if we receive any responder updates
+    asyncMarshal.add(() => {
+      withTimings('onDragStart', () =>
+        execute(
+          getResponders().onDragStart,
+          data,
+          announce,
+          messagePreset.onDragStart,
+        ),
+      );
+    });
+  };
+
+  // Passing in the critical location again as it can change during a drag
+  const update = (critical: Critical, impact: DragImpact) => {
+    const location: ?DraggableLocation = tryGetDestination(impact);
+    const combine: ?Combine = tryGetCombine(impact);
+
+    invariant(
+      dragging,
+      'Cannot fire onDragMove when onDragStart has not been called',
+    );
+
+    // Has the critical changed? Will result in a source change
+    const hasCriticalChanged: boolean = !isCriticalEqual(
+      critical,
+      dragging.lastCritical,
+    );
+    if (hasCriticalChanged) {
+      dragging.lastCritical = critical;
+    }
+
+    // Has the location changed? Will result in a destination change
+    const hasLocationChanged: boolean = !areLocationsEqual(
+      dragging.lastLocation,
+      location,
+    );
+    if (hasLocationChanged) {
+      dragging.lastLocation = location;
+    }
+    const hasGroupingChanged: boolean = !isCombineEqual(
+      dragging.lastCombine,
+      combine,
+    );
+    if (hasGroupingChanged) {
+      dragging.lastCombine = combine;
+    }
+
+    // Nothing has changed - no update needed
+    if (!hasCriticalChanged && !hasLocationChanged && !hasGroupingChanged) {
+      return;
+    }
+
+    const data: DragUpdate = {
+      ...getDragStart(critical, dragging.mode),
+      combine,
+      destination: location,
+    };
+
+    asyncMarshal.add(() => {
+      withTimings('onDragUpdate', () =>
+        execute(
+          getResponders().onDragUpdate,
+          data,
+          announce,
+          messagePreset.onDragUpdate,
+        ),
+      );
+    });
+  };
+
+  const flush = () => {
+    invariant(dragging, 'Can only flush responders while dragging');
+    asyncMarshal.flush();
+  };
+
+  const drop = (result: DropResult) => {
+    invariant(
+      dragging,
+      'Cannot fire onDragEnd when there is no matching onDragStart',
+    );
+    dragging = null;
+    // not adding to frame marshal - we want this to be done in the same render pass
+    // we also want the consumers reorder logic to be in the same render pass
+    withTimings('onDragEnd', () =>
+      execute(
+        getResponders().onDragEnd,
+        result,
+        announce,
+        messagePreset.onDragEnd,
+      ),
+    );
+  };
+
+  // A non user initiated cancel
+  const abort = () => {
+    // aborting can happen defensively
+    if (!dragging) {
+      return;
+    }
+
+    const result: DropResult = {
+      ...getDragStart(dragging.lastCritical, dragging.mode),
+      combine: null,
+      destination: null,
+      reason: 'CANCEL',
+    };
+    drop(result);
+  };
+
+  return {
+    beforeCapture,
+    beforeStart,
+    start,
+    update,
+    flush,
+    drop,
+    abort,
+  };
+};

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

@@ -0,0 +1,75 @@
+// @flow
+import getPublisher from './publisher';
+import type {
+  State,
+  DropResult,
+  Responders,
+  Critical,
+  Announce,
+} from '../../../types';
+import type {
+  Action,
+  Middleware,
+  MiddlewareStore,
+  Dispatch,
+} from '../../store-types';
+
+export default (
+  getResponders: () => Responders,
+  announce: Announce,
+): Middleware => {
+  const publisher = getPublisher(
+    (getResponders: () => Responders),
+    (announce: Announce),
+  );
+
+  return (store: MiddlewareStore) => (next: Dispatch) => (
+    action: Action,
+  ): any => {
+    if (action.type === 'BEFORE_INITIAL_CAPTURE') {
+      publisher.beforeCapture(
+        action.payload.draggableId,
+        action.payload.movementMode,
+      );
+      return;
+    }
+
+    if (action.type === 'INITIAL_PUBLISH') {
+      const critical: Critical = action.payload.critical;
+      publisher.beforeStart(critical, action.payload.movementMode);
+      next(action);
+      publisher.start(critical, action.payload.movementMode);
+      return;
+    }
+
+    // Drag end
+    if (action.type === 'DROP_COMPLETE') {
+      // it is important that we use the result and not the last impact
+      // the last impact might be different to the result for visual reasons
+      const result: DropResult = action.payload.completed.result;
+      // flushing all pending responders before snapshots are updated
+      publisher.flush();
+      next(action);
+      publisher.drop(result);
+      return;
+    }
+
+    // All other responders can fire after we have updated our connected components
+    next(action);
+
+    // Drag state resetting - need to check if
+    // we should fire a onDragEnd responder
+    if (action.type === 'FLUSH') {
+      publisher.abort();
+      return;
+    }
+
+    // ## Perform drag updates
+    // impact of action has already been reduced
+
+    const state: State = store.getState();
+    if (state.phase === 'DRAGGING') {
+      publisher.update(state.critical, state.impact);
+    }
+  };
+};

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

@@ -0,0 +1,31 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { moveByWindowScroll } from '../action-creators';
+import type { MiddlewareStore, Action, Dispatch } from '../store-types';
+import getScrollListener from '../../view/scroll-listener';
+
+// TODO: this is taken from auto-scroll. Let's make it a util
+const shouldEnd = (action: Action): boolean =>
+  action.type === 'DROP_COMPLETE' ||
+  action.type === 'DROP_ANIMATE' ||
+  action.type === 'FLUSH';
+
+export default (store: MiddlewareStore) => {
+  const listener = getScrollListener({
+    onWindowScroll: (newScroll: Position) => {
+      store.dispatch(moveByWindowScroll({ newScroll }));
+    },
+  });
+
+  return (next: Dispatch) => (action: Action): any => {
+    if (!listener.isActive() && action.type === 'INITIAL_PUBLISH') {
+      listener.start();
+    }
+
+    if (listener.isActive() && shouldEnd(action)) {
+      listener.stop();
+    }
+
+    next(action);
+  };
+};

package/src/state/middleware/style.js

@@ -0,0 +1,22 @@
+// @flow
+import type { Action, Dispatch } from '../store-types';
+import type { StyleMarshal } from '../../view/use-style-marshal/style-marshal-types';
+
+export default (marshal: StyleMarshal) => () => (next: Dispatch) => (
+  action: Action,
+): any => {
+  if (action.type === 'INITIAL_PUBLISH') {
+    marshal.dragging();
+  }
+
+  if (action.type === 'DROP_ANIMATE') {
+    marshal.dropping(action.payload.completed.result.reason);
+  }
+
+  // this will clear any styles immediately before a reorder
+  if (action.type === 'FLUSH' || action.type === 'DROP_COMPLETE') {
+    marshal.resting();
+  }
+
+  next(action);
+};