@helpdice/draggable 0.0.0-stage → 0.0.2

package/src/view/data-attributes.ts

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

@@ -0,0 +1,300 @@
+// @flow
+import { useEffect, useRef, type ReactNode } from "react";
+// import { bindActionCreators } from "redux";
+import { Provider } from "react-redux";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+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,
+} 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";
+import { isDragging } from "../../state/reducer";
+
+// Exact
+export type Props = Responders & {
+  contextId: string,
+  setCallbacks: SetAppCallbacks,
+  nonce?: string,
+  // we do not technically need any children for this component
+  children: ReactNode,
+
+  // sensors
+  sensors?: Sensor[] | null,
+  enableDefaultSensors?: boolean | null,
+
+  // screen reader
+  dragHandleUsageInstructions: string,
+};
+
+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 | null };
+
+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,
+  } = props;
+  const lazyStoreRef: LazyStoreRef = useRef<Store | null>(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: (arg: 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 as LazyDispatch, // Changed to LazyDispatch but can have error to fix
+  //     ),
+  //   [lazyDispatch],
+  // );
+
+  const lazyDispatch = useCallback(
+    (action: Action) => getStore(lazyStoreRef).dispatch(action),
+    [],
+  );
+
+  const marshalCallbacks: DimensionMarshalCallbacks = useMemo(
+    () => ({
+      publishWhileDragging: (...args) =>
+        lazyDispatch(publishWhileDragging(...args)),
+
+      updateDroppableScroll: (...args) =>
+        lazyDispatch(updateDroppableScroll(...args)),
+
+      updateDroppableIsEnabled: (...args) =>
+        lazyDispatch(updateDroppableIsEnabled(...args)),
+
+      updateDroppableIsCombineEnabled: (...args) =>
+        lazyDispatch(updateDroppableIsCombineEnabled(...args)),
+
+      collectionStarting: (...args) =>
+        lazyDispatch(collectionStarting(...args)),
+    }),
+    [lazyDispatch],
+  );
+
+  const registry: Registry = useRegistry();
+
+  const dimensionMarshal: DimensionMarshal = useMemo<DimensionMarshal>(() => {
+    return createDimensionMarshal(registry, marshalCallbacks);
+  }, [registry, marshalCallbacks]);
+
+  // const autoScroller: AutoScroller = useMemo<AutoScroller>(
+  //   () =>
+  //     createAutoScroller({
+  //       scrollWindow,
+  //       scrollDroppable: dimensionMarshal.scrollDroppable,
+  //       ...bindActionCreators(
+  //         {
+  //           move,
+  //         },
+  //         // $FlowFixMe - not sure why this is wrong
+  //         lazyDispatch,
+  //       ),
+  //     }),
+  //   [dimensionMarshal.scrollDroppable, lazyDispatch],
+  // );
+
+  const autoScroller: AutoScroller = useMemo(
+    () =>
+      createAutoScroller({
+        scrollWindow,
+        scrollDroppable: dimensionMarshal.scrollDroppable,
+        move: (...args) => lazyDispatch(move(...args)),
+      }),
+    [dimensionMarshal.scrollDroppable, lazyDispatch, scrollWindow, move],
+  );
+
+  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());
+    }
+  }, []);
+
+  // Added Check for isDragging
+  const isDraggingState = useCallback((): boolean => {
+    const state: State = getStore(lazyStoreRef).getState();
+    return isDragging(state) || state.phase === "DROP_ANIMATING";
+  }, []);
+
+  const appCallbacks: AppCallbacks = useMemo(
+    () => ({
+      isDragging: isDraggingState,
+      tryAbort: tryResetStore,
+    }),
+    [isDraggingState, 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,
+    }),
+    [
+      contextId,
+      dimensionMarshal,
+      dragHandleUsageInstructionsId,
+      focusMarshal,
+      getCanLift,
+      getIsMovementAllowed,
+      registry,
+    ],
+  );
+
+  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.ts

@@ -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 | null = 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.ts

@@ -0,0 +1,72 @@
+// @flow
+import { invariant } from '../../invariant';
+import { warning } from '../../dev-warning';
+
+// Exact
+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[]) | null = 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.ts

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

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

@@ -0,0 +1,60 @@
+// @flow
+import { type ReactNode } from 'react';
+import type { 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';
+
+// Exact
+type Props = Responders & {
+  // We do not technically need any children for this component
+  children: ReactNode,
+  // 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 | null,
+};
+
+// 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: any) => (
+        <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}
+        >
+          {props.children}
+        </App>
+      )}
+    </ErrorBoundary>
+  );
+}

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

@@ -0,0 +1,89 @@
+// @flow
+import React, { type ReactNode } 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';
+
+// Exact
+type Props = {
+  children: (setCallbacks: (callbacks: AppCallbacks) => void) => ReactNode,
+};
+
+// Lame that this is not in flow
+type ErrorEvent = Event & {
+  error: Error | null,
+};
+
+export default class ErrorBoundary extends React.Component<Props> {
+  callbacks: AppCallbacks | null = 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 | null = 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.ts

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

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

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

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