@helpdice/draggable 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,126 @@
+// @flow
+import { useRef } from "react";
+import memoizeOne from "memoize-one";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+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 | null = 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>(null);
+  const dynamicRef = useRef<HTMLStyleElement | null>(null);
+
+  const setDynamicStyle = useCallback(
+    // Using memoizeOne to prevent frequent updates to textContext
+    memoizeOne((proposed: string) => {
+      const el: HTMLStyleElement | null = 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 | null = 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: any) => {
+        const current: HTMLStyleElement | null = 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.ts

@@ -0,0 +1,25 @@
+// @flow
+import { useMemo } from "@helpdice/memoizer";
+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.ts

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

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

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

@@ -0,0 +1,12 @@
+// @flow
+export default (el: Element | null): typeof window => {
+  if (el && el.ownerDocument?.defaultView) {
+    return el.ownerDocument.defaultView;
+  }
+
+  return window;
+};
+
+
+// export default (el: Element | null): typeof window =>
+//   el && el.ownerDocument ? el.ownerDocument.defaultView : window;

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

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

@@ -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);
+};