@helpdice/draggable 0.0.0-stage → 0.0.1

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

@@ -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): unknown => {
+  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 | null = didDropInsideDroppable
+    ? tryGetDestination(impact)
+    : null;
+  const combine: Combine | null = 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.ts

@@ -0,0 +1,48 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { distance as getDistance } from '../../position';
+import { timings } from '../../../animation';
+import type { DropReason } from '../../../types';
+
+// Exact
+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.ts

@@ -0,0 +1,79 @@
+// @flow
+import type {
+  DropReason,
+  DragImpact,
+  Viewport,
+  DroppableDimension,
+  DraggableDimensionMap,
+  LiftEffect,
+} from '../../../types';
+import recompute from '../../update-displacement-visibility/recompute';
+import { emptyGroups } from '../../no-impact';
+
+// Exact
+type Args = {
+  draggables: DraggableDimensionMap,
+  home: DroppableDimension,
+  reason: DropReason,
+  lastImpact: DragImpact,
+  onLiftImpact: DragImpact,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+};
+
+// Exact
+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.ts

@@ -0,0 +1,55 @@
+// @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';
+
+// Exact
+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 | null = whatIsDraggedOver(impact);
+  const destination: DroppableDimension | null = 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.ts

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

package/src/state/middleware/focus.ts

@@ -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();
+    }
+  };
+};

package/src/state/middleware/lift.ts

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

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

@@ -0,0 +1,58 @@
+// @flow
+import { invariant } from '../../../invariant';
+import { findIndex } from '../../../native-with-fallback';
+import { TimeoutID } from '../../../types';
+
+// Exact
+type Entry = {
+  timerId: TimeoutID,
+  callback: Function,
+};
+
+// Exact
+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.ts

@@ -0,0 +1,44 @@
+// @flow
+import type { Announce, TimeoutID } 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.ts

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

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

@@ -0,0 +1,57 @@
+// @flow
+import type { Critical, DraggableLocation, Combine } from '../../../types';
+
+export const areLocationsEqual = (
+  first: DraggableLocation | null,
+  second: DraggableLocation | null,
+): 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 | null, second: Combine | null): 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;
+};