@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/dimension-marshal/dimension-marshal-types.js

@@ -0,0 +1,46 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  UpdateDroppableScrollArgs,
+  UpdateDroppableIsEnabledArgs,
+  UpdateDroppableIsCombineEnabledArgs,
+} from '../action-creators';
+import type {
+  DroppableId,
+  Critical,
+  DimensionMap,
+  LiftRequest,
+  Published,
+  Viewport,
+} from '../../types';
+
+export type StartPublishingResult = {|
+  critical: Critical,
+  dimensions: DimensionMap,
+  viewport: Viewport,
+|};
+
+export type DimensionMarshal = {|
+  // it is possible for a droppable to change whether it is enabled during a drag
+  updateDroppableIsEnabled: (id: DroppableId, isEnabled: boolean) => void,
+  // it is also possible to update whether combining is enabled
+  updateDroppableIsCombineEnabled: (
+    id: DroppableId,
+    isEnabled: boolean,
+  ) => void,
+  updateDroppableScroll: (id: DroppableId, newScroll: Position) => void,
+  scrollDroppable: (id: DroppableId, change: Position) => void,
+  // Entry
+  startPublishing: (request: LiftRequest) => StartPublishingResult,
+  stopPublishing: () => void,
+|};
+
+export type Callbacks = {|
+  collectionStarting: () => mixed,
+  publishWhileDragging: (args: Published) => mixed,
+  updateDroppableScroll: (args: UpdateDroppableScrollArgs) => mixed,
+  updateDroppableIsEnabled: (args: UpdateDroppableIsEnabledArgs) => mixed,
+  updateDroppableIsCombineEnabled: (
+    args: UpdateDroppableIsCombineEnabledArgs,
+  ) => mixed,
+|};

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

@@ -0,0 +1,218 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../invariant';
+import type {
+  DimensionMarshal,
+  Callbacks,
+  StartPublishingResult,
+} from './dimension-marshal-types';
+import createPublisher, {
+  type WhileDraggingPublisher,
+} from './while-dragging-publisher';
+import getInitialPublish from './get-initial-publish';
+import type {
+  Registry,
+  DroppableEntry,
+  DraggableEntry,
+  Subscriber,
+  Unsubscribe,
+  RegistryEvent,
+} from '../registry/registry-types';
+import type {
+  DroppableId,
+  DroppableDescriptor,
+  LiftRequest,
+  Critical,
+  DraggableDescriptor,
+} from '../../types';
+import { warning } from '../../dev-warning';
+
+type Collection = {|
+  critical: Critical,
+  unsubscribe: Unsubscribe,
+|};
+
+function shouldPublishUpdate(
+  registry: Registry,
+  dragging: DraggableDescriptor,
+  entry: DraggableEntry,
+): boolean {
+  // do not publish updates for the critical draggable
+  if (entry.descriptor.id === dragging.id) {
+    return false;
+  }
+  // do not publish updates for draggables that are not of a type that we care about
+  if (entry.descriptor.type !== dragging.type) {
+    return false;
+  }
+
+  const home: DroppableEntry = registry.droppable.getById(
+    entry.descriptor.droppableId,
+  );
+
+  if (home.descriptor.mode !== 'virtual') {
+    warning(`
+      You are attempting to add or remove a Draggable [id: ${entry.descriptor.id}]
+      while a drag is occurring. This is only supported for virtual lists.
+
+      See https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/virtual-lists.md
+    `);
+    return false;
+  }
+
+  return true;
+}
+
+export default (registry: Registry, callbacks: Callbacks) => {
+  let collection: ?Collection = null;
+
+  const publisher: WhileDraggingPublisher = createPublisher({
+    callbacks: {
+      publish: callbacks.publishWhileDragging,
+      collectionStarting: callbacks.collectionStarting,
+    },
+    registry,
+  });
+
+  const updateDroppableIsEnabled = (id: DroppableId, isEnabled: boolean) => {
+    invariant(
+      registry.droppable.exists(id),
+      `Cannot update is enabled flag of Droppable ${id} as it is not registered`,
+    );
+
+    // no need to update the application state if a collection is not occurring
+    if (!collection) {
+      return;
+    }
+
+    // At this point a non primary droppable dimension might not yet be published
+    // but may have its enabled state changed. For now we still publish this change
+    // and let the reducer exit early if it cannot find the dimension in the state.
+    callbacks.updateDroppableIsEnabled({ id, isEnabled });
+  };
+
+  const updateDroppableIsCombineEnabled = (
+    id: DroppableId,
+    isCombineEnabled: boolean,
+  ) => {
+    // no need to update
+    if (!collection) {
+      return;
+    }
+
+    invariant(
+      registry.droppable.exists(id),
+      `Cannot update isCombineEnabled flag of Droppable ${id} as it is not registered`,
+    );
+
+    callbacks.updateDroppableIsCombineEnabled({ id, isCombineEnabled });
+  };
+
+  const updateDroppableScroll = (id: DroppableId, newScroll: Position) => {
+    // no need to update the application state if a collection is not occurring
+    if (!collection) {
+      return;
+    }
+
+    invariant(
+      registry.droppable.exists(id),
+      `Cannot update the scroll on Droppable ${id} as it is not registered`,
+    );
+
+    callbacks.updateDroppableScroll({ id, newScroll });
+  };
+
+  const scrollDroppable = (id: DroppableId, change: Position) => {
+    if (!collection) {
+      return;
+    }
+    registry.droppable.getById(id).callbacks.scroll(change);
+  };
+
+  const stopPublishing = () => {
+    // This function can be called defensively
+    if (!collection) {
+      return;
+    }
+    // Stop any pending dom collections or publish
+    publisher.stop();
+
+    // Tell all droppables to stop watching scroll
+    // all good if they where not already listening
+    const home: DroppableDescriptor = collection.critical.droppable;
+    registry.droppable
+      .getAllByType(home.type)
+      .forEach((entry: DroppableEntry) => entry.callbacks.dragStopped());
+
+    // Unsubscribe from registry updates
+    collection.unsubscribe();
+    // Finally - clear our collection
+    collection = null;
+  };
+
+  const subscriber: Subscriber = (event: RegistryEvent) => {
+    invariant(
+      collection,
+      'Should only be subscribed when a collection is occurring',
+    );
+    // The dragging item can be add and removed when using a clone
+    // We do not publish updates for the critical item
+    const dragging: DraggableDescriptor = collection.critical.draggable;
+
+    if (event.type === 'ADDITION') {
+      if (shouldPublishUpdate(registry, dragging, event.value)) {
+        publisher.add(event.value);
+      }
+    }
+    if (event.type === 'REMOVAL') {
+      if (shouldPublishUpdate(registry, dragging, event.value)) {
+        publisher.remove(event.value);
+      }
+    }
+  };
+
+  const startPublishing = (request: LiftRequest): StartPublishingResult => {
+    invariant(
+      !collection,
+      'Cannot start capturing critical dimensions as there is already a collection',
+    );
+    const entry: DraggableEntry = registry.draggable.getById(
+      request.draggableId,
+    );
+    const home: DroppableEntry = registry.droppable.getById(
+      entry.descriptor.droppableId,
+    );
+
+    const critical: Critical = {
+      draggable: entry.descriptor,
+      droppable: home.descriptor,
+    };
+
+    const unsubscribe = registry.subscribe(subscriber);
+
+    collection = {
+      critical,
+      unsubscribe,
+    };
+
+    return getInitialPublish({
+      critical,
+      registry,
+      scrollOptions: request.scrollOptions,
+    });
+  };
+
+  const marshal: DimensionMarshal = {
+    // Droppable changes
+    updateDroppableIsEnabled,
+    updateDroppableIsCombineEnabled,
+    scrollDroppable,
+    updateDroppableScroll,
+
+    // Entry
+    startPublishing,
+    stopPublishing,
+  };
+
+  return marshal;
+};

package/src/state/dimension-marshal/get-initial-publish.js

@@ -0,0 +1,66 @@
+// @flow
+import type { Position } from 'css-box-model';
+import * as timings from '../../debug/timings';
+import type { StartPublishingResult } from './dimension-marshal-types';
+import type {
+  Registry,
+  DraggableEntry,
+  DroppableEntry,
+} from '../registry/registry-types';
+import { toDraggableMap, toDroppableMap } from '../dimension-structures';
+import type {
+  DroppableDescriptor,
+  DroppableDimension,
+  DraggableDimension,
+  DimensionMap,
+  ScrollOptions,
+  Critical,
+  Viewport,
+} from '../../types';
+import getViewport from '../../view/window/get-viewport';
+
+type Args = {|
+  critical: Critical,
+  scrollOptions: ScrollOptions,
+  registry: Registry,
+|};
+
+export default ({
+  critical,
+  scrollOptions,
+  registry,
+}: Args): StartPublishingResult => {
+  const timingKey: string = 'Initial collection from DOM';
+  timings.start(timingKey);
+  const viewport: Viewport = getViewport();
+  const windowScroll: Position = viewport.scroll.current;
+
+  const home: DroppableDescriptor = critical.droppable;
+
+  const droppables: DroppableDimension[] = registry.droppable
+    .getAllByType(home.type)
+    .map((entry: DroppableEntry): DroppableDimension =>
+      entry.callbacks.getDimensionAndWatchScroll(windowScroll, scrollOptions),
+    );
+
+  const draggables: DraggableDimension[] = registry.draggable
+    .getAllByType(critical.draggable.type)
+    .map((entry: DraggableEntry): DraggableDimension =>
+      entry.getDimension(windowScroll),
+    );
+
+  const dimensions: DimensionMap = {
+    draggables: toDraggableMap(draggables),
+    droppables: toDroppableMap(droppables),
+  };
+
+  timings.finish(timingKey);
+
+  const result: StartPublishingResult = {
+    dimensions,
+    critical,
+    viewport,
+  };
+
+  return result;
+};

package/src/state/dimension-marshal/while-dragging-publisher.js

@@ -0,0 +1,146 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DraggableId,
+  DroppableId,
+  DraggableDescriptor,
+  Published,
+  DraggableDimension,
+  DroppablePublish,
+  DroppableIdMap,
+  DraggableIdMap,
+} from '../../types';
+import type {
+  DroppableEntry,
+  Registry,
+  DraggableEntry,
+  DraggableEntryMap,
+} from '../registry/registry-types';
+import * as timings from '../../debug/timings';
+import { origin } from '../position';
+
+export type WhileDraggingPublisher = {|
+  add: (entry: DraggableEntry) => void,
+  remove: (entry: DraggableEntry) => void,
+  stop: () => void,
+|};
+
+type Staging = {|
+  additions: DraggableEntryMap,
+  removals: DraggableIdMap,
+  modified: DroppableIdMap,
+|};
+
+type Callbacks = {|
+  publish: (args: Published) => mixed,
+  collectionStarting: () => mixed,
+|};
+
+type Args = {|
+  registry: Registry,
+  callbacks: Callbacks,
+|};
+
+const clean = (): Staging => ({
+  additions: {},
+  removals: {},
+  modified: {},
+});
+
+const timingKey: string = 'Publish collection from DOM';
+
+export default function createPublisher({
+  registry,
+  callbacks,
+}: Args): WhileDraggingPublisher {
+  let staging: Staging = clean();
+  let frameId: ?AnimationFrameID = null;
+
+  const collect = () => {
+    if (frameId) {
+      return;
+    }
+
+    callbacks.collectionStarting();
+    frameId = requestAnimationFrame(() => {
+      frameId = null;
+      timings.start(timingKey);
+
+      const { additions, removals, modified } = staging;
+
+      const added: DraggableDimension[] = Object.keys(additions)
+        .map(
+          // Using the origin as the window scroll. This will be adjusted when processing the published values
+          (id: DraggableId): DraggableDimension =>
+            registry.draggable.getById(id).getDimension(origin),
+        )
+        // Dimensions are not guarenteed to be ordered in the same order as keys
+        // So we need to sort them so they are in the correct order
+        .sort(
+          (a: DraggableDimension, b: DraggableDimension): number =>
+            a.descriptor.index - b.descriptor.index,
+        );
+
+      const updated: DroppablePublish[] = Object.keys(modified).map(
+        (id: DroppableId) => {
+          const entry: DroppableEntry = registry.droppable.getById(id);
+
+          const scroll: Position = entry.callbacks.getScrollWhileDragging();
+          return {
+            droppableId: id,
+            scroll,
+          };
+        },
+      );
+
+      const result: Published = {
+        additions: added,
+        removals: Object.keys(removals),
+        modified: updated,
+      };
+
+      staging = clean();
+
+      timings.finish(timingKey);
+      callbacks.publish(result);
+    });
+  };
+
+  const add = (entry: DraggableEntry) => {
+    const id: DraggableId = entry.descriptor.id;
+    staging.additions[id] = entry;
+    staging.modified[entry.descriptor.droppableId] = true;
+
+    if (staging.removals[id]) {
+      delete staging.removals[id];
+    }
+    collect();
+  };
+
+  const remove = (entry: DraggableEntry) => {
+    const descriptor: DraggableDescriptor = entry.descriptor;
+    staging.removals[descriptor.id] = true;
+    staging.modified[descriptor.droppableId] = true;
+
+    if (staging.additions[descriptor.id]) {
+      delete staging.additions[descriptor.id];
+    }
+    collect();
+  };
+
+  const stop = () => {
+    if (!frameId) {
+      return;
+    }
+
+    cancelAnimationFrame(frameId);
+    frameId = null;
+    staging = clean();
+  };
+
+  return {
+    add,
+    remove,
+    stop,
+  };
+}

package/src/state/dimension-structures.js

@@ -0,0 +1,35 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import { values } from '../native-with-fallback';
+import type {
+  DroppableDimension,
+  DroppableDimensionMap,
+  DraggableDimension,
+  DraggableDimensionMap,
+} from '../types';
+
+export const toDroppableMap = memoizeOne(
+  (droppables: DroppableDimension[]): DroppableDimensionMap =>
+    droppables.reduce((previous, current) => {
+      previous[current.descriptor.id] = current;
+      return previous;
+    }, {}),
+);
+
+export const toDraggableMap = memoizeOne(
+  (draggables: DraggableDimension[]): DraggableDimensionMap =>
+    draggables.reduce((previous, current) => {
+      previous[current.descriptor.id] = current;
+      return previous;
+    }, {}),
+);
+
+export const toDroppableList = memoizeOne(
+  (droppables: DroppableDimensionMap): DroppableDimension[] =>
+    values(droppables),
+);
+
+export const toDraggableList = memoizeOne(
+  (draggables: DraggableDimensionMap): DraggableDimension[] =>
+    values(draggables),
+);

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

@@ -0,0 +1,101 @@
+// @flow
+import { type BoxModel, type Position } from 'css-box-model';
+import type {
+  Axis,
+  DroppableDimension,
+  DroppableDescriptor,
+  Scrollable,
+  DroppableSubject,
+  ScrollSize,
+} from '../../types';
+import { vertical, horizontal } from '../axis';
+import { origin } from '../position';
+import getMaxScroll from '../get-max-scroll';
+import getSubject from './util/get-subject';
+
+export type Closest = {|
+  client: BoxModel,
+  page: BoxModel,
+  scroll: Position,
+  scrollSize: ScrollSize,
+  shouldClipSubject: boolean,
+|};
+
+type Args = {|
+  descriptor: DroppableDescriptor,
+  isEnabled: boolean,
+  isCombineEnabled: boolean,
+  isFixedOnPage: boolean,
+  direction: 'vertical' | 'horizontal',
+  client: BoxModel,
+  // is null when in a fixed container
+  page: BoxModel,
+  closest?: ?Closest,
+|};
+
+export default ({
+  descriptor,
+  isEnabled,
+  isCombineEnabled,
+  isFixedOnPage,
+  direction,
+  client,
+  page,
+  closest,
+}: Args): DroppableDimension => {
+  const frame: ?Scrollable = (() => {
+    if (!closest) {
+      return null;
+    }
+
+    const { scrollSize, client: frameClient } = closest;
+
+    // scrollHeight and scrollWidth are based on the padding box
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
+    const maxScroll: Position = getMaxScroll({
+      scrollHeight: scrollSize.scrollHeight,
+      scrollWidth: scrollSize.scrollWidth,
+      height: frameClient.paddingBox.height,
+      width: frameClient.paddingBox.width,
+    });
+
+    return {
+      pageMarginBox: closest.page.marginBox,
+      frameClient,
+      scrollSize,
+      shouldClipSubject: closest.shouldClipSubject,
+      scroll: {
+        initial: closest.scroll,
+        current: closest.scroll,
+        max: maxScroll,
+        diff: {
+          value: origin,
+          displacement: origin,
+        },
+      },
+    };
+  })();
+
+  const axis: Axis = direction === 'vertical' ? vertical : horizontal;
+
+  const subject: DroppableSubject = getSubject({
+    page,
+    withPlaceholder: null,
+    axis,
+    frame,
+  });
+
+  const dimension: DroppableDimension = {
+    descriptor,
+    isCombineEnabled,
+    isFixedOnPage,
+    axis,
+    isEnabled,
+    client,
+    page,
+    frame,
+    subject,
+  };
+
+  return dimension;
+};

package/src/state/droppable/is-home-of.js

@@ -0,0 +1,7 @@
+// @flow
+import type { DraggableDimension, DroppableDimension } from '../../types';
+
+export default (
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+): boolean => draggable.descriptor.droppableId === destination.descriptor.id;

package/src/state/droppable/scroll-droppable.js

@@ -0,0 +1,53 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../invariant';
+import type {
+  DroppableDimension,
+  Scrollable,
+  DroppableSubject,
+} from '../../types';
+import { negate, subtract } from '../position';
+import getSubject from './util/get-subject';
+
+export default (
+  droppable: DroppableDimension,
+  newScroll: Position,
+): DroppableDimension => {
+  invariant(droppable.frame);
+  const scrollable: Scrollable = droppable.frame;
+
+  const scrollDiff: Position = subtract(newScroll, scrollable.scroll.initial);
+  // a positive scroll difference leads to a negative displacement
+  // (scrolling down pulls an item upwards)
+  const scrollDisplacement: Position = negate(scrollDiff);
+
+  // Sometimes it is possible to scroll beyond the max point.
+  // This can occur when scrolling a foreign list that now has a placeholder.
+
+  const frame: Scrollable = {
+    ...scrollable,
+    scroll: {
+      initial: scrollable.scroll.initial,
+      current: newScroll,
+      diff: {
+        value: scrollDiff,
+        displacement: scrollDisplacement,
+      },
+      // TODO: rename 'softMax?'
+      max: scrollable.scroll.max,
+    },
+  };
+
+  const subject: DroppableSubject = getSubject({
+    page: droppable.subject.page,
+    withPlaceholder: droppable.subject.withPlaceholder,
+    axis: droppable.axis,
+    frame,
+  });
+  const result: DroppableDimension = {
+    ...droppable,
+    frame,
+    subject,
+  };
+  return result;
+};

package/src/state/droppable/should-use-placeholder.js

@@ -0,0 +1,7 @@
+// @flow
+import type { DraggableDescriptor, DragImpact } from '../../types';
+import whatIsDraggedOver from './what-is-dragged-over';
+
+// use placeholder if dragged over
+export default (descriptor: DraggableDescriptor, impact: DragImpact): boolean =>
+  whatIsDraggedOver(impact) === descriptor.droppableId;

package/src/state/droppable/util/clip.js

@@ -0,0 +1,17 @@
+// @flow
+import { getRect, type Rect, type Spacing } from 'css-box-model';
+
+export default (frame: Spacing, subject: Spacing): ?Rect => {
+  const result: Rect = getRect({
+    top: Math.max(subject.top, frame.top),
+    right: Math.min(subject.right, frame.right),
+    bottom: Math.min(subject.bottom, frame.bottom),
+    left: Math.max(subject.left, frame.left),
+  });
+
+  if (result.width <= 0 || result.height <= 0) {
+    return null;
+  }
+
+  return result;
+};