@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/invariant.ts

@@ -0,0 +1,64 @@
+// @flow
+/* eslint-disable no-restricted-syntax */
+const isProduction: boolean = process.env.NODE_ENV === 'production';
+const prefix: string = 'Invariant failed';
+
+// Want to use this:
+// export class RbdInvariant extends Error { }
+// But it causes babel to bring in a lot of code
+
+// export function RbdInvariant(message: string) {
+//   this.message = message;
+// }
+// // $FlowFixMe
+// RbdInvariant.prototype.toString = function toString() {
+//   return this.message;
+// };
+
+// // A copy-paste of tiny-invariant but with a custom error type
+// // Throw an error if the condition fails
+// export function invariant(condition: unknown, message?: string) {
+//   if (condition) {
+//     return;
+//   }
+
+//   if (isProduction) {
+//     // In production we strip the message but still throw
+//     throw new RbdInvariant(prefix);
+//   } else {
+//     // When not in production we allow the message to pass through
+//     // *This block will be removed in production builds*
+//     throw new RbdInvariant(`${prefix}: ${message || ''}`);
+//   }
+// }
+
+
+export class RbdInvariant extends Error {
+  constructor(message: string) {
+    super(message);
+
+    this.name = 'RbdInvariant';
+
+    // Required for correct prototype chain in some JS targets
+    Object.setPrototypeOf(this, new.target.prototype);
+  }
+}
+
+// A copy-paste of tiny-invariant but with a custom error type
+// Throw an error if the condition fails
+export function invariant(
+  condition: unknown,
+  message?: string,
+): asserts condition {
+  if (condition) {
+    return;
+  }
+
+  if (isProduction) {
+    // In production we strip the message but still throw
+    throw new RbdInvariant(prefix);
+  } else {
+    // In development we allow the message to pass through
+    throw new RbdInvariant(`${prefix}: ${message || ''}`);
+  }
+}

package/src/native-with-fallback.ts

@@ -0,0 +1,69 @@
+// @flow
+/* eslint-disable es5/no-es6-methods */
+/* eslint-disable es5/no-es6-static-methods */
+/* eslint-disable no-restricted-globals */
+
+type Map<T> = {
+  [key: string]: T,
+};
+
+export function isInteger(value: unknown): boolean {
+  if (Number.isInteger) {
+    return Number.isInteger(value);
+  }
+  return (
+    typeof value === 'number' && isFinite(value) && Math.floor(value) === value
+  );
+}
+
+// Using this helper to ensure there are correct flow types
+// https://github.com/facebook/flow/issues/2221
+export function values<T>(map: Map<T>): T[] {
+  if (Object.values) {
+    // $FlowFixMe - Object.values currently does not have good flow support
+    return Object.values(map);
+  }
+
+  return Object.keys(map).map((key) => map[key]);
+}
+
+// Could also extend to pass index and list
+type PredicateFn<T> = (value: T) => boolean;
+
+// TODO: swap order
+export function findIndex<T>(
+  list: Array<T>,
+  predicate: PredicateFn<T>,
+): number {
+  if (list.findIndex) {
+    return list.findIndex(predicate);
+  }
+
+  // Using a for loop so that we can exit early
+  for (let i = 0; i < list.length; i++) {
+    if (predicate(list[i])) {
+      return i;
+    }
+  }
+  // Array.prototype.find returns -1 when nothing is found
+  return -1;
+}
+
+export function find<T>(list: Array<T>, predicate: PredicateFn<T>): T | undefined {
+  if (list.find) {
+    return list.find(predicate);
+  }
+  const index: number = findIndex(list, predicate);
+  if (index !== -1) {
+    return list[index];
+  }
+  // Array.prototype.find returns undefined when nothing is found
+  return undefined;
+}
+
+// Using this rather than Array.from as Array.from adds 2kb to the gzip
+// document.querySelector actually returns Element[], but flow thinks it is HTMLElement[]
+// So we downcast the result to Element[]
+export function toArray(list: NodeListOf<HTMLElement>): Element[] {
+  return Array.prototype.slice.call(list);
+}

package/src/screen-reader-message-preset.ts

@@ -0,0 +1,135 @@
+// @flow
+import type {
+  DraggableId,
+  DragStart,
+  DragUpdate,
+  DropResult,
+  DraggableLocation,
+  Combine,
+} from './types';
+
+// Exact
+export type MessagePreset = {
+  dragHandleUsageInstructions: string,
+  onDragStart: (start: DragStart) => string,
+  onDragUpdate: (update: DragUpdate) => string,
+  onDragEnd: (result: DropResult) => string,
+};
+
+const dragHandleUsageInstructions: string = `
+  Press space bar to start a drag.
+  When dragging you can use the arrow keys to move the item around and escape to cancel.
+  Some screen readers may require you to be in focus mode or to use your pass through key
+`;
+
+const position = (index: number): number => index + 1;
+
+// We cannot list what index the Droppable is in automatically as we are not sure how
+// the Droppable's have been configured
+const onDragStart = (start: DragStart): string => `
+  You have lifted an item in position ${position(start.source.index)}
+`;
+
+const withLocation = (
+  source: DraggableLocation,
+  destination: DraggableLocation,
+) => {
+  const isInHomeList: boolean = source.droppableId === destination.droppableId;
+
+  const startPosition: number = position(source.index);
+  const endPosition: number = position(destination.index);
+
+  if (isInHomeList) {
+    return `
+      You have moved the item from position ${startPosition}
+      to position ${endPosition}
+    `;
+  }
+
+  return `
+    You have moved the item from position ${startPosition}
+    in list ${source.droppableId}
+    to list ${destination.droppableId}
+    in position ${endPosition}
+  `;
+};
+
+const withCombine = (
+  id: DraggableId,
+  source: DraggableLocation,
+  combine: Combine,
+): string => {
+  const inHomeList: boolean = source.droppableId === combine.droppableId;
+
+  if (inHomeList) {
+    return `
+      The item ${id}
+      has been combined with ${combine.draggableId}`;
+  }
+
+  return `
+      The item ${id}
+      in list ${source.droppableId}
+      has been combined with ${combine.draggableId}
+      in list ${combine.droppableId}
+    `;
+};
+
+const onDragUpdate = (update: DragUpdate): string => {
+  const location: DraggableLocation | null = update.destination;
+  if (location) {
+    return withLocation(update.source, location);
+  }
+
+  const combine: Combine | null = update.combine;
+  if (combine) {
+    return withCombine(update.draggableId, update.source, combine);
+  }
+
+  return 'You are over an area that cannot be dropped on';
+};
+
+const returnedToStart = (source: DraggableLocation): string => `
+  The item has returned to its starting position
+  of ${position(source.index)}
+`;
+
+const onDragEnd = (result: DropResult): string => {
+  if (result.reason === 'CANCEL') {
+    return `
+      Movement cancelled.
+      ${returnedToStart(result.source)}
+    `;
+  }
+
+  const location: DraggableLocation | null = result.destination;
+  const combine: Combine | null = result.combine;
+
+  if (location) {
+    return `
+      You have dropped the item.
+      ${withLocation(result.source, location)}
+    `;
+  }
+
+  if (combine) {
+    return `
+      You have dropped the item.
+      ${withCombine(result.draggableId, result.source, combine)}
+    `;
+  }
+
+  return `
+    The item has been dropped while not over a drop area.
+    ${returnedToStart(result.source)}
+  `;
+};
+
+const preset: MessagePreset = {
+  dragHandleUsageInstructions,
+  onDragStart,
+  onDragUpdate,
+  onDragEnd,
+};
+
+export default preset;

package/src/state/action-creators.ts

@@ -0,0 +1,358 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  Critical,
+  DraggableId,
+  DroppableId,
+  CompletedDrag,
+  MovementMode,
+  Viewport,
+  DimensionMap,
+  DropReason,
+  Published,
+} from '../types';
+
+// Exact
+export type BeforeInitialCaptureArgs = {
+  draggableId: DraggableId,
+  movementMode: MovementMode,
+};
+
+// Exact
+export type BeforeInitialCaptureAction = {
+  type: 'BEFORE_INITIAL_CAPTURE',
+  payload: BeforeInitialCaptureArgs,
+};
+
+export const beforeInitialCapture = (
+  args: BeforeInitialCaptureArgs,
+): BeforeInitialCaptureAction => ({
+  type: 'BEFORE_INITIAL_CAPTURE',
+  payload: args,
+});
+
+// Exact
+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,
+};
+
+// Exact
+export type LiftAction = {
+  type: 'LIFT',
+  payload: LiftArgs,
+};
+
+export const lift = (args: LiftArgs): LiftAction => ({
+  type: 'LIFT',
+  payload: args,
+});
+
+// Exact
+export type InitialPublishArgs = {
+  critical: Critical,
+  dimensions: DimensionMap,
+  clientSelection: Position,
+  viewport: Viewport,
+  movementMode: MovementMode,
+};
+
+// Exact
+export type InitialPublishAction = {
+  type: 'INITIAL_PUBLISH',
+  payload: InitialPublishArgs,
+};
+
+export const initialPublish = (
+  args: InitialPublishArgs,
+): InitialPublishAction => ({
+  type: 'INITIAL_PUBLISH',
+  payload: args,
+});
+
+// Exact
+export type WhileDraggingPublishAction = {
+  type: 'PUBLISH_WHILE_DRAGGING',
+  payload: Published,
+};
+
+export const publishWhileDragging = (
+  args: Published,
+): WhileDraggingPublishAction => ({
+  type: 'PUBLISH_WHILE_DRAGGING',
+  payload: args,
+});
+
+// Exact
+export type CollectionStartingAction = {
+  type: 'COLLECTION_STARTING',
+  payload: null,
+};
+
+export const collectionStarting = (): CollectionStartingAction => ({
+  type: 'COLLECTION_STARTING',
+  payload: null,
+});
+
+export type UpdateDroppableScrollArgs = {
+  id: DroppableId,
+  newScroll: Position,
+};
+
+// Exact
+export type UpdateDroppableScrollAction = {
+  type: 'UPDATE_DROPPABLE_SCROLL',
+  payload: UpdateDroppableScrollArgs,
+};
+
+export const updateDroppableScroll = (
+  args: UpdateDroppableScrollArgs,
+): UpdateDroppableScrollAction => ({
+  type: 'UPDATE_DROPPABLE_SCROLL',
+  payload: args,
+});
+
+// Exact
+export type UpdateDroppableIsEnabledArgs = {
+  id: DroppableId,
+  isEnabled: boolean,
+};
+
+// Exact
+export type UpdateDroppableIsEnabledAction = {
+  type: 'UPDATE_DROPPABLE_IS_ENABLED',
+  payload: UpdateDroppableIsEnabledArgs,
+};
+
+export const updateDroppableIsEnabled = (
+  args: UpdateDroppableIsEnabledArgs,
+): UpdateDroppableIsEnabledAction => ({
+  type: 'UPDATE_DROPPABLE_IS_ENABLED',
+  payload: args,
+});
+
+// Exact
+export type UpdateDroppableIsCombineEnabledArgs = {
+  id: DroppableId,
+  isCombineEnabled: boolean,
+};
+
+// Exact
+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,
+});
+
+// Exact
+export type MoveArgs = {
+  client: Position,
+};
+
+// Exact
+export type MoveAction = {
+  type: 'MOVE',
+  payload: MoveArgs,
+};
+
+export const move = (args: MoveArgs): MoveAction => ({
+  type: 'MOVE',
+  payload: args,
+});
+
+// Exact
+type MoveByWindowScrollArgs = {
+  newScroll: Position,
+};
+
+// Exact
+export type MoveByWindowScrollAction = {
+  type: 'MOVE_BY_WINDOW_SCROLL',
+  payload: MoveByWindowScrollArgs,
+};
+
+export const moveByWindowScroll = (
+  args: MoveByWindowScrollArgs,
+): MoveByWindowScrollAction => ({
+  type: 'MOVE_BY_WINDOW_SCROLL',
+  payload: args,
+});
+
+// Exact
+export type UpdateViewportMaxScrollArgs = {
+  maxScroll: Position,
+};
+
+// Exact
+type UpdateViewportMaxScrollAction = {
+  type: 'UPDATE_VIEWPORT_MAX_SCROLL',
+  payload: UpdateViewportMaxScrollArgs,
+};
+
+export const updateViewportMaxScroll = (
+  args: UpdateViewportMaxScrollArgs,
+): UpdateViewportMaxScrollAction => ({
+  type: 'UPDATE_VIEWPORT_MAX_SCROLL',
+  payload: args,
+});
+
+// Exact
+export type MoveUpAction = {
+  type: 'MOVE_UP',
+  payload: null,
+};
+
+export const moveUp = (): MoveUpAction => ({
+  type: 'MOVE_UP',
+  payload: null,
+});
+
+// Exact
+export type MoveDownAction = {
+  type: 'MOVE_DOWN',
+  payload: null,
+};
+
+export const moveDown = (): MoveDownAction => ({
+  type: 'MOVE_DOWN',
+  payload: null,
+});
+
+// Exact
+export type MoveRightAction = {
+  type: 'MOVE_RIGHT',
+  payload: null,
+};
+
+export const moveRight = (): MoveRightAction => ({
+  type: 'MOVE_RIGHT',
+  payload: null,
+});
+
+// Exact
+export type MoveLeftAction = {
+  type: 'MOVE_LEFT',
+  payload: null,
+};
+
+export const moveLeft = (): MoveLeftAction => ({
+  type: 'MOVE_LEFT',
+  payload: null,
+});
+
+// Exact
+type FlushAction = {
+  type: 'FLUSH',
+  payload: null,
+};
+
+export const flush = (): FlushAction => ({
+  type: 'FLUSH',
+  payload: null,
+});
+
+// Exact
+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,
+});
+
+// Exact
+export type DropCompleteArgs = {
+  completed: CompletedDrag,
+};
+
+export type DropCompleteAction = {
+  type: 'DROP_COMPLETE',
+  payload: DropCompleteArgs,
+};
+
+export const completeDrop = (args: DropCompleteArgs): DropCompleteAction => ({
+  type: 'DROP_COMPLETE',
+  payload: args,
+});
+
+// Exact
+type DropArgs = {
+  reason: DropReason,
+};
+
+// Exact
+export type DropAction = {
+  type: 'DROP',
+  payload: DropArgs,
+};
+
+export const drop = (args: DropArgs): DropAction => ({
+  type: 'DROP',
+  payload: args,
+});
+
+export const cancel = () => drop({ reason: 'CANCEL' });
+
+// Exact
+export type DropPendingAction = {
+  type: 'DROP_PENDING',
+  payload: DropArgs,
+};
+
+export const dropPending = (args: DropArgs): DropPendingAction => ({
+  type: 'DROP_PENDING',
+  payload: args,
+});
+
+// Exact
+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.ts

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