moving forward

src/debug/timings.js

@@ -11,7 +11,7 @@ const flag: string = '__react-beautiful-dnd-debug-timings-hook__';
 const isTimingsEnabled = (): boolean => Boolean(window[flag]);
 
 // Debug: uncomment to enable
-window[flag] = true;
+// window[flag] = true;
 
 export const start = (key: string) => {
   if (!isTimingsEnabled()) {

src/state/action-creators.js

@@ -11,7 +11,7 @@ import type {
   DimensionMap,
   DropReason,
   PendingDrop,
-  Publish,
+  PublishChange,
 } from '../types';
 
 export type LiftArgs = {|
@@ -51,12 +51,12 @@ export const initialPublish = (args: InitialPublishArgs): InitialPublishAction =
   payload: args,
 });
 
-export type PublishAction = {|
+export type PublishChangeAction = {|
   type: 'PUBLISH',
-  payload: Publish
+  payload: PublishChange
 |}
 
-export const publish = (args: Publish): PublishAction => ({
+export const publishChange = (args: PublishChange): PublishChangeAction => ({
   type: 'PUBLISH',
   payload: args,
 });
@@ -250,7 +250,7 @@ export const dropAnimationFinished = (): DropAnimationFinishedAction => ({
 export type Action =
   LiftAction |
   InitialPublishAction |
-  PublishAction |
+  PublishChangeAction |
   CollectionStartingAction |
   UpdateDroppableScrollAction |
   UpdateDroppableIsEnabledAction |

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

@@ -17,7 +17,7 @@ import type {
   Critical,
   DimensionMap,
   LiftRequest,
-  Publish,
+  PublishChange,
 } from '../../types';
 
 export type GetDraggableDimensionFn = (
@@ -109,7 +109,7 @@ export type DimensionMarshal = {|
 |}
 
 export type Callbacks = {|
-  publish: (args: Publish) => void,
+  publishChange: (args: PublishChange) => void,
   updateDroppableScroll: (args: UpdateDroppableScrollArgs) => void,
   updateDroppableIsEnabled: (args: UpdateDroppableIsEnabledArgs) => void,
   collectionStarting: () => void,

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

@@ -31,33 +31,6 @@ import type {
 } from './dimension-marshal-types';
 
 export default (callbacks: Callbacks) => {
-  const advancedUsageWarning = (() => {
-    let hasAnnounced: boolean = false;
-
-    return () => {
-      if (hasAnnounced) {
-        return;
-      }
-
-      hasAnnounced = true;
-
-      if (process.env.NODE_ENV !== 'production') {
-        console.warn(`
-          Advanced usage warning: you are triggering a recollection of dimensions during a drag.
-          This an advanced feature used to support dynamic interactions such as lazy loading lists.
-          You might not have intended to trigger this collection. A collection will be triggered
-          when:
-
-          - A Draggable or Droppable is added or removed
-          - Draggable: 'id' or 'index' change
-          - Droppable: 'id' change ('type' change is not permitted during a drag)
-
-          (This warning will be stripped in production)
-        `.trim());
-      }
-    };
-  })();
-
   const entries: Entries = {
     droppables: {},
     draggables: {},
@@ -66,7 +39,7 @@ export default (callbacks: Callbacks) => {
 
   const publisher: Publisher = createPublisher({
     callbacks: {
-      publish: callbacks.publish,
+      publishChange: callbacks.publishChange,
       collectionStarting: callbacks.collectionStarting,
     },
     getProvided: (): Provided => {

src/state/dimension-marshal/publisher.js

@@ -3,11 +3,9 @@ import type { Position } from 'css-box-model';
 import type {
   DraggableId,
   DroppableId,
-  Publish,
+  PublishChange,
   DraggableDimension,
   DroppableDimension,
-  DraggableDimensionMap,
-  DroppableDimensionMap,
 } from '../../types';
 import type { Collection, Entries } from './dimension-marshal-types';
 import * as timings from '../../debug/timings';
@@ -39,7 +37,7 @@ export type Provided = {|
 |}
 
 type Callbacks = {|
-  publish: (args: Publish) => void,
+  publishChange: (args: PublishChange) => void,
   collectionStarting: () => void,
 |}
 
@@ -55,6 +53,37 @@ const getEmptyMap = (): Map => ({
 
 const timingKey: string = 'Publish collection from DOM';
 
+const advancedUsageWarning = (() => {
+  // noop for production
+  if (process.env.NODE_ENV === 'production') {
+    return () => { };
+  }
+
+  let hasAnnounced: boolean = false;
+
+  return () => {
+    if (hasAnnounced) {
+      return;
+    }
+
+    hasAnnounced = true;
+
+    console.warn(`
+      Advanced usage warning: you are adding or removing a dimension during a drag
+      This an advanced feature used to support dynamic interactions such as lazy loading lists.
+
+      Keep in mind the following restrictions:
+
+      - Draggable's can only be added to Droppable's that are scroll containers
+      - Adding a Droppable cannot impact the placement of other Droppables
+        (it cannot push a Droppable on the page)
+
+      (This warning will be stripped in production builds)
+    `.trim()
+    );
+  };
+})();
+
 export default ({
   getProvided,
   callbacks,
@@ -69,6 +98,8 @@ export default ({
   };
 
   const collect = () => {
+    advancedUsageWarning();
+
     if (frameId) {
       return;
     }
@@ -81,31 +112,26 @@ export default ({
       const { entries, collection } = getProvided();
       const windowScroll: Position = collection.initialWindowScroll;
 
-      const draggables: DraggableDimensionMap = Object.keys(additions.draggables)
+      const draggables: DraggableDimension[] = Object.keys(additions.draggables)
         .map((id: DraggableId): DraggableDimension =>
           // TODO
           entries.draggables[id].getDimension(windowScroll, { x: 0, y: 0 })
-        )
-        .reduce((previous, current) => {
-          previous[current.descriptor.id] = current;
-          return previous;
-        }, {});
+        );
 
-      const droppables: DroppableDimensionMap = Object.keys(additions.droppables)
+      const droppables: DroppableDimension[] = Object.keys(additions.droppables)
         .map((id: DroppableId): DroppableDimension =>
           entries.droppables[id].callbacks.getDimensionAndWatchScroll(
             // TODO: need to figure out diff from start?
             windowScroll,
             collection.scrollOptions
           )
-        )
-        .reduce((previous, current) => {
-          previous[current.descriptor.id] = current;
-          return previous;
-        }, {});
-
-      const result: Publish = {
-        additions: { draggables, droppables },
+        );
+
+      const result: PublishChange = {
+        additions: {
+          draggables,
+          droppables,
+        },
         removals: {
           draggables: Object.keys(removals.draggables),
           droppables: Object.keys(removals.droppables),
@@ -115,7 +141,7 @@ export default ({
       reset();
 
       timings.finish(timingKey);
-      callbacks.publish(result);
+      callbacks.publishChange(result);
     });
   };
 

src/state/publish/get-dimension-map.js → src/state/publish-change/get-dimension-map.js

@@ -9,19 +9,21 @@ import {
 import type {
   Axis,
   DimensionMap,
-  Publish,
+  PublishChange,
   DraggableId,
   DroppableId,
   DraggableDimension,
   DroppableDimension,
   DraggableDimensionMap,
+  DroppableDimensionMap,
 } from '../../types';
+import { toDroppableMap, toDraggableMap } from '../to-map';
 import { patch } from '../position';
 import * as timings from '../../debug/timings';
 
 type Args = {|
   existing: DimensionMap,
-  publish: Publish,
+  publishChange: PublishChange,
   windowScroll: Position,
 |}
 
@@ -77,16 +79,17 @@ const timingKey: string = 'Dynamic dimension change processing (just math)';
 
 export default ({
   existing,
-  publish,
+  publishChange,
   windowScroll,
 }: Args): DimensionMap => {
   timings.start(timingKey);
-  const partitioned: Partitioned = Object.keys(publish.additions.draggables)
-    .map((id: DraggableId): DraggableDimension => publish.additions.draggables[id])
+  const addedDroppables: DroppableDimensionMap = toDroppableMap(publishChange.additions.droppables);
+  const addedDraggables: DraggableDimensionMap = toDraggableMap(publishChange.additions.draggables);
+
+  const partitioned: Partitioned = publishChange.additions.draggables
     .reduce((previous: Partitioned, draggable: DraggableDimension) => {
       const droppableId: DroppableId = draggable.descriptor.droppableId;
-      const isInNewDroppable: boolean =
-        Boolean(publish.additions.droppables[droppableId]);
+      const isInNewDroppable: boolean = Boolean(addedDroppables[droppableId]);
 
       if (isInNewDroppable) {
         previous.inNewDroppable.push(draggable);
@@ -116,7 +119,7 @@ export default ({
   });
 
   // Draggable removals
-  publish.removals.draggables.forEach((id: DraggableId) => {
+  publishChange.removals.draggables.forEach((id: DraggableId) => {
     // Pull draggable dimension from existing dimensions
     const draggable: ?DraggableDimension = existing.draggables[id];
     invariant(draggable, `Cannot find Draggable ${id}`);
@@ -195,21 +198,21 @@ export default ({
   const dimensions: DimensionMap = {
     draggables: {
       ...shifted,
-      ...publish.additions.draggables,
+      ...addedDraggables,
     },
     droppables: {
       ...existing.droppables,
-      ...publish.additions.droppables,
+      ...addedDroppables,
     },
   };
 
   // We also need to remove the Draggables and Droppables from this new map
 
-  publish.removals.draggables.forEach((id: DraggableId) => {
+  publishChange.removals.draggables.forEach((id: DraggableId) => {
     delete dimensions.draggables[id];
   });
 
-  publish.removals.droppables.forEach((id: DroppableId) => {
+  publishChange.removals.droppables.forEach((id: DroppableId) => {
     delete dimensions.droppables[id];
   });
 

src/state/publish/index.js → src/state/publish-change/index.js

@@ -6,7 +6,7 @@ import type {
   DraggingState,
   CollectingState,
   DropPendingState,
-  Publish,
+  PublishChange,
   Critical,
   DraggableId,
   DraggableDimension,
@@ -18,12 +18,12 @@ import getDragPositions from './get-drag-positions';
 
 type Args = {|
   state: CollectingState | DropPendingState,
-  publish: Publish
+  publishChange: PublishChange
 |}
 
 export default ({
   state,
-  publish,
+  publishChange,
 }: Args): DraggingState | DropPendingState => {
   // TODO: write validate that every removed draggable must have a removed droppable
 
@@ -49,7 +49,7 @@ export default ({
 
   const dimensions: DimensionMap = getDimensionMap({
     existing: state.dimensions,
-    publish,
+    publishChange,
     // TODO: fix
     windowScroll: state.viewport.scroll.initial,
   });

src/state/reducer.js

@@ -6,7 +6,7 @@ import getDragImpact from './get-drag-impact/';
 import moveCrossAxis from './move-cross-axis/';
 import moveToNextIndex from './move-to-next-index/';
 import { noMovement } from './no-impact';
-import publish from './publish';
+import publishChange from './publish-change';
 import { add, isEqual, subtract } from './position';
 import scrollViewport from './scroll-viewport';
 import getHomeImpact from './get-home-impact';
@@ -184,9 +184,9 @@ export default (state: State = idle, action: Action): State => {
       `Unexpected ${action.type} received in phase ${state.phase}`
     );
 
-    return publish({
+    return publishChange({
       state,
-      publish: action.payload,
+      publishChange: action.payload,
     });
   }
 

src/state/to-map.js

@@ -0,0 +1,18 @@
+// @flow
+import type {
+  DroppableDimension,
+  DroppableDimensionMap,
+  DraggableDimension,
+  DraggableDimensionMap,
+} from '../types';
+
+const reduce = (dimensions: any) => dimensions.reduce((previous, current) => {
+  previous[current.descriptor.id] = current;
+  return previous;
+}, {});
+
+export const toDroppableMap =
+  (droppables: DroppableDimension[]): DroppableDimensionMap => reduce(droppables);
+
+export const toDraggableMap =
+  (draggables: DraggableDimension[]): DraggableDimensionMap => reduce(draggables);

src/types.js

@@ -257,8 +257,12 @@ export type DimensionMap = {|
   droppables: DroppableDimensionMap,
 |}
 
-export type Publish = {|
-  additions: DimensionMap,
+export type PublishChange = {|
+  additions: {|
+    draggables: DraggableDimension[],
+    droppables: DroppableDimension[],
+  |},
+  // additions: DimensionMap,
   removals: {|
     draggables: DraggableId[],
     droppables: DroppableId[],