@helpdice/draggable 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,255 @@
+// @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 | null,
+  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 as any, provided); // Casted to any
+
+  if (!willExpire.wasCalled()) {
+    announce(getDefaultMessage(data));
+  }
+};
+
+// Exact
+export type WhileDragging = {
+  mode: MovementMode
+  lastCritical: Critical,
+  lastCombine: Combine | null,
+  lastLocation: DraggableLocation | null,
+};
+
+export default (getResponders: () => Responders, announce: Announce) => {
+  const asyncMarshal: AsyncMarshal = getAsyncMarshal();
+  let dragging: WhileDragging | null = 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 | null = 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 | null = 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 | null = tryGetDestination(impact);
+    const combine: Combine | null = 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.ts

@@ -0,0 +1,81 @@
+// @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,
+    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);
+      return;
+    }
+
+  };
+};

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

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

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

package/src/state/middleware/util/validate-dimensions.ts

@@ -0,0 +1,71 @@
+// @flow
+import type {
+  Critical,
+  DimensionMap,
+  DraggableDimension,
+} from '../../../types';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import { warning } from '../../../dev-warning';
+
+type ErrorMap = {
+  [index: number]: true,
+};
+
+function checkIndexes(insideDestination: DraggableDimension[]) {
+  // no point running if there are 1 or less items
+  if (insideDestination.length <= 1) {
+    return;
+  }
+
+  const indexes: number[] = insideDestination.map(
+    (d: DraggableDimension): number => d.descriptor.index,
+  );
+
+  const errors: ErrorMap = {};
+
+  for (let i = 1; i < indexes.length; i++) {
+    const current: number = indexes[i];
+    const previous: number = indexes[i - 1];
+
+    // this will be an error if:
+    // 1. index is not consecutive
+    // 2. index is duplicated (which is true if #1 is not passed)
+    if (current !== previous + 1) {
+      errors[current] = true;
+    }
+  }
+
+  if (!Object.keys(errors).length) {
+    return;
+  }
+
+  const formatted: string = indexes
+    .map((index: number): string => {
+      const hasError: boolean = Boolean(errors[index]);
+
+      return hasError ? `[🔥${index}]` : `${index}`;
+    })
+    .join(', ');
+
+  warning(`
+    Detected non-consecutive <Draggable /> indexes.
+
+    (This can cause unexpected bugs)
+
+    ${formatted}
+  `);
+}
+
+export default function validateDimensions(
+  critical: Critical,
+  dimensions: DimensionMap,
+): void {
+  // wrapping entire block for better minification
+  if (process.env.NODE_ENV !== 'production') {
+    const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+      critical.droppable.id,
+      dimensions.draggables,
+    );
+    checkIndexes(insideDestination);
+  }
+}

package/src/state/move-in-direction/index.ts

@@ -0,0 +1,85 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type { PublicResult } from './move-in-direction-types';
+import type {
+  DroppableId,
+  DraggingState,
+  Direction,
+  DroppableDimension,
+  DraggableDimension,
+  DroppableDimensionMap,
+  DragImpact,
+} from '../../types';
+import moveToNextPlace from './move-to-next-place';
+import moveCrossAxis from './move-cross-axis';
+import whatIsDraggedOver from '../droppable/what-is-dragged-over';
+
+// Exact
+type Args = {
+  state: DraggingState,
+  type: 'MOVE_UP' | 'MOVE_RIGHT' | 'MOVE_DOWN' | 'MOVE_LEFT',
+};
+
+const getDroppableOver = (
+  impact: DragImpact,
+  droppables: DroppableDimensionMap,
+): DroppableDimension | null => {
+  const id: DroppableId | null = whatIsDraggedOver(impact);
+  return id ? droppables[id] : null;
+};
+
+export default ({ state, type }: Args): PublicResult | null => {
+  const isActuallyOver: DroppableDimension | null = getDroppableOver(
+    state.impact,
+    state.dimensions.droppables,
+  );
+  const isMainAxisMovementAllowed: boolean = Boolean(isActuallyOver);
+  const home: DroppableDimension =
+    state.dimensions.droppables[state.critical.droppable.id];
+  // use home when not actually over a droppable (can happen when move is disabled)
+  const isOver: DroppableDimension = isActuallyOver || home;
+
+  const direction: Direction = isOver.axis.direction;
+  const isMovingOnMainAxis: boolean =
+    (direction === 'vertical' &&
+      (type === 'MOVE_UP' || type === 'MOVE_DOWN')) ||
+    (direction === 'horizontal' &&
+      (type === 'MOVE_LEFT' || type === 'MOVE_RIGHT'));
+
+  // This movement is not permitted right now
+  if (isMovingOnMainAxis && !isMainAxisMovementAllowed) {
+    return null;
+  }
+
+  const isMovingForward: boolean =
+    type === 'MOVE_DOWN' || type === 'MOVE_RIGHT';
+
+  const draggable: DraggableDimension =
+    state.dimensions.draggables[state.critical.draggable.id];
+  const previousPageBorderBoxCenter: Position =
+    state.current.page.borderBoxCenter;
+  const { draggables, droppables } = state.dimensions;
+
+  return isMovingOnMainAxis
+    ? moveToNextPlace({
+        isMovingForward,
+        previousPageBorderBoxCenter,
+        draggable,
+        destination: isOver,
+        draggables,
+        viewport: state.viewport,
+        previousClientSelection: state.current.client.selection,
+        previousImpact: state.impact,
+        afterCritical: state.afterCritical,
+      })
+    : moveCrossAxis({
+        isMovingForward,
+        previousPageBorderBoxCenter,
+        draggable,
+        isOver,
+        draggables,
+        droppables,
+        viewport: state.viewport,
+        afterCritical: state.afterCritical,
+      });
+};