@planningcenter/react-beautiful-dnd 13.2.0

package/src/view/use-style-marshal/use-style-marshal.js

@@ -0,0 +1,126 @@
+// @flow
+import { useRef } from 'react';
+import memoizeOne from 'memoize-one';
+import { useMemo, useCallback } from 'use-memo-one';
+import { invariant } from '../../invariant';
+import type { StyleMarshal } from './style-marshal-types';
+import type { ContextId, DropReason } from '../../types';
+import getStyles, { type Styles } from './get-styles';
+import { prefix } from '../data-attributes';
+import useLayoutEffect from '../use-isomorphic-layout-effect';
+
+const getHead = (): HTMLHeadElement => {
+  const head: ?HTMLHeadElement = document.querySelector('head');
+  invariant(head, 'Cannot find the head to append a style to');
+  return head;
+};
+
+const createStyleEl = (nonce?: string): HTMLStyleElement => {
+  const el: HTMLStyleElement = document.createElement('style');
+  if (nonce) {
+    el.setAttribute('nonce', nonce);
+  }
+  el.type = 'text/css';
+  return el;
+};
+
+export default function useStyleMarshal(contextId: ContextId, nonce?: string) {
+  const styles: Styles = useMemo(() => getStyles(contextId), [contextId]);
+  const alwaysRef = useRef<?HTMLStyleElement>(null);
+  const dynamicRef = useRef<?HTMLStyleElement>(null);
+
+  const setDynamicStyle = useCallback(
+    // Using memoizeOne to prevent frequent updates to textContext
+    memoizeOne((proposed: string) => {
+      const el: ?HTMLStyleElement = dynamicRef.current;
+      invariant(el, 'Cannot set dynamic style element if it is not set');
+      el.textContent = proposed;
+    }),
+    [],
+  );
+
+  const setAlwaysStyle = useCallback((proposed: string) => {
+    const el: ?HTMLStyleElement = alwaysRef.current;
+    invariant(el, 'Cannot set dynamic style element if it is not set');
+    el.textContent = proposed;
+  }, []);
+
+  // using layout effect as programatic dragging might start straight away (such as for cypress)
+  useLayoutEffect(() => {
+    invariant(
+      !alwaysRef.current && !dynamicRef.current,
+      'style elements already mounted',
+    );
+
+    const always: HTMLStyleElement = createStyleEl(nonce);
+    const dynamic: HTMLStyleElement = createStyleEl(nonce);
+
+    // store their refs
+    alwaysRef.current = always;
+    dynamicRef.current = dynamic;
+
+    // for easy identification
+    always.setAttribute(`${prefix}-always`, contextId);
+    dynamic.setAttribute(`${prefix}-dynamic`, contextId);
+
+    // add style tags to head
+    getHead().appendChild(always);
+    getHead().appendChild(dynamic);
+
+    // set initial style
+    setAlwaysStyle(styles.always);
+    setDynamicStyle(styles.resting);
+
+    return () => {
+      const remove = (ref) => {
+        const current: ?HTMLStyleElement = ref.current;
+        invariant(current, 'Cannot unmount ref as it is not set');
+        getHead().removeChild(current);
+        ref.current = null;
+      };
+
+      remove(alwaysRef);
+      remove(dynamicRef);
+    };
+  }, [
+    nonce,
+    setAlwaysStyle,
+    setDynamicStyle,
+    styles.always,
+    styles.resting,
+    contextId,
+  ]);
+
+  const dragging = useCallback(() => setDynamicStyle(styles.dragging), [
+    setDynamicStyle,
+    styles.dragging,
+  ]);
+  const dropping = useCallback(
+    (reason: DropReason) => {
+      if (reason === 'DROP') {
+        setDynamicStyle(styles.dropAnimating);
+        return;
+      }
+      setDynamicStyle(styles.userCancel);
+    },
+    [setDynamicStyle, styles.dropAnimating, styles.userCancel],
+  );
+  const resting = useCallback(() => {
+    // Can be called defensively
+    if (!dynamicRef.current) {
+      return;
+    }
+    setDynamicStyle(styles.resting);
+  }, [setDynamicStyle, styles.resting]);
+
+  const marshal: StyleMarshal = useMemo(
+    () => ({
+      dragging,
+      dropping,
+      resting,
+    }),
+    [dragging, dropping, resting],
+  );
+
+  return marshal;
+}

package/src/view/use-unique-id.js

@@ -0,0 +1,25 @@
+// @flow
+import { useMemo } from 'use-memo-one';
+import type { Id } from '../types';
+
+let count: number = 0;
+
+type Options = {
+  separator: string,
+};
+
+const defaults: Options = { separator: '::' };
+
+export function reset() {
+  count = 0;
+}
+
+export default function useUniqueId(
+  prefix: string,
+  options?: Options = defaults,
+): Id {
+  return useMemo(() => `${prefix}${options.separator}${count++}`, [
+    options.separator,
+    prefix,
+  ]);
+}

package/src/view/visually-hidden-style.js

@@ -0,0 +1,16 @@
+// @flow
+// https://allyjs.io/tutorials/hiding-elements.html
+// Element is visually hidden but is readable by screen readers
+const visuallyHidden: Object = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  margin: '-1px',
+  border: '0',
+  padding: '0',
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  'clip-path': 'inset(100%)',
+};
+
+export default visuallyHidden;

package/src/view/window/get-max-window-scroll.js

@@ -0,0 +1,19 @@
+// @flow
+import type { Position } from 'css-box-model';
+import getMaxScroll from '../../state/get-max-scroll';
+import getDocumentElement from '../get-document-element';
+
+export default (): Position => {
+  const doc: HTMLElement = getDocumentElement();
+
+  const maxScroll: Position = getMaxScroll({
+    // unclipped padding box, with scrollbar
+    scrollHeight: doc.scrollHeight,
+    scrollWidth: doc.scrollWidth,
+    // clipped padding box, without scrollbar
+    width: doc.clientWidth,
+    height: doc.clientHeight,
+  });
+
+  return maxScroll;
+};

package/src/view/window/get-viewport.js

@@ -0,0 +1,49 @@
+// @flow
+import { getRect, type Rect, type Position } from 'css-box-model';
+import type { Viewport } from '../../types';
+import { origin } from '../../state/position';
+import getWindowScroll from './get-window-scroll';
+import getMaxWindowScroll from './get-max-window-scroll';
+import getDocumentElement from '../get-document-element';
+
+export default (): Viewport => {
+  const scroll: Position = getWindowScroll();
+  const maxScroll: Position = getMaxWindowScroll();
+
+  const top: number = scroll.y;
+  const left: number = scroll.x;
+
+  // window.innerHeight: includes scrollbars (not what we want)
+  // document.clientHeight gives us the correct value when using the html5 doctype
+  const doc: HTMLElement = getDocumentElement();
+  // Using these values as they do not consider scrollbars
+  // padding box, without scrollbar
+  const width: number = doc.clientWidth;
+  const height: number = doc.clientHeight;
+
+  // Computed
+  const right: number = left + width;
+  const bottom: number = top + height;
+
+  const frame: Rect = getRect({
+    top,
+    left,
+    right,
+    bottom,
+  });
+
+  const viewport: Viewport = {
+    frame,
+    scroll: {
+      initial: scroll,
+      current: scroll,
+      max: maxScroll,
+      diff: {
+        value: origin,
+        displacement: origin,
+      },
+    },
+  };
+
+  return viewport;
+};

package/src/view/window/get-window-from-el.js

@@ -0,0 +1,3 @@
+// @flow
+export default (el: ?Element): typeof window =>
+  el && el.ownerDocument ? el.ownerDocument.defaultView : window;

package/src/view/window/get-window-scroll.js

@@ -0,0 +1,30 @@
+// @flow
+import { type Position } from 'css-box-model';
+
+// The browsers update document.documentElement.scrollTop and window.pageYOffset
+// differently as the window scrolls.
+
+// Webkit
+// documentElement.scrollTop: no update. Stays at 0
+// window.pageYOffset: updates to whole number
+
+// Chrome
+// documentElement.scrollTop: update with fractional value
+// window.pageYOffset: update with fractional value
+
+// FireFox
+// documentElement.scrollTop: updates to whole number
+// window.pageYOffset: updates to whole number
+
+// IE11 (same as firefox)
+// documentElement.scrollTop: updates to whole number
+// window.pageYOffset: updates to whole number
+
+// Edge (same as webkit)
+// documentElement.scrollTop: no update. Stays at 0
+// window.pageYOffset: updates to whole number
+
+export default (): Position => ({
+  x: window.pageXOffset,
+  y: window.pageYOffset,
+});

package/src/view/window/scroll-window.js

@@ -0,0 +1,7 @@
+// @flow
+import { type Position } from 'css-box-model';
+
+// Not guarenteed to scroll by the entire amount
+export default (change: Position): void => {
+  window.scrollBy(change.x, change.y);
+};