@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/auto-scroller/fluid-scroller/index.js

@@ -0,0 +1,99 @@
+// @flow
+import rafSchd from 'raf-schd';
+import { type Position } from 'css-box-model';
+import type {
+  DraggingState,
+  DroppableId,
+  FluidScrollerOptions,
+} from '../../../types';
+import scroll from './scroll';
+import { invariant } from '../../../invariant';
+import * as timings from '../../../debug/timings';
+
+export type PublicArgs = {|
+  scrollWindow: (change: Position) => void,
+  scrollDroppable: (id: DroppableId, change: Position) => void,
+  fluidScrollerOptions?: FluidScrollerOptions,
+|};
+
+export type FluidScroller = {|
+  scroll: (state: DraggingState) => void,
+  start: (state: DraggingState) => void,
+  stop: () => void,
+  fluidScrollerOptions?: FluidScrollerOptions,
+|};
+
+type WhileDragging = {|
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+|};
+
+export default ({
+  scrollWindow,
+  scrollDroppable,
+  fluidScrollerOptions,
+}: PublicArgs): FluidScroller => {
+  const scheduleWindowScroll = rafSchd(scrollWindow);
+  const scheduleDroppableScroll = rafSchd(scrollDroppable);
+  let dragging: ?WhileDragging = null;
+
+  const tryScroll = (state: DraggingState): void => {
+    invariant(dragging, 'Cannot fluid scroll if not dragging');
+    const { shouldUseTimeDampening, dragStartTime } = dragging;
+
+    scroll({
+      state,
+      scrollWindow: scheduleWindowScroll,
+      scrollDroppable: scheduleDroppableScroll,
+      dragStartTime,
+      shouldUseTimeDampening,
+      fluidScrollerOptions,
+    });
+  };
+
+  const start = (state: DraggingState) => {
+    timings.start('starting fluid scroller');
+    invariant(!dragging, 'Cannot start auto scrolling when already started');
+    const dragStartTime: number = Date.now();
+
+    let wasScrollNeeded: boolean = false;
+    const fakeScrollCallback = () => {
+      wasScrollNeeded = true;
+    };
+    scroll({
+      state,
+      dragStartTime: 0,
+      shouldUseTimeDampening: false,
+      scrollWindow: fakeScrollCallback,
+      scrollDroppable: fakeScrollCallback,
+      fluidScrollerOptions,
+    });
+
+    dragging = {
+      dragStartTime,
+      shouldUseTimeDampening: wasScrollNeeded,
+    };
+    timings.finish('starting fluid scroller');
+
+    // we know an auto scroll is needed - let's do it!
+    if (wasScrollNeeded) {
+      tryScroll(state);
+    }
+  };
+
+  const stop = () => {
+    // can be called defensively
+    if (!dragging) {
+      return;
+    }
+    scheduleWindowScroll.cancel();
+    scheduleDroppableScroll.cancel();
+    dragging = null;
+  };
+
+  return {
+    start,
+    stop,
+    scroll: tryScroll,
+  };
+};

package/src/state/auto-scroller/fluid-scroller/scroll.js

@@ -0,0 +1,80 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import type {
+  DraggingState,
+  DroppableId,
+  DraggableDimension,
+  DroppableDimension,
+  FluidScrollerOptions,
+  Viewport,
+} from '../../../types';
+import getBestScrollableDroppable from './get-best-scrollable-droppable';
+import whatIsDraggedOver from '../../droppable/what-is-dragged-over';
+import getWindowScrollChange from './get-window-scroll-change';
+import getDroppableScrollChange from './get-droppable-scroll-change';
+
+type Args = {|
+  state: DraggingState,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+  scrollWindow: (scroll: Position) => void,
+  scrollDroppable: (id: DroppableId, scroll: Position) => void,
+  fluidScrollerOptions?: FluidScrollerOptions,
+|};
+
+export default ({
+  state,
+  dragStartTime,
+  shouldUseTimeDampening,
+  scrollWindow,
+  scrollDroppable,
+  fluidScrollerOptions,
+}: Args): void => {
+  const center: Position = state.current.page.borderBoxCenter;
+  const centerInitial = state.initial.page.borderBoxCenter;
+  const draggable: DraggableDimension =
+    state.dimensions.draggables[state.critical.draggable.id];
+  const subject: Rect = draggable.page.marginBox;
+  // 1. Can we scroll the viewport?
+  if (state.isWindowScrollAllowed) {
+    const viewport: Viewport = state.viewport;
+    const change: ?Position = getWindowScrollChange({
+      dragStartTime,
+      viewport,
+      subject,
+      center,
+      centerInitial,
+      shouldUseTimeDampening,
+      fluidScrollerOptions,
+    });
+
+    if (change) {
+      scrollWindow(change);
+      return;
+    }
+  }
+
+  const droppable: ?DroppableDimension = getBestScrollableDroppable({
+    center,
+    destination: whatIsDraggedOver(state.impact),
+    droppables: state.dimensions.droppables,
+  });
+
+  if (!droppable) {
+    return;
+  }
+
+  const change: ?Position = getDroppableScrollChange({
+    dragStartTime,
+    droppable,
+    subject,
+    center,
+    centerInitial,
+    shouldUseTimeDampening,
+    fluidScrollerOptions,
+  });
+
+  if (change) {
+    scrollDroppable(droppable.descriptor.id, change);
+  }
+};

package/src/state/auto-scroller/index.js

@@ -0,0 +1,59 @@
+// @flow
+import { type Position } from 'css-box-model';
+import createFluidScroller, { type FluidScroller } from './fluid-scroller';
+import createJumpScroller, { type JumpScroller } from './jump-scroller';
+import type { AutoScroller } from './auto-scroller-types';
+import type { DroppableId, FluidScrollerOptions, State } from '../../types';
+import type { MoveArgs } from '../action-creators';
+
+export type Args = {|
+  scrollWindow: (offset: Position) => void,
+  scrollDroppable: (id: DroppableId, change: Position) => void,
+  move: (args: MoveArgs) => mixed,
+  fluidScrollerOptions: FluidScrollerOptions,
+|};
+
+export default ({
+  scrollDroppable,
+  scrollWindow,
+  move,
+  fluidScrollerOptions,
+}: Args): AutoScroller => {
+  const fluidScroller: FluidScroller = createFluidScroller({
+    scrollWindow,
+    scrollDroppable,
+    fluidScrollerOptions,
+  });
+
+  const jumpScroll: JumpScroller = createJumpScroller({
+    move,
+    scrollWindow,
+    scrollDroppable,
+  });
+
+  const scroll = (state: State) => {
+    // Only allowing auto scrolling in the DRAGGING phase
+    if (state.phase !== 'DRAGGING') {
+      return;
+    }
+
+    if (state.movementMode === 'FLUID') {
+      fluidScroller.scroll(state);
+      return;
+    }
+
+    if (!state.scrollJumpRequest) {
+      return;
+    }
+
+    jumpScroll(state);
+  };
+
+  const scroller: AutoScroller = {
+    scroll,
+    start: fluidScroller.start,
+    stop: fluidScroller.stop,
+  };
+
+  return scroller;
+};

package/src/state/auto-scroller/jump-scroller.js

@@ -0,0 +1,139 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../invariant';
+import { add, subtract } from '../position';
+import {
+  canScrollWindow,
+  canScrollDroppable,
+  getWindowOverlap,
+  getDroppableOverlap,
+} from './can-scroll';
+import whatIsDraggedOver from '../droppable/what-is-dragged-over';
+import { type MoveArgs } from '../action-creators';
+import type {
+  DroppableDimension,
+  Viewport,
+  DraggingState,
+  DroppableId,
+} from '../../types';
+
+type Args = {|
+  scrollDroppable: (id: DroppableId, change: Position) => void,
+  scrollWindow: (offset: Position) => void,
+  move: (args: MoveArgs) => mixed,
+|};
+
+export type JumpScroller = (state: DraggingState) => void;
+
+type Remainder = Position;
+
+export default ({
+  move,
+  scrollDroppable,
+  scrollWindow,
+}: Args): JumpScroller => {
+  const moveByOffset = (state: DraggingState, offset: Position) => {
+    const client: Position = add(state.current.client.selection, offset);
+    move({ client });
+  };
+
+  const scrollDroppableAsMuchAsItCan = (
+    droppable: DroppableDimension,
+    change: Position,
+  ): ?Remainder => {
+    // Droppable cannot absorb any of the scroll
+    if (!canScrollDroppable(droppable, change)) {
+      return change;
+    }
+
+    const overlap: ?Position = getDroppableOverlap(droppable, change);
+
+    // Droppable can absorb the entire change
+    if (!overlap) {
+      scrollDroppable(droppable.descriptor.id, change);
+      return null;
+    }
+
+    // Droppable can only absorb a part of the change
+    const whatTheDroppableCanScroll: Position = subtract(change, overlap);
+    scrollDroppable(droppable.descriptor.id, whatTheDroppableCanScroll);
+
+    const remainder: Position = subtract(change, whatTheDroppableCanScroll);
+    return remainder;
+  };
+
+  const scrollWindowAsMuchAsItCan = (
+    isWindowScrollAllowed: boolean,
+    viewport: Viewport,
+    change: Position,
+  ): ?Position => {
+    if (!isWindowScrollAllowed) {
+      return change;
+    }
+
+    if (!canScrollWindow(viewport, change)) {
+      // window cannot absorb any of the scroll
+      return change;
+    }
+
+    const overlap: ?Position = getWindowOverlap(viewport, change);
+
+    // window can absorb entire scroll
+    if (!overlap) {
+      scrollWindow(change);
+      return null;
+    }
+
+    // window can only absorb a part of the scroll
+    const whatTheWindowCanScroll: Position = subtract(change, overlap);
+    scrollWindow(whatTheWindowCanScroll);
+
+    const remainder: Position = subtract(change, whatTheWindowCanScroll);
+    return remainder;
+  };
+
+  const jumpScroller: JumpScroller = (state: DraggingState) => {
+    const request: ?Position = state.scrollJumpRequest;
+
+    if (!request) {
+      return;
+    }
+
+    const destination: ?DroppableId = whatIsDraggedOver(state.impact);
+    invariant(
+      destination,
+      'Cannot perform a jump scroll when there is no destination',
+    );
+
+    // 1. We scroll the droppable first if we can to avoid the draggable
+    // leaving the list
+
+    const droppableRemainder: ?Position = scrollDroppableAsMuchAsItCan(
+      state.dimensions.droppables[destination],
+      request,
+    );
+
+    // droppable absorbed the entire scroll
+    if (!droppableRemainder) {
+      return;
+    }
+
+    const viewport: Viewport = state.viewport;
+    const windowRemainder: ?Position = scrollWindowAsMuchAsItCan(
+      state.isWindowScrollAllowed,
+      viewport,
+      droppableRemainder,
+    );
+
+    // window could absorb all the droppable remainder
+    if (!windowRemainder) {
+      return;
+    }
+
+    // The entire scroll could not be absorbed by the droppable and window
+    // so we manually move whatever is left
+    moveByOffset(state, windowRemainder);
+  };
+
+  return jumpScroller;
+};

package/src/state/axis.js

@@ -0,0 +1,26 @@
+// @flow
+import type { HorizontalAxis, VerticalAxis } from '../types';
+
+export const vertical: VerticalAxis = {
+  direction: 'vertical',
+  line: 'y',
+  crossAxisLine: 'x',
+  start: 'top',
+  end: 'bottom',
+  size: 'height',
+  crossAxisStart: 'left',
+  crossAxisEnd: 'right',
+  crossAxisSize: 'width',
+};
+
+export const horizontal: HorizontalAxis = {
+  direction: 'horizontal',
+  line: 'x',
+  crossAxisLine: 'y',
+  start: 'left',
+  end: 'right',
+  size: 'width',
+  crossAxisStart: 'top',
+  crossAxisEnd: 'bottom',
+  crossAxisSize: 'height',
+};

package/src/state/calculate-drag-impact/calculate-reorder-impact.js

@@ -0,0 +1,136 @@
+// @flow
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DragImpact,
+  DisplacementGroups,
+  Viewport,
+  DisplacedBy,
+} from '../../types';
+import removeDraggableFromList from '../remove-draggable-from-list';
+import isHomeOf from '../droppable/is-home-of';
+import { emptyGroups } from '../no-impact';
+import { find } from '../../native-with-fallback';
+import getDisplacementGroups from '../get-displacement-groups';
+
+type Args = {|
+  draggable: DraggableDimension,
+  insideDestination: DraggableDimension[],
+  destination: DroppableDimension,
+  viewport: Viewport,
+  displacedBy: DisplacedBy,
+  last: DisplacementGroups,
+  index: ?number,
+  forceShouldAnimate?: boolean,
+|};
+
+function getIndexOfLastItem(
+  draggables: DraggableDimension[],
+  options: {| inHomeList: boolean |},
+): number {
+  if (!draggables.length) {
+    return 0;
+  }
+
+  const indexOfLastItem: number =
+    draggables[draggables.length - 1].descriptor.index;
+
+  // When in a foreign list there will be an additional one item in the list
+  return options.inHomeList ? indexOfLastItem : indexOfLastItem + 1;
+}
+
+type GoAtEndArgs = {|
+  insideDestination: DraggableDimension[],
+  inHomeList: boolean,
+  displacedBy: DisplacedBy,
+  destination: DroppableDimension,
+|};
+
+function goAtEnd({
+  insideDestination,
+  inHomeList,
+  displacedBy,
+  destination,
+}: GoAtEndArgs): DragImpact {
+  const newIndex: number = getIndexOfLastItem(insideDestination, {
+    inHomeList,
+  });
+
+  return {
+    displaced: emptyGroups,
+    displacedBy,
+    at: {
+      type: 'REORDER',
+      destination: {
+        droppableId: destination.descriptor.id,
+        index: newIndex,
+      },
+    },
+  };
+}
+
+export default function calculateReorderImpact({
+  draggable,
+  insideDestination,
+  destination,
+  viewport,
+  displacedBy,
+  last,
+  index,
+  forceShouldAnimate,
+}: Args): DragImpact {
+  const inHomeList: boolean = isHomeOf(draggable, destination);
+
+  // Go into last spot of list
+  if (index == null) {
+    return goAtEnd({
+      insideDestination,
+      inHomeList,
+      displacedBy,
+      destination,
+    });
+  }
+
+  // this might be the dragging item
+  const match: ?DraggableDimension = find(
+    insideDestination,
+    (item: DraggableDimension) => item.descriptor.index === index,
+  );
+
+  if (!match) {
+    return goAtEnd({
+      insideDestination,
+      inHomeList,
+      displacedBy,
+      destination,
+    });
+  }
+  const withoutDragging: DraggableDimension[] = removeDraggableFromList(
+    draggable,
+    insideDestination,
+  );
+
+  const sliceFrom: number = insideDestination.indexOf(match);
+  const impacted: DraggableDimension[] = withoutDragging.slice(sliceFrom);
+
+  const displaced: DisplacementGroups = getDisplacementGroups({
+    afterDragging: impacted,
+    destination,
+    displacedBy,
+    last,
+    viewport: viewport.frame,
+    forceShouldAnimate,
+  });
+
+  return {
+    displaced,
+    displacedBy,
+    at: {
+      type: 'REORDER',
+      destination: {
+        droppableId: destination.descriptor.id,
+        index,
+      },
+    },
+  };
+}

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

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

@@ -0,0 +1,97 @@
+// @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: 'react-beautiful-dnd',
+      })
+    : compose;
+
+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.js

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