@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/action-creators.js

@@ -0,0 +1,328 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  Critical,
+  DraggableId,
+  DroppableId,
+  CompletedDrag,
+  MovementMode,
+  Viewport,
+  DimensionMap,
+  DropReason,
+  Published,
+} from '../types';
+
+export type BeforeInitialCaptureArgs = {|
+  draggableId: DraggableId,
+  movementMode: MovementMode,
+|};
+
+export type BeforeInitialCaptureAction = {|
+  type: 'BEFORE_INITIAL_CAPTURE',
+  payload: BeforeInitialCaptureArgs,
+|};
+
+export const beforeInitialCapture = (
+  args: BeforeInitialCaptureArgs,
+): BeforeInitialCaptureAction => ({
+  type: 'BEFORE_INITIAL_CAPTURE',
+  payload: args,
+});
+
+export type LiftArgs = {|
+  // lifting with DraggableId rather than descriptor
+  // as the descriptor might change after a drop is flushed
+  id: DraggableId,
+  clientSelection: Position,
+  movementMode: MovementMode,
+|};
+
+export type LiftAction = {|
+  type: 'LIFT',
+  payload: LiftArgs,
+|};
+
+export const lift = (args: LiftArgs): LiftAction => ({
+  type: 'LIFT',
+  payload: args,
+});
+
+export type InitialPublishArgs = {|
+  critical: Critical,
+  dimensions: DimensionMap,
+  clientSelection: Position,
+  viewport: Viewport,
+  movementMode: MovementMode,
+|};
+
+export type InitialPublishAction = {|
+  type: 'INITIAL_PUBLISH',
+  payload: InitialPublishArgs,
+|};
+
+export const initialPublish = (
+  args: InitialPublishArgs,
+): InitialPublishAction => ({
+  type: 'INITIAL_PUBLISH',
+  payload: args,
+});
+
+export type WhileDraggingPublishAction = {|
+  type: 'PUBLISH_WHILE_DRAGGING',
+  payload: Published,
+|};
+
+export const publishWhileDragging = (
+  args: Published,
+): WhileDraggingPublishAction => ({
+  type: 'PUBLISH_WHILE_DRAGGING',
+  payload: args,
+});
+
+export type CollectionStartingAction = {|
+  type: 'COLLECTION_STARTING',
+  payload: null,
+|};
+
+export const collectionStarting = (): CollectionStartingAction => ({
+  type: 'COLLECTION_STARTING',
+  payload: null,
+});
+
+export type UpdateDroppableScrollArgs = {
+  id: DroppableId,
+  newScroll: Position,
+};
+
+export type UpdateDroppableScrollAction = {|
+  type: 'UPDATE_DROPPABLE_SCROLL',
+  payload: UpdateDroppableScrollArgs,
+|};
+
+export const updateDroppableScroll = (
+  args: UpdateDroppableScrollArgs,
+): UpdateDroppableScrollAction => ({
+  type: 'UPDATE_DROPPABLE_SCROLL',
+  payload: args,
+});
+
+export type UpdateDroppableIsEnabledArgs = {|
+  id: DroppableId,
+  isEnabled: boolean,
+|};
+
+export type UpdateDroppableIsEnabledAction = {|
+  type: 'UPDATE_DROPPABLE_IS_ENABLED',
+  payload: UpdateDroppableIsEnabledArgs,
+|};
+
+export const updateDroppableIsEnabled = (
+  args: UpdateDroppableIsEnabledArgs,
+): UpdateDroppableIsEnabledAction => ({
+  type: 'UPDATE_DROPPABLE_IS_ENABLED',
+  payload: args,
+});
+
+export type UpdateDroppableIsCombineEnabledArgs = {|
+  id: DroppableId,
+  isCombineEnabled: boolean,
+|};
+
+export type UpdateDroppableIsCombineEnabledAction = {|
+  type: 'UPDATE_DROPPABLE_IS_COMBINE_ENABLED',
+  payload: UpdateDroppableIsCombineEnabledArgs,
+|};
+
+export const updateDroppableIsCombineEnabled = (
+  args: UpdateDroppableIsCombineEnabledArgs,
+): UpdateDroppableIsCombineEnabledAction => ({
+  type: 'UPDATE_DROPPABLE_IS_COMBINE_ENABLED',
+  payload: args,
+});
+
+export type MoveArgs = {|
+  client: Position,
+|};
+
+export type MoveAction = {|
+  type: 'MOVE',
+  payload: MoveArgs,
+|};
+
+export const move = (args: MoveArgs): MoveAction => ({
+  type: 'MOVE',
+  payload: args,
+});
+
+type MoveByWindowScrollArgs = {|
+  newScroll: Position,
+|};
+
+export type MoveByWindowScrollAction = {|
+  type: 'MOVE_BY_WINDOW_SCROLL',
+  payload: MoveByWindowScrollArgs,
+|};
+
+export const moveByWindowScroll = (
+  args: MoveByWindowScrollArgs,
+): MoveByWindowScrollAction => ({
+  type: 'MOVE_BY_WINDOW_SCROLL',
+  payload: args,
+});
+
+export type UpdateViewportMaxScrollArgs = {|
+  maxScroll: Position,
+|};
+
+type UpdateViewportMaxScrollAction = {|
+  type: 'UPDATE_VIEWPORT_MAX_SCROLL',
+  payload: UpdateViewportMaxScrollArgs,
+|};
+
+export const updateViewportMaxScroll = (
+  args: UpdateViewportMaxScrollArgs,
+): UpdateViewportMaxScrollAction => ({
+  type: 'UPDATE_VIEWPORT_MAX_SCROLL',
+  payload: args,
+});
+
+export type MoveUpAction = {|
+  type: 'MOVE_UP',
+  payload: null,
+|};
+
+export const moveUp = (): MoveUpAction => ({
+  type: 'MOVE_UP',
+  payload: null,
+});
+
+export type MoveDownAction = {|
+  type: 'MOVE_DOWN',
+  payload: null,
+|};
+
+export const moveDown = (): MoveDownAction => ({
+  type: 'MOVE_DOWN',
+  payload: null,
+});
+
+export type MoveRightAction = {|
+  type: 'MOVE_RIGHT',
+  payload: null,
+|};
+
+export const moveRight = (): MoveRightAction => ({
+  type: 'MOVE_RIGHT',
+  payload: null,
+});
+
+export type MoveLeftAction = {|
+  type: 'MOVE_LEFT',
+  payload: null,
+|};
+
+export const moveLeft = (): MoveLeftAction => ({
+  type: 'MOVE_LEFT',
+  payload: null,
+});
+
+type FlushAction = {|
+  type: 'FLUSH',
+  payload: null,
+|};
+
+export const flush = (): FlushAction => ({
+  type: 'FLUSH',
+  payload: null,
+});
+
+export type AnimateDropArgs = {|
+  completed: CompletedDrag,
+  newHomeClientOffset: Position,
+  dropDuration: number,
+|};
+
+export type DropAnimateAction = {
+  type: 'DROP_ANIMATE',
+  payload: AnimateDropArgs,
+};
+
+export const animateDrop = (args: AnimateDropArgs): DropAnimateAction => ({
+  type: 'DROP_ANIMATE',
+  payload: args,
+});
+
+export type DropCompleteArgs = {|
+  completed: CompletedDrag,
+|};
+
+export type DropCompleteAction = {
+  type: 'DROP_COMPLETE',
+  payload: DropCompleteArgs,
+};
+
+export const completeDrop = (args: DropCompleteArgs): DropCompleteAction => ({
+  type: 'DROP_COMPLETE',
+  payload: args,
+});
+
+type DropArgs = {|
+  reason: DropReason,
+|};
+
+export type DropAction = {|
+  type: 'DROP',
+  payload: DropArgs,
+|};
+
+export const drop = (args: DropArgs) => ({
+  type: 'DROP',
+  payload: args,
+});
+
+export const cancel = () => drop({ reason: 'CANCEL' });
+
+export type DropPendingAction = {|
+  type: 'DROP_PENDING',
+  payload: DropArgs,
+|};
+
+export const dropPending = (args: DropArgs): DropPendingAction => ({
+  type: 'DROP_PENDING',
+  payload: args,
+});
+
+export type DropAnimationFinishedAction = {|
+  type: 'DROP_ANIMATION_FINISHED',
+  payload: null,
+|};
+
+export const dropAnimationFinished = (): DropAnimationFinishedAction => ({
+  type: 'DROP_ANIMATION_FINISHED',
+  payload: null,
+});
+
+export type Action =
+  | BeforeInitialCaptureAction
+  | LiftAction
+  | InitialPublishAction
+  | WhileDraggingPublishAction
+  | CollectionStartingAction
+  | UpdateDroppableScrollAction
+  | UpdateDroppableIsEnabledAction
+  | UpdateDroppableIsCombineEnabledAction
+  | MoveByWindowScrollAction
+  | UpdateViewportMaxScrollAction
+  // | PostJumpScrollAction
+  // | PostSnapDestinationChangeAction
+  | MoveAction
+  | MoveUpAction
+  | MoveDownAction
+  | MoveRightAction
+  | MoveLeftAction
+  | DropPendingAction
+  | DropAction
+  | DropAnimateAction
+  | DropAnimationFinishedAction
+  | DropCompleteAction
+  | FlushAction;

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

@@ -0,0 +1,8 @@
+// @flow
+import type { State, DraggingState } from '../../types';
+
+export type AutoScroller = {|
+  start: (state: DraggingState) => void,
+  stop: () => void,
+  scroll: (state: State) => void,
+|};

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

@@ -0,0 +1,160 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { add, apply, isEqual, origin } from '../position';
+import type { DroppableDimension, Viewport, Scrollable } from '../../types';
+
+type CanPartiallyScrollArgs = {|
+  max: Position,
+  current: Position,
+  change: Position,
+|};
+
+const smallestSigned = apply((value: number) => {
+  if (value === 0) {
+    return 0;
+  }
+  return value > 0 ? 1 : -1;
+});
+
+type GetRemainderArgs = {|
+  current: Position,
+  max: Position,
+  change: Position,
+|};
+
+// We need to figure out how much of the movement
+// cannot be done with a scroll
+export const getOverlap = (() => {
+  const getRemainder = (target: number, max: number): number => {
+    if (target < 0) {
+      return target;
+    }
+    if (target > max) {
+      return target - max;
+    }
+    return 0;
+  };
+
+  return ({ current, max, change }: GetRemainderArgs): ?Position => {
+    const targetScroll: Position = add(current, change);
+
+    const overlap: Position = {
+      x: getRemainder(targetScroll.x, max.x),
+      y: getRemainder(targetScroll.y, max.y),
+    };
+
+    if (isEqual(overlap, origin)) {
+      return null;
+    }
+
+    return overlap;
+  };
+})();
+
+export const canPartiallyScroll = ({
+  max: rawMax,
+  current,
+  change,
+}: CanPartiallyScrollArgs): boolean => {
+  // It is possible for the max scroll to be greater than the current scroll
+  // when there are scrollbars on the cross axis. We adjust for this by
+  // increasing the max scroll point if needed
+  // This will allow movements backwards even if the current scroll is greater than the max scroll
+  const max: Position = {
+    x: Math.max(current.x, rawMax.x),
+    y: Math.max(current.y, rawMax.y),
+  };
+
+  // Only need to be able to move the smallest amount in the desired direction
+  const smallestChange: Position = smallestSigned(change);
+
+  const overlap: ?Position = getOverlap({
+    max,
+    current,
+    change: smallestChange,
+  });
+
+  // no overlap at all - we can move there!
+  if (!overlap) {
+    return true;
+  }
+
+  // if there was an x value, but there is no x overlap - then we can scroll on the x!
+  if (smallestChange.x !== 0 && overlap.x === 0) {
+    return true;
+  }
+
+  // if there was an y value, but there is no y overlap - then we can scroll on the y!
+  if (smallestChange.y !== 0 && overlap.y === 0) {
+    return true;
+  }
+
+  return false;
+};
+
+export const canScrollWindow = (
+  viewport: Viewport,
+  change: Position,
+): boolean =>
+  canPartiallyScroll({
+    current: viewport.scroll.current,
+    max: viewport.scroll.max,
+    change,
+  });
+
+export const getWindowOverlap = (
+  viewport: Viewport,
+  change: Position,
+): ?Position => {
+  if (!canScrollWindow(viewport, change)) {
+    return null;
+  }
+
+  const max: Position = viewport.scroll.max;
+  const current: Position = viewport.scroll.current;
+
+  return getOverlap({
+    current,
+    max,
+    change,
+  });
+};
+
+export const canScrollDroppable = (
+  droppable: DroppableDimension,
+  change: Position,
+): boolean => {
+  const frame: ?Scrollable = droppable.frame;
+
+  // Cannot scroll when there is no scrollable
+  if (!frame) {
+    return false;
+  }
+
+  return canPartiallyScroll({
+    current: frame.scroll.current,
+    max: frame.scroll.max,
+    change,
+  });
+};
+
+export const getDroppableOverlap = (
+  droppable: DroppableDimension,
+  change: Position,
+): ?Position => {
+  const frame: ?Scrollable = droppable.frame;
+
+  if (!frame) {
+    return null;
+  }
+
+  if (!canScrollDroppable(droppable, change)) {
+    return null;
+  }
+
+  return getOverlap({
+    current: frame.scroll.current,
+    max: frame.scroll.max,
+    change,
+  });
+};

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

@@ -0,0 +1,25 @@
+// @flow
+
+// Values used to control how the fluid auto scroll feels
+const config = {
+  // percentage distance from edge of container:
+  startFromPercentage: 0.25,
+  maxScrollAtPercentage: 0.05,
+  // pixels per frame
+  maxPixelScroll: 28,
+
+  // A function used to ease a percentage value
+  // A simple linear function would be: (percentage) => percentage;
+  // percentage is between 0 and 1
+  // result must be between 0 and 1
+  ease: (percentage: number): number => Math.pow(percentage, 2),
+
+  durationDampening: {
+    // ms: how long to dampen the speed of an auto scroll from the start of a drag
+    stopDampeningAt: 1200,
+    // ms: when to start accelerating the reduction of duration dampening
+    accelerateAt: 360,
+  },
+};
+
+export default config;

package/src/state/auto-scroller/fluid-scroller/did-start-in-scrollable-area.js

@@ -0,0 +1 @@
+// @flow

package/src/state/auto-scroller/fluid-scroller/get-best-scrollable-droppable.js

@@ -0,0 +1,77 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import { type Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  DroppableDimensionMap,
+  DroppableId,
+} from '../../../types';
+import { invariant } from '../../../invariant';
+import isPositionInFrame from '../../visibility/is-position-in-frame';
+import { toDroppableList } from '../../dimension-structures';
+import { find } from '../../../native-with-fallback';
+
+const getScrollableDroppables = memoizeOne(
+  (droppables: DroppableDimensionMap): DroppableDimension[] =>
+    toDroppableList(droppables).filter(
+      (droppable: DroppableDimension): boolean => {
+        // exclude disabled droppables
+        if (!droppable.isEnabled) {
+          return false;
+        }
+
+        // only want droppables that are scrollable
+        if (!droppable.frame) {
+          return false;
+        }
+
+        return true;
+      },
+    ),
+);
+
+const getScrollableDroppableOver = (
+  target: Position,
+  droppables: DroppableDimensionMap,
+): ?DroppableDimension => {
+  const maybe: ?DroppableDimension = find(
+    getScrollableDroppables(droppables),
+    (droppable: DroppableDimension): boolean => {
+      invariant(droppable.frame, 'Invalid result');
+      return isPositionInFrame(droppable.frame.pageMarginBox)(target);
+    },
+  );
+
+  return maybe;
+};
+
+type Api = {|
+  center: Position,
+  destination: ?DroppableId,
+  droppables: DroppableDimensionMap,
+|};
+
+export default ({
+  center,
+  destination,
+  droppables,
+}: Api): ?DroppableDimension => {
+  // We need to scroll the best droppable frame we can so that the
+  // placeholder buffer logic works correctly
+
+  if (destination) {
+    const dimension: DroppableDimension = droppables[destination];
+    if (!dimension.frame) {
+      return null;
+    }
+    return dimension;
+  }
+
+  // 2. If we are not over a droppable - are we over a droppable frame?
+  const dimension: ?DroppableDimension = getScrollableDroppableOver(
+    center,
+    droppables,
+  );
+
+  return dimension;
+};

package/src/state/auto-scroller/fluid-scroller/get-droppable-scroll-change.js

@@ -0,0 +1,50 @@
+// @flow
+import type { Position, Rect } from 'css-box-model';
+import type {
+  DroppableDimension,
+  FluidScrollerOptions,
+  Scrollable,
+} from '../../../types';
+import getScroll from './get-scroll';
+import { canScrollDroppable } from '../can-scroll';
+
+type Args = {|
+  droppable: DroppableDimension,
+  subject: Rect,
+  center: Position,
+  centerInitial: Position,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+  fluidScrollerOptions?: FluidScrollerOptions,
+|};
+
+export default ({
+  droppable,
+  subject,
+  center,
+  centerInitial,
+  dragStartTime,
+  shouldUseTimeDampening,
+  fluidScrollerOptions,
+}: Args): ?Position => {
+  // We know this has a closestScrollable
+  const frame: ?Scrollable = droppable.frame;
+
+  // this should never happen - just being safe
+  if (!frame) {
+    return null;
+  }
+
+  const scroll: ?Position = getScroll({
+    dragStartTime,
+    container: frame.pageMarginBox,
+    containerScroll: frame.scroll,
+    subject,
+    center,
+    centerInitial,
+    shouldUseTimeDampening,
+    fluidScrollerOptions,
+  });
+
+  return scroll && canScrollDroppable(droppable, scroll) ? scroll : null;
+};

package/src/state/auto-scroller/fluid-scroller/get-percentage.js

@@ -0,0 +1,25 @@
+// @flow
+import { warning } from '../../../dev-warning';
+
+type Args = {|
+  startOfRange: number,
+  endOfRange: number,
+  current: number,
+|};
+
+export default ({ startOfRange, endOfRange, current }: Args): number => {
+  const range: number = endOfRange - startOfRange;
+
+  if (range === 0) {
+    warning(`
+      Detected distance range of 0 in the fluid auto scroller
+      This is unexpected and would cause a divide by 0 issue.
+      Not allowing an auto scroll
+    `);
+    return 0;
+  }
+
+  const currentInRange: number = current - startOfRange;
+  const percentage: number = currentInRange / range;
+  return percentage;
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/adjust-for-size-limits.js

@@ -0,0 +1,30 @@
+// @flow
+import type { Rect, Position } from 'css-box-model';
+
+type Args = {|
+  container: Rect,
+  subject: Rect,
+  proposedScroll: Position,
+|};
+
+export default ({ container, subject, proposedScroll }: Args): ?Position => {
+  const isTooBigVertically: boolean = subject.height > container.height;
+  const isTooBigHorizontally: boolean = subject.width > container.width;
+
+  // not too big on any axis
+  if (!isTooBigHorizontally && !isTooBigVertically) {
+    return proposedScroll;
+  }
+
+  // too big on both axis
+  if (isTooBigHorizontally && isTooBigVertically) {
+    return null;
+  }
+
+  // Only too big on one axis
+  // Exclude the axis that we cannot scroll on
+  return {
+    x: isTooBigHorizontally ? 0 : proposedScroll.x,
+    y: isTooBigVertically ? 0 : proposedScroll.y,
+  };
+};