@planningcenter/react-beautiful-dnd 13.2.0

package/src/debug/timings.js

@@ -0,0 +1,86 @@
+// @flow
+type Records = {
+  [key: string]: number,
+};
+
+const records: Records = {};
+let isEnabled: boolean = false;
+
+const isTimingsEnabled = (): boolean => isEnabled;
+
+export const forceEnable = () => {
+  isEnabled = true;
+};
+
+// Debug: uncomment to enable
+// forceEnable();
+
+export const start = (key: string) => {
+  // we want to strip all the code out for production builds
+  // draw back: can only do timings in dev env (which seems to be fine for now)
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isTimingsEnabled()) {
+      return;
+    }
+    const now: number = performance.now();
+
+    records[key] = now;
+  }
+};
+
+type Style = {|
+  textColor: string,
+  symbol: string,
+|};
+
+export const finish = (key: string) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isTimingsEnabled()) {
+      return;
+    }
+    const now: number = performance.now();
+
+    const previous: ?number = records[key];
+
+    if (!previous) {
+      // eslint-disable-next-line no-console
+      console.warn('cannot finish timing as no previous time found', key);
+      return;
+    }
+
+    const result: number = now - previous;
+    const rounded: string = result.toFixed(2);
+
+    const style: Style = (() => {
+      if (result < 12) {
+        return {
+          textColor: 'green',
+          symbol: '✅',
+        };
+      }
+      if (result < 40) {
+        return {
+          textColor: 'orange',
+          symbol: '⚠️',
+        };
+      }
+      return {
+        textColor: 'red',
+        symbol: '❌',
+      };
+    })();
+
+    // eslint-disable-next-line no-console
+    console.log(
+      `${style.symbol} %cTiming %c${rounded} %cms %c${key}`,
+      // title
+      'color: blue; font-weight: bold;',
+      // result
+      `color: ${style.textColor}; font-size: 1.1em;`,
+      // ms
+      'color: grey;',
+      // key
+      'color: purple; font-weight: bold;',
+    );
+  }
+};

package/src/dev-warning.js

@@ -0,0 +1,50 @@
+// @flow
+
+const isProduction: boolean = process.env.NODE_ENV === 'production';
+
+// not replacing newlines (which \s does)
+const spacesAndTabs: RegExp = /[ \t]{2,}/g;
+const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
+
+// using .trim() to clear the any newlines before the first text and after last text
+const clean = (value: string): string =>
+  value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
+
+const getDevMessage = (message: string): string =>
+  clean(`
+  %creact-beautiful-dnd
+
+  %c${clean(message)}
+
+  %c👷‍ This is a development only message. It will be removed in production builds.
+`);
+
+export const getFormattedMessage = (message: string): string[] => [
+  getDevMessage(message),
+  // title (green400)
+  'color: #00C584; font-size: 1.2em; font-weight: bold;',
+  // message
+  'line-height: 1.5',
+  // footer (purple300)
+  'color: #723874;',
+];
+
+const isDisabledFlag: string = '__react-beautiful-dnd-disable-dev-warnings';
+
+export function log(type: 'error' | 'warn', message: string) {
+  // no warnings in production
+  if (isProduction) {
+    return;
+  }
+
+  // manual opt out of warnings
+  if (typeof window !== 'undefined' && window[isDisabledFlag]) {
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console[type](...getFormattedMessage(message));
+}
+
+export const warning = log.bind(null, 'warn');
+export const error = log.bind(null, 'error');

package/src/empty.js

@@ -0,0 +1,6 @@
+// @flow
+export function noop(): void {}
+
+export function identity<T>(value: T): T {
+  return value;
+}

package/src/index.js

@@ -0,0 +1,67 @@
+// @flow
+
+// Components
+
+export { default as DragDropContext } from './view/drag-drop-context';
+export { default as Droppable } from './view/droppable';
+export { default as Draggable } from './view/draggable';
+
+// Default sensors
+
+export {
+  useMouseSensor,
+  useTouchSensor,
+  useKeyboardSensor,
+} from './view/use-sensor-marshal';
+
+// Utils
+
+export { resetServerContext } from './view/drag-drop-context';
+
+// Public flow types
+
+export type {
+  Id,
+  TypeId,
+  DraggableId,
+  DroppableId,
+  DraggableRubric,
+  MovementMode,
+  BeforeCapture,
+  DragStart,
+  DragUpdate,
+  DropResult,
+  Direction,
+  ResponderProvided,
+  Announce,
+  DraggableLocation,
+  OnBeforeCaptureResponder,
+  OnBeforeDragStartResponder,
+  OnDragStartResponder,
+  OnDragUpdateResponder,
+  OnDragEndResponder,
+  SensorAPI,
+  Sensor,
+  TryGetLock,
+  TryGetLockOptions,
+} from './types';
+
+// Droppable types
+export type {
+  Provided as DroppableProvided,
+  StateSnapshot as DroppableStateSnapshot,
+  DroppableProps,
+} from './view/droppable/droppable-types';
+
+// Draggable types
+export type {
+  Provided as DraggableProvided,
+  StateSnapshot as DraggableStateSnapshot,
+  DragHandleProps,
+  DropAnimation,
+  DraggableProps,
+  DraggableStyle,
+  DraggingStyle,
+  NotDraggingStyle,
+  ChildrenFn as DraggableChildrenFn,
+} from './view/draggable/draggable-types';

package/src/invariant.js

@@ -0,0 +1,33 @@
+// @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: mixed, 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 || ''}`);
+  }
+}

package/src/native-with-fallback.js

@@ -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: mixed): 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 {
+  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: NodeList<HTMLElement>): Element[] {
+  return Array.prototype.slice.call(list);
+}

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

@@ -0,0 +1,134 @@
+// @flow
+import type {
+  DraggableId,
+  DragStart,
+  DragUpdate,
+  DropResult,
+  DraggableLocation,
+  Combine,
+} from './types';
+
+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 = update.destination;
+  if (location) {
+    return withLocation(update.source, location);
+  }
+
+  const combine: ?Combine = 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 = result.destination;
+  const combine: ?Combine = 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;