@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/state/can-start-drag.ts

@@ -0,0 +1,29 @@
+// @flow
+import type { State, DraggableId } from '../types';
+
+export default (state: State, id: DraggableId): boolean => {
+  // Ready to go!
+  if (state.phase === 'IDLE') {
+    return true;
+  }
+
+  // Can lift depending on the type of drop animation
+  if (state.phase !== 'DROP_ANIMATING') {
+    return false;
+  }
+
+  // - For a user drop we allow the user to drag other Draggables
+  //   immediately as items are most likely already in their home
+  // - For a cancel items will be moving back to their original position
+  //   as such it is a cleaner experience to block them from dragging until
+  //   the drop animation is complete. Otherwise they will be grabbing
+  //   items not in their original position which can lead to bad visuals
+  // Not allowing dragging of the dropping draggable
+  if (state.completed.result.draggableId === id) {
+    return false;
+  }
+
+  // if dropping - allow lifting
+  // if cancelling - disallow lifting
+  return state.completed.result.reason === 'DROP';
+};

package/src/state/create-store.ts

@@ -0,0 +1,98 @@
+// @flow
+/* eslint-disable no-underscore-dangle */
+import { applyMiddleware, createStore, compose } from 'redux';
+import reducer from './reducer';
+import lift from './middleware/lift';
+import style from './middleware/style';
+import drop from './middleware/drop/drop-middleware';
+import scrollListener from './middleware/scroll-listener';
+import responders from './middleware/responders/responders-middleware';
+import dropAnimationFinish from './middleware/drop/drop-animation-finish-middleware';
+import dropAnimationFlushOnScroll from './middleware/drop/drop-animation-flush-on-scroll-middleware';
+import dimensionMarshalStopper from './middleware/dimension-marshal-stopper';
+import focus from './middleware/focus';
+import autoScroll from './middleware/auto-scroll';
+import pendingDrop from './middleware/pending-drop';
+import type { DimensionMarshal } from './dimension-marshal/dimension-marshal-types';
+import type { FocusMarshal } from '../view/use-focus-marshal/focus-marshal-types';
+import type { StyleMarshal } from '../view/use-style-marshal/style-marshal-types';
+import type { AutoScroller } from './auto-scroller/auto-scroller-types';
+import type { Responders, Announce } from '../types';
+import type { Store } from './store-types';
+
+// We are checking if window is available before using it.
+// This is needed for universal apps that render the component server side.
+// Details: https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
+const composeEnhancers =
+  process.env.NODE_ENV !== 'production' &&
+  typeof window !== 'undefined' &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+        name: 'draggable',
+      })
+    : compose;
+
+// Exact
+type Args = {
+  dimensionMarshal: DimensionMarshal,
+  focusMarshal: FocusMarshal,
+  styleMarshal: StyleMarshal,
+  getResponders: () => Responders,
+  announce: Announce,
+  autoScroller: AutoScroller,
+};
+
+export default ({
+  dimensionMarshal,
+  focusMarshal,
+  styleMarshal,
+  getResponders,
+  announce,
+  autoScroller,
+}: Args): Store =>
+  createStore(
+    reducer,
+    composeEnhancers(
+      applyMiddleware(
+        // ## Debug middleware
+
+        // > uncomment to use
+        // debugging logger
+        // require('../debug/middleware/log').default('light'),
+        // // user timing api
+        // require('../debug/middleware/user-timing').default,
+        // debugging timer
+        // require('../debug/middleware/action-timing').default,
+        // average action timer
+        // require('../debug/middleware/action-timing-average').default(200),
+
+        // ## Application middleware
+
+        // Style updates do not cause more actions. It is important to update styles
+        // before responders are called: specifically the onDragEnd responder. We need to clear
+        // the transition styles off the elements before a reorder to prevent strange
+        // post drag animations in firefox. Even though we clear the transition off
+        // a Draggable - if it is done after a reorder firefox will still apply the
+        // transition.
+        // Must be called before dimension marshal for lifting to apply collecting styles
+        style(styleMarshal),
+        // Stop the dimension marshal collecting anything
+        // when moving into a phase where collection is no longer needed.
+        // We need to stop the marshal before responders fire as responders can cause
+        // dimension registration changes in response to reordering
+        dimensionMarshalStopper(dimensionMarshal),
+        // Fire application responders in response to drag changes
+        lift(dimensionMarshal),
+        drop,
+        // When a drop animation finishes - fire a drop complete
+        dropAnimationFinish,
+        dropAnimationFlushOnScroll,
+        pendingDrop,
+        autoScroll(autoScroller),
+        scrollListener,
+        focus(focusMarshal),
+        // Fire responders for consumers (after update to store)
+        responders(getResponders, announce),
+      ),
+    ),
+  );

package/src/state/did-start-after-critical.ts

@@ -0,0 +1,9 @@
+// @flow
+import type { DraggableId, LiftEffect } from '../types';
+
+export default function didStartAfterCritical(
+  draggableId: DraggableId,
+  afterCritical: LiftEffect,
+): boolean {
+  return Boolean(afterCritical.effected[draggableId]);
+}

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

@@ -0,0 +1,49 @@
+// @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';
+
+// Exact
+export type StartPublishingResult = {
+  critical: Critical,
+  dimensions: DimensionMap,
+  viewport: Viewport,
+};
+
+// Exact
+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,
+};
+
+// Exact
+export type Callbacks = {
+  collectionStarting: () => unknown,
+  publishWhileDragging: (args: Published) => unknown,
+  updateDroppableScroll: (args: UpdateDroppableScrollArgs) => unknown,
+  updateDroppableIsEnabled: (args: UpdateDroppableIsEnabledArgs) => unknown,
+  updateDroppableIsCombineEnabled: (
+    args: UpdateDroppableIsCombineEnabledArgs,
+  ) => unknown,
+};

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

@@ -0,0 +1,219 @@
+// @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';
+
+// Exact
+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 | undefined = 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.ts

@@ -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.ts

@@ -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) => unknown,
+  collectionStarting: () => unknown,
+};
+
+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: any = null; // AnimationFrameID
+
+  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.ts

@@ -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;
+    }, {} as DroppableDimensionMap),
+);
+
+export const toDraggableMap = memoizeOne(
+  (draggables: DraggableDimension[]): DraggableDimensionMap =>
+    draggables.reduce((previous, current) => {
+      previous[current.descriptor.id] = current;
+      return previous;
+    }, {} as DraggableDimensionMap),
+);
+
+export const toDroppableList = memoizeOne(
+  (droppables: DroppableDimensionMap): DroppableDimension[] =>
+    values(droppables),
+);
+
+export const toDraggableList = memoizeOne(
+  (draggables: DraggableDimensionMap): DraggableDimension[] =>
+    values(draggables),
+);