@planningcenter/react-beautiful-dnd 13.2.0

package/src/view/data-attributes.js

@@ -0,0 +1,37 @@
+// @flow
+export const prefix: string = 'data-rbd';
+export const dragHandle = (() => {
+  const base = `${prefix}-drag-handle`;
+
+  return {
+    base,
+    draggableId: `${base}-draggable-id`,
+    contextId: `${base}-context-id`,
+  };
+})();
+
+export const draggable = (() => {
+  const base: string = `${prefix}-draggable`;
+  return {
+    base,
+    contextId: `${base}-context-id`,
+    id: `${base}-id`,
+  };
+})();
+
+export const droppable = (() => {
+  const base: string = `${prefix}-droppable`;
+  return {
+    base,
+    contextId: `${base}-context-id`,
+    id: `${base}-id`,
+  };
+})();
+
+export const placeholder = {
+  contextId: `${prefix}-placeholder-context-id`,
+};
+
+export const scrollContainer = {
+  contextId: `${prefix}-scroll-container-context-id`,
+};

package/src/view/drag-drop-context/app.jsx

@@ -0,0 +1,273 @@
+// @flow
+import React, { useEffect, useRef, type Node } from 'react';
+import { bindActionCreators } from 'redux';
+import { Provider } from 'react-redux';
+import { useMemo, useCallback } from 'use-memo-one';
+import { invariant } from '../../invariant';
+import createStore from '../../state/create-store';
+import createDimensionMarshal from '../../state/dimension-marshal/dimension-marshal';
+import canStartDrag from '../../state/can-start-drag';
+import scrollWindow from '../window/scroll-window';
+import createAutoScroller from '../../state/auto-scroller';
+import useStyleMarshal from '../use-style-marshal/use-style-marshal';
+import useFocusMarshal from '../use-focus-marshal';
+import useRegistry from '../../state/registry/use-registry';
+import type { Registry } from '../../state/registry/registry-types';
+import type { FocusMarshal } from '../use-focus-marshal/focus-marshal-types';
+import type { AutoScroller } from '../../state/auto-scroller/auto-scroller-types';
+import type { StyleMarshal } from '../use-style-marshal/style-marshal-types';
+import type {
+  DimensionMarshal,
+  Callbacks as DimensionMarshalCallbacks,
+} from '../../state/dimension-marshal/dimension-marshal-types';
+import type {
+  DraggableId,
+  State,
+  Responders,
+  Announce,
+  Sensor,
+  ElementId,
+  FluidScrollerOptions,
+} from '../../types';
+import type { Store, Action } from '../../state/store-types';
+import type { SetAppCallbacks, AppCallbacks } from './drag-drop-context-types';
+import StoreContext from '../context/store-context';
+import {
+  move,
+  publishWhileDragging,
+  updateDroppableScroll,
+  updateDroppableIsEnabled,
+  updateDroppableIsCombineEnabled,
+  collectionStarting,
+  flush,
+} from '../../state/action-creators';
+import isMovementAllowed from '../../state/is-movement-allowed';
+import useAnnouncer from '../use-announcer';
+import useHiddenTextElement from '../use-hidden-text-element';
+import AppContext, { type AppContextValue } from '../context/app-context';
+import useStartupValidation from './use-startup-validation';
+import usePrevious from '../use-previous-ref';
+import { warning } from '../../dev-warning';
+import useSensorMarshal from '../use-sensor-marshal/use-sensor-marshal';
+
+export type Props = {|
+  ...Responders,
+  contextId: string,
+  setCallbacks: SetAppCallbacks,
+  nonce?: string,
+  // we do not technically need any children for this component
+  children: Node | null,
+
+  // sensors
+  sensors?: Sensor[],
+  enableDefaultSensors?: ?boolean,
+
+  // screen reader
+  dragHandleUsageInstructions: string,
+
+  // fluidScroller behavior options
+  fluidScrollerOptions?: FluidScrollerOptions,
+|};
+
+const createResponders = (props: Props): Responders => ({
+  onBeforeCapture: props.onBeforeCapture,
+  onBeforeDragStart: props.onBeforeDragStart,
+  onDragStart: props.onDragStart,
+  onDragEnd: props.onDragEnd,
+  onDragUpdate: props.onDragUpdate,
+});
+
+// flow does not support MutableRefObject
+// type LazyStoreRef = MutableRefObject<?Store>;
+type LazyStoreRef = {| current: ?Store |};
+
+function getStore(lazyRef: LazyStoreRef): Store {
+  invariant(lazyRef.current, 'Could not find store from lazy ref');
+  return lazyRef.current;
+}
+
+export default function App(props: Props) {
+  const {
+    contextId,
+    setCallbacks,
+    sensors,
+    nonce,
+    dragHandleUsageInstructions,
+    fluidScrollerOptions,
+  } = props;
+  const lazyStoreRef: LazyStoreRef = useRef<?Store>(null);
+
+  useStartupValidation();
+
+  // lazy collection of responders using a ref - update on ever render
+  const lastPropsRef = usePrevious<Props>(props);
+
+  const getResponders: () => Responders = useCallback(() => {
+    return createResponders(lastPropsRef.current);
+  }, [lastPropsRef]);
+
+  const announce: Announce = useAnnouncer(contextId);
+
+  const dragHandleUsageInstructionsId: ElementId = useHiddenTextElement({
+    contextId,
+    text: dragHandleUsageInstructions,
+  });
+  const styleMarshal: StyleMarshal = useStyleMarshal(contextId, nonce);
+
+  const lazyDispatch: (Action) => void = useCallback((action: Action): void => {
+    getStore(lazyStoreRef).dispatch(action);
+  }, []);
+
+  const marshalCallbacks: DimensionMarshalCallbacks = useMemo(
+    () =>
+      bindActionCreators(
+        {
+          publishWhileDragging,
+          updateDroppableScroll,
+          updateDroppableIsEnabled,
+          updateDroppableIsCombineEnabled,
+          collectionStarting,
+        },
+        // $FlowFixMe - not sure why this is wrong
+        lazyDispatch,
+      ),
+    [lazyDispatch],
+  );
+
+  const registry: Registry = useRegistry();
+
+  const dimensionMarshal: DimensionMarshal = useMemo<DimensionMarshal>(() => {
+    return createDimensionMarshal(registry, marshalCallbacks);
+  }, [registry, marshalCallbacks]);
+
+  const fluidScrollerOptionsRef = useRef(fluidScrollerOptions);
+
+  const autoScroller: AutoScroller = useMemo<AutoScroller>(
+    () =>
+      createAutoScroller({
+        scrollWindow,
+        scrollDroppable: dimensionMarshal.scrollDroppable,
+        ...bindActionCreators(
+          {
+            move,
+          },
+          // $FlowFixMe - not sure why this is wrong
+          lazyDispatch,
+        ),
+        fluidScrollerOptions: fluidScrollerOptionsRef.current,
+      }),
+    [dimensionMarshal.scrollDroppable, lazyDispatch],
+  );
+
+  const focusMarshal: FocusMarshal = useFocusMarshal(contextId);
+
+  const store: Store = useMemo<Store>(
+    () =>
+      createStore({
+        announce,
+        autoScroller,
+        dimensionMarshal,
+        focusMarshal,
+        getResponders,
+        styleMarshal,
+      }),
+    [
+      announce,
+      autoScroller,
+      dimensionMarshal,
+      focusMarshal,
+      getResponders,
+      styleMarshal,
+    ],
+  );
+
+  // Checking for unexpected store changes
+  if (process.env.NODE_ENV !== 'production') {
+    if (lazyStoreRef.current && lazyStoreRef.current !== store) {
+      warning('unexpected store change');
+    }
+  }
+
+  // assigning lazy store ref
+  lazyStoreRef.current = store;
+
+  const tryResetStore = useCallback(() => {
+    const current: Store = getStore(lazyStoreRef);
+    const state: State = current.getState();
+    if (state.phase !== 'IDLE') {
+      current.dispatch(flush());
+    }
+  }, []);
+
+  const isDragging = useCallback((): boolean => {
+    const state: State = getStore(lazyStoreRef).getState();
+    return state.isDragging || state.phase === 'DROP_ANIMATING';
+  }, []);
+
+  const appCallbacks: AppCallbacks = useMemo(
+    () => ({
+      isDragging,
+      tryAbort: tryResetStore,
+    }),
+    [isDragging, tryResetStore],
+  );
+
+  // doing this in render rather than a side effect so any errors on the
+  // initial mount are caught
+  setCallbacks(appCallbacks);
+
+  const getCanLift = useCallback(
+    (id: DraggableId) => canStartDrag(getStore(lazyStoreRef).getState(), id),
+    [],
+  );
+
+  const getIsMovementAllowed = useCallback(
+    () => isMovementAllowed(getStore(lazyStoreRef).getState()),
+    [],
+  );
+
+  const appContext: AppContextValue = useMemo(
+    () => ({
+      marshal: dimensionMarshal,
+      focus: focusMarshal,
+      contextId,
+      canLift: getCanLift,
+      isMovementAllowed: getIsMovementAllowed,
+      dragHandleUsageInstructionsId,
+      registry,
+      fluidScrollerOptions,
+    }),
+    [
+      contextId,
+      dimensionMarshal,
+      dragHandleUsageInstructionsId,
+      focusMarshal,
+      getCanLift,
+      getIsMovementAllowed,
+      registry,
+      fluidScrollerOptions,
+    ],
+  );
+
+  useSensorMarshal({
+    contextId,
+    store,
+    registry,
+    customSensors: sensors,
+    // default to 'true' unless 'false' is explicitly passed
+    enableDefaultSensors: props.enableDefaultSensors !== false,
+  });
+
+  // Clean store when unmounting
+  useEffect(() => {
+    return tryResetStore;
+  }, [tryResetStore]);
+
+  return (
+    <AppContext.Provider value={appContext}>
+      <Provider context={StoreContext} store={store}>
+        {props.children}
+      </Provider>
+    </AppContext.Provider>
+  );
+}

package/src/view/drag-drop-context/check-doctype.js

@@ -0,0 +1,39 @@
+// @flow
+import { warning } from '../../dev-warning';
+
+const suffix: string = `
+  We expect a html5 doctype: <!doctype html>
+  This is to ensure consistent browser layout and measurement
+
+  More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/doctype.md
+`;
+
+export default (doc: Document) => {
+  const doctype: ?DocumentType = doc.doctype;
+
+  if (!doctype) {
+    warning(`
+      No <!doctype html> found.
+
+      ${suffix}
+    `);
+    return;
+  }
+
+  if (doctype.name.toLowerCase() !== 'html') {
+    warning(`
+      Unexpected <!doctype> found: (${doctype.name})
+
+      ${suffix}
+    `);
+  }
+
+  if (doctype.publicId !== '') {
+    warning(`
+      Unexpected <!doctype> publicId found: (${doctype.publicId})
+      A html5 doctype does not have a publicId
+
+      ${suffix}
+    `);
+  }
+};

package/src/view/drag-drop-context/check-react-version.js

@@ -0,0 +1,71 @@
+// @flow
+import { invariant } from '../../invariant';
+import { warning } from '../../dev-warning';
+
+type Version = {|
+  major: number,
+  minor: number,
+  patch: number,
+  raw: string,
+|};
+
+// We can use a simple regex here given that:
+// - the version that react supplies is always full: eg 16.5.2
+// - our peer dependency version is to a full version (eg ^16.3.1)
+const semver: RegExp = /(\d+)\.(\d+)\.(\d+)/;
+const getVersion = (value: string): Version => {
+  const result: ?(string[]) = semver.exec(value);
+
+  invariant(result != null, `Unable to parse React version ${value}`);
+
+  const major: number = Number(result[1]);
+  const minor: number = Number(result[2]);
+  const patch: number = Number(result[3]);
+
+  return {
+    major,
+    minor,
+    patch,
+    raw: value,
+  };
+};
+
+const isSatisfied = (expected: Version, actual: Version): boolean => {
+  if (actual.major > expected.major) {
+    return true;
+  }
+
+  if (actual.major < expected.major) {
+    return false;
+  }
+
+  // major is equal, continue on
+
+  if (actual.minor > expected.minor) {
+    return true;
+  }
+
+  if (actual.minor < expected.minor) {
+    return false;
+  }
+
+  // minor is equal, continue on
+
+  return actual.patch >= expected.patch;
+};
+
+export default (peerDepValue: string, actualValue: string) => {
+  const peerDep: Version = getVersion(peerDepValue);
+  const actual: Version = getVersion(actualValue);
+
+  if (isSatisfied(peerDep, actual)) {
+    return;
+  }
+
+  warning(`
+    React version: [${actual.raw}]
+    does not satisfy expected peer dependency version: [${peerDep.raw}]
+
+    This can result in run time bugs, and even fatal crashes
+  `);
+};

package/src/view/drag-drop-context/drag-drop-context-types.js

@@ -0,0 +1,7 @@
+// @flow
+export type AppCallbacks = {|
+  isDragging: () => boolean,
+  tryAbort: () => void,
+|};
+
+export type SetAppCallbacks = (callbacks: AppCallbacks) => void;

package/src/view/drag-drop-context/drag-drop-context.jsx

@@ -0,0 +1,68 @@
+// @flow
+import React, { type Node } from 'react';
+import type {
+  FluidScrollerOptions,
+  Responders,
+  ContextId,
+  Sensor,
+} from '../../types';
+import ErrorBoundary from './error-boundary';
+import preset from '../../screen-reader-message-preset';
+import App from './app';
+import useUniqueContextId, {
+  reset as resetContextId,
+} from './use-unique-context-id';
+import { reset as resetUniqueIds } from '../use-unique-id';
+
+type Props = {|
+  ...Responders,
+  // We do not technically need any children for this component
+  children: Node | null,
+  // Read out by screen readers when focusing on a drag handle
+  dragHandleUsageInstructions?: string,
+  // Used for strict content security policies
+  // See our [content security policy guide](/docs/guides/content-security-policy.md)
+  nonce?: string,
+  // See our [sensor api](/docs/sensors/sensor-api.md)
+  sensors?: Sensor[],
+  enableDefaultSensors?: ?boolean,
+  // fluid scroller options
+  fluidScrollerOptions?: FluidScrollerOptions,
+|};
+
+// Reset any context that gets persisted across server side renders
+export function resetServerContext() {
+  resetContextId();
+  resetUniqueIds();
+}
+
+export default function DragDropContext(props: Props) {
+  const contextId: ContextId = useUniqueContextId();
+  const dragHandleUsageInstructions: string =
+    props.dragHandleUsageInstructions || preset.dragHandleUsageInstructions;
+
+  // We need the error boundary to be on the outside of App
+  // so that it can catch any errors caused by App
+  return (
+    <ErrorBoundary>
+      {(setCallbacks) => (
+        <App
+          nonce={props.nonce}
+          contextId={contextId}
+          setCallbacks={setCallbacks}
+          dragHandleUsageInstructions={dragHandleUsageInstructions}
+          enableDefaultSensors={props.enableDefaultSensors}
+          sensors={props.sensors}
+          onBeforeCapture={props.onBeforeCapture}
+          onBeforeDragStart={props.onBeforeDragStart}
+          onDragStart={props.onDragStart}
+          onDragUpdate={props.onDragUpdate}
+          onDragEnd={props.onDragEnd}
+          fluidScrollerOptions={props.fluidScrollerOptions}
+        >
+          {props.children}
+        </App>
+      )}
+    </ErrorBoundary>
+  );
+}

package/src/view/drag-drop-context/error-boundary.jsx

@@ -0,0 +1,88 @@
+// @flow
+import React, { type Node } from 'react';
+import { warning, error } from '../../dev-warning';
+import { noop } from '../../empty';
+import bindEvents from '../event-bindings/bind-events';
+import { RbdInvariant } from '../../invariant';
+import type { AppCallbacks } from './drag-drop-context-types';
+
+type Props = {|
+  children: (setCallbacks: (callbacks: AppCallbacks) => void) => Node,
+|};
+
+// Lame that this is not in flow
+type ErrorEvent = Event & {
+  error: ?Error,
+};
+
+export default class ErrorBoundary extends React.Component<Props> {
+  callbacks: ?AppCallbacks = null;
+  unbind: () => void = noop;
+
+  componentDidMount() {
+    this.unbind = bindEvents(window, [
+      {
+        eventName: 'error',
+        fn: this.onWindowError,
+      },
+    ]);
+  }
+
+  componentDidCatch(err: Error) {
+    if (err instanceof RbdInvariant) {
+      if (process.env.NODE_ENV !== 'production') {
+        error(err.message);
+      }
+
+      this.setState({});
+      return;
+    }
+
+    // throwing error for other error boundaries
+    // eslint-disable-next-line no-restricted-syntax
+    throw err;
+  }
+
+  componentWillUnmount() {
+    this.unbind();
+  }
+
+  onWindowError = (event: ErrorEvent) => {
+    const callbacks: AppCallbacks = this.getCallbacks();
+
+    if (callbacks.isDragging()) {
+      callbacks.tryAbort();
+      warning(`
+        An error was caught by our window 'error' event listener while a drag was occurring.
+        The active drag has been aborted.
+      `);
+    }
+
+    const err: ?Error = event.error;
+
+    if (err instanceof RbdInvariant) {
+      // Marking the event as dealt with.
+      // This will prevent any 'uncaught' error warnings in the console
+      event.preventDefault();
+      if (process.env.NODE_ENV !== 'production') {
+        error(err.message);
+      }
+    }
+  };
+
+  getCallbacks = (): AppCallbacks => {
+    if (!this.callbacks) {
+      // eslint-disable-next-line no-restricted-syntax
+      throw new Error('Unable to find AppCallbacks in <ErrorBoundary/>');
+    }
+    return this.callbacks;
+  };
+
+  setCallbacks = (callbacks: AppCallbacks) => {
+    this.callbacks = callbacks;
+  };
+
+  render() {
+    return this.props.children(this.setCallbacks);
+  }
+}

package/src/view/drag-drop-context/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default, resetServerContext } from './drag-drop-context';

package/src/view/drag-drop-context/use-startup-validation.js

@@ -0,0 +1,13 @@
+// @flow
+import React from 'react';
+import { peerDependencies } from '../../../package.json';
+import checkReactVersion from './check-react-version';
+import checkDoctype from './check-doctype';
+import useDevSetupWarning from '../use-dev-setup-warning';
+
+export default function useStartupValidation() {
+  useDevSetupWarning(() => {
+    checkReactVersion(peerDependencies.react, React.version);
+    checkDoctype(document);
+  }, []);
+}

package/src/view/drag-drop-context/use-unique-context-id.js

@@ -0,0 +1,13 @@
+// @flow
+import { useMemo } from 'use-memo-one';
+import type { ContextId } from '../../types';
+
+let count = 0;
+
+export function reset() {
+  count = 0;
+}
+
+export default function useInstanceCount(): ContextId {
+  return useMemo(() => `${count++}`, []);
+}