@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/view/placeholder/placeholder.tsx

@@ -0,0 +1,204 @@
+// @flow
+import React, { useState, useRef, useEffect, type ReactNode } from "react";
+import { useCallback } from "@helpdice/memoizer";
+import type { Spacing } from "css-box-model";
+import type {
+  Placeholder as PlaceholderType,
+  InOutAnimationMode,
+  ContextId,
+  TimeoutID,
+} from "../../types";
+import { transitions } from "../../animation";
+import { noSpacing } from "../../state/spacing";
+
+function noop() {}
+
+// Exact
+export type PlaceholderStyle = {
+  display: string,
+  boxSizing: "border-box",
+  width: number,
+  height: number,
+  marginTop: number,
+  marginRight: number,
+  marginBottom: number,
+  marginLeft: number,
+  flexShrink: "0",
+  flexGrow: "0",
+  pointerEvents: "none",
+  transition: string | null,
+};
+
+// Exact
+export type Props = {
+  placeholder: PlaceholderType,
+  animate: InOutAnimationMode,
+  onClose: () => void,
+  innerRef: (value: HTMLElement | null) => void,
+  onTransitionEnd: () => void,
+  contextId: ContextId,
+};
+
+// Exact
+type Size = {
+  width: number,
+  height: number,
+  // Need to animate in/out animation as well as size
+  margin: Spacing,
+};
+
+// Exact
+type HelperArgs = {
+  isAnimatingOpenOnMount: boolean,
+  placeholder: PlaceholderType,
+  animate: InOutAnimationMode,
+};
+
+const empty: Size = {
+  width: 0,
+  height: 0,
+  margin: noSpacing,
+};
+
+const getSize = ({
+  isAnimatingOpenOnMount,
+  placeholder,
+  animate,
+}: HelperArgs): Size => {
+  if (isAnimatingOpenOnMount) {
+    return empty;
+  }
+
+  if (animate === "close") {
+    return empty;
+  }
+
+  return {
+    height: placeholder.client.borderBox.height,
+    width: placeholder.client.borderBox.width,
+    margin: placeholder.client.margin,
+  };
+};
+
+const getStyle = ({
+  isAnimatingOpenOnMount,
+  placeholder,
+  animate,
+}: HelperArgs): PlaceholderStyle => {
+  const size: Size = getSize({ isAnimatingOpenOnMount, placeholder, animate });
+
+  return {
+    display: placeholder.display,
+    // ## Recreating the box model
+    // We created the borderBox and then apply the margins directly
+    // this is to maintain any margin collapsing behaviour
+
+    // creating borderBox
+    // background: 'green',
+    boxSizing: "border-box",
+    width: size.width,
+    height: size.height,
+    // creating marginBox
+    marginTop: size.margin.top,
+    marginRight: size.margin.right,
+    marginBottom: size.margin.bottom,
+    marginLeft: size.margin.left,
+
+    // ## Avoiding collapsing
+    // Avoiding the collapsing or growing of this element when pushed by flex child siblings.
+    // We have already taken a snapshot the current dimensions we do not want this element
+    // to recalculate its dimensions
+    // It is okay for these properties to be applied on elements that are not flex children
+    flexShrink: "0",
+    flexGrow: "0",
+    // Just a little performance optimisation: avoiding the browser needing
+    // to worry about pointer events for this element
+    pointerEvents: "none",
+
+    // Animate the placeholder size and margin
+    transition: animate !== "none" ? transitions.placeholder : null,
+  };
+};
+
+function Placeholder(props: Props): ReactNode {
+  const animateOpenTimerRef = useRef<TimeoutID | null>(null);
+
+  const tryClearAnimateOpenTimer = useCallback(() => {
+    if (!animateOpenTimerRef.current) {
+      return;
+    }
+    clearTimeout(animateOpenTimerRef.current);
+    animateOpenTimerRef.current = null;
+  }, []);
+
+  const { animate, onTransitionEnd, onClose, contextId } = props;
+  const [isAnimatingOpenOnMount, setIsAnimatingOpenOnMount] = useState<boolean>(
+    props.animate === "open",
+  );
+
+  // Will run after a render is flushed
+  // Still need to wait a timeout to ensure that the
+  // update is completely applied to the DOM
+  useEffect(() => {
+    // No need to do anything
+    if (!isAnimatingOpenOnMount) {
+      return noop;
+    }
+
+    // might need to clear the timer
+    if (animate !== "open") {
+      tryClearAnimateOpenTimer();
+      setIsAnimatingOpenOnMount(false);
+      return noop;
+    }
+
+    // timer already pending
+    if (animateOpenTimerRef.current) {
+      return noop;
+    }
+
+    animateOpenTimerRef.current = setTimeout(() => {
+      animateOpenTimerRef.current = null;
+      setIsAnimatingOpenOnMount(false);
+    });
+
+    // clear the timer if needed
+    return tryClearAnimateOpenTimer;
+  }, [animate, isAnimatingOpenOnMount, tryClearAnimateOpenTimer]);
+
+  const onSizeChangeEnd = useCallback(
+    (event: TransitionEvent) => {
+      // We transition height, width and margin
+      // each of those transitions will independently call this callback
+      // Because they all have the same duration we can just respond to one of them
+      // 'height' was chosen for no particular reason :D
+      if (event.propertyName !== "height") {
+        return;
+      }
+
+      onTransitionEnd();
+
+      if (animate === "close") {
+        onClose();
+      }
+    },
+    [animate, onClose, onTransitionEnd],
+  );
+
+  const style: PlaceholderStyle = getStyle({
+    isAnimatingOpenOnMount,
+    animate: props.animate,
+    placeholder: props.placeholder,
+  });
+
+  return React.createElement(props.placeholder.tagName, {
+    style,
+    "data-rbd-placeholder-context-id": contextId,
+    onTransitionEnd: onSizeChangeEnd,
+    ref: props.innerRef,
+  });
+}
+
+export default React.memo<Props>(Placeholder);
+// enzyme does not work well with memo, so exporting the non-memo version
+export const WithoutMemo = Placeholder;

package/src/view/scroll-listener.ts

@@ -0,0 +1,74 @@
+// @flow
+import type { Position } from 'css-box-model';
+import rafSchd from 'raf-schd';
+import { invariant } from '../invariant';
+import bindEvents from './event-bindings/bind-events';
+import type { EventBinding } from './event-bindings/event-types';
+import getWindowScroll from './window/get-window-scroll';
+import { noop } from '../empty';
+
+type OnWindowScroll = (newScroll: Position) => void;
+
+// Exact
+type Args = {
+  onWindowScroll: OnWindowScroll,
+};
+
+// Exact
+type Result = {
+  start: () => void,
+  stop: () => void,
+  isActive: () => boolean,
+};
+
+function getWindowScrollBinding(update: () => void): EventBinding {
+  return {
+    eventName: 'scroll',
+    // ## Passive: true
+    // Eventual consistency is fine because we use position: fixed on the item
+    // ## Capture: false
+    // Scroll events on elements do not bubble, but they go through the capture phase
+    // https://twitter.com/alexandereardon/status/985994224867819520
+    // Using capture: false here as we want to avoid intercepting droppable scroll requests
+    options: { passive: true, capture: false },
+    fn: (event: UIEvent) => {
+      // IE11 fix
+      // All scrollable events still bubble up and are caught by this handler in ie11.
+      // On a window scroll the event.target should be the window or the document.
+      // If this is not the case then it is not a 'window' scroll event and can be ignored
+      if (event.target !== window && event.target !== window.document) {
+        return;
+      }
+
+      update();
+    },
+  };
+}
+
+export default function getScrollListener({ onWindowScroll }: Args): Result {
+  function updateScroll() {
+    // letting the update function read the latest scroll when called
+    onWindowScroll(getWindowScroll());
+  }
+
+  const scheduled = rafSchd(updateScroll);
+  const binding: EventBinding = getWindowScrollBinding(scheduled);
+  let unbind: () => void = noop;
+
+  function isActive(): boolean {
+    return unbind !== noop;
+  }
+
+  function start() {
+    invariant(!isActive(), 'Cannot start scroll listener when already active');
+    unbind = bindEvents(window, [binding], {});
+  }
+  function stop() {
+    invariant(isActive(), 'Cannot stop scroll listener when not active');
+    scheduled.cancel();
+    unbind();
+    unbind = noop;
+  }
+
+  return { start, stop, isActive };
+}

package/src/view/throw-if-invalid-inner-ref.ts

@@ -0,0 +1,15 @@
+// @flow
+import { invariant } from '../invariant';
+import isHtmlElement from './is-type-of-element/is-html-element';
+
+export default (ref: unknown | null) => {
+  invariant(
+    ref && isHtmlElement(ref as Element),
+    `
+    provided.innerRef has not been provided with a HTMLElement.
+
+    You can find a guide on using the innerRef callback functions at:
+    https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md
+  `,
+  );
+};

package/src/view/use-announcer/index.ts

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './use-announcer';

package/src/view/use-announcer/use-announcer.ts

@@ -0,0 +1,80 @@
+// @flow
+import { useRef, useEffect } from "react";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+import type { Announce, ContextId } from "../../types";
+import { warning } from "../../dev-warning";
+import getBodyElement from "../get-body-element";
+import visuallyHidden from "../visually-hidden-style";
+
+export const getId = (contextId: ContextId): string =>
+  `rbd-announcement-${contextId}`;
+
+export default function useAnnouncer(contextId: ContextId): Announce {
+  const id: string = useMemo(() => getId(contextId), [contextId]);
+  const ref = useRef<HTMLElement | null>(null);
+
+  useEffect(
+    function setup() {
+      const el: HTMLElement = document.createElement("div");
+      // storing reference for usage in announce
+      ref.current = el;
+
+      // identifier
+      el.id = id;
+
+      // Aria live region
+
+      // will force itself to be read
+      el.setAttribute("aria-live", "assertive");
+      // must read the whole thing every time
+      el.setAttribute("aria-atomic", "true");
+
+      // hide the element visually
+      Object.assign(el.style, visuallyHidden);
+
+      // Add to body
+      getBodyElement().appendChild(el);
+
+      return function cleanup() {
+        // Not clearing the ref as it might be used by announce before the timeout expires
+
+        // unmounting after a timeout to let any announcements
+        // during a mount be published
+        setTimeout(function remove() {
+          // checking if element exists as the body might have been changed by things like 'turbolinks'
+          const body: HTMLElement = getBodyElement(); // HTMLBodyElement
+          if (body.contains(el)) {
+            body.removeChild(el);
+          }
+          // if el was the current ref - clear it so that
+          // we can get a warning if announce is called
+          if (el === ref.current) {
+            ref.current = null;
+          }
+        });
+      };
+    },
+    [id],
+  );
+
+  const announce: Announce = useCallback((message: string): void => {
+    const el: HTMLElement | null = ref.current;
+    if (el) {
+      el.textContent = message;
+      return;
+    }
+
+    warning(`
+      A screen reader message was trying to be announced but it was unable to do so.
+      This can occur if you unmount your <DragDropContext /> in your onDragEnd.
+      Consider calling provided.announce() before the unmount so that the instruction will
+      not be lost for users relying on a screen reader.
+
+      Message not passed to screen reader:
+
+      "${message}"
+    `);
+  }, []);
+
+  return announce;
+}

package/src/view/use-dev-setup-warning.ts

@@ -0,0 +1,22 @@
+// @flow
+import { useEffect } from 'react';
+import { error } from '../dev-warning';
+import useDev from './use-dev';
+
+export default function useDevSetupWarning(fn: () => void, inputs?: unknown[]) {
+  useDev(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      try {
+        fn();
+      } catch (e) {
+        error(`
+          A setup problem was encountered.
+
+          > ${e.message}
+        `);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, inputs);
+  });
+}

package/src/view/use-dev.ts

@@ -0,0 +1,9 @@
+// @flow
+
+export default function useDev(useHook: () => void) {
+  // Don't run any validation in production
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook();
+  }
+}

package/src/view/use-draggable-publisher/get-dimension.ts

@@ -0,0 +1,44 @@
+// @flow
+import {
+  type BoxModel,
+  type Position,
+  calculateBox,
+  withScroll,
+} from 'css-box-model';
+import type {
+  DraggableDescriptor,
+  DraggableDimension,
+  Placeholder,
+} from '../../types';
+import { origin } from '../../state/position';
+
+export default function getDimension(
+  descriptor: DraggableDescriptor,
+  el: HTMLElement,
+  windowScroll: Position = origin,
+): DraggableDimension {
+  const computedStyles: CSSStyleDeclaration = window.getComputedStyle(el);
+  const borderBox: ClientRect = el.getBoundingClientRect();
+  const client: BoxModel = calculateBox(borderBox, computedStyles);
+  const page: BoxModel = withScroll(client, windowScroll);
+
+  const placeholder: Placeholder = {
+    client,
+    tagName: el.tagName.toLowerCase(),
+    display: computedStyles.display,
+  };
+  const displaceBy: Position = {
+    x: client.marginBox.width,
+    y: client.marginBox.height,
+  };
+
+  const dimension: DraggableDimension = {
+    descriptor,
+    placeholder,
+    displaceBy,
+    client,
+    page,
+  };
+
+  return dimension;
+}

package/src/view/use-draggable-publisher/index.ts

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './use-draggable-publisher';

package/src/view/use-draggable-publisher/use-draggable-publisher.ts

@@ -0,0 +1,87 @@
+// @flow
+import { type Position } from "css-box-model";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+import { useRef } from "react";
+import { invariant } from "../../invariant";
+import type {
+  DraggableDescriptor,
+  DraggableDimension,
+  Id,
+  DraggableOptions,
+} from "../../types";
+import type {
+  Registry,
+  DraggableEntry,
+} from "../../state/registry/registry-types";
+import makeDimension from "./get-dimension";
+import useLayoutEffect from "../use-isomorphic-layout-effect";
+import useUniqueId from "../use-unique-id";
+
+// Exact
+export type Args = {
+  descriptor: DraggableDescriptor,
+  getDraggableRef: () => HTMLElement | null,
+  registry: Registry,
+} & DraggableOptions;
+
+export default function useDraggablePublisher(args: Args) {
+  const uniqueId: Id = useUniqueId("draggable");
+
+  const {
+    descriptor,
+    registry,
+    getDraggableRef,
+    canDragInteractiveElements,
+    shouldRespectForcePress,
+    isEnabled,
+  } = args;
+
+  const options: DraggableOptions = useMemo(
+    () => ({
+      canDragInteractiveElements,
+      shouldRespectForcePress,
+      isEnabled,
+    }),
+    [canDragInteractiveElements, isEnabled, shouldRespectForcePress],
+  );
+
+  const getDimension = useCallback(
+    (windowScroll?: Position): DraggableDimension => {
+      const el: HTMLElement | null = getDraggableRef();
+      invariant(el, "Cannot get dimension when no ref is set");
+      return makeDimension(descriptor, el, windowScroll);
+    },
+    [descriptor, getDraggableRef],
+  );
+
+  const entry: DraggableEntry = useMemo(
+    () => ({
+      uniqueId,
+      descriptor,
+      options,
+      getDimension,
+    }),
+    [descriptor, getDimension, options, uniqueId],
+  );
+
+  const publishedRef = useRef<DraggableEntry>(entry);
+  const isFirstPublishRef = useRef<boolean>(true);
+
+  // mounting and unmounting
+  useLayoutEffect(() => {
+    registry.draggable.register(publishedRef.current);
+    return () => registry.draggable.unregister(publishedRef.current);
+  }, [registry.draggable]);
+
+  // updates while mounted
+  useLayoutEffect(() => {
+    if (isFirstPublishRef.current) {
+      isFirstPublishRef.current = false;
+      return;
+    }
+
+    const last: DraggableEntry = publishedRef.current;
+    publishedRef.current = entry;
+    registry.draggable.update(entry, last);
+  }, [entry, registry.draggable]);
+}

package/src/view/use-droppable-publisher/check-for-nested-scroll-container.ts

@@ -0,0 +1,27 @@
+// @flow
+import getClosestScrollable from './get-closest-scrollable';
+import { warning } from '../../dev-warning';
+
+// We currently do not support nested scroll containers
+// But will hopefully support this soon!
+export default (scrollable: Element | null) => {
+  if (!scrollable) {
+    return;
+  }
+
+  const anotherScrollParent: Element | null = getClosestScrollable(
+    scrollable.parentElement,
+  );
+
+  if (!anotherScrollParent) {
+    return;
+  }
+
+  warning(`
+    Droppable: unsupported nested scroll container detected.
+    A Droppable can only have one scroll parent (which can be itself)
+    Nested scroll containers are currently not supported.
+
+    We hope to support nested scroll containers soon: https://github.com/atlassian/react-beautiful-dnd/issues/131
+  `);
+};

package/src/view/use-droppable-publisher/get-closest-scrollable.ts

@@ -0,0 +1,96 @@
+// @flow
+import { invariant } from '../../invariant';
+import { warning } from '../../dev-warning';
+import getBodyElement from '../get-body-element';
+
+// Exact
+type Overflow = {
+  overflowX: string,
+  overflowY: string,
+};
+
+const isEqual = (base: string) => (value: string): boolean => base === value;
+const isScroll = isEqual('scroll');
+const isAuto = isEqual('auto');
+const isVisible = isEqual('visible');
+const isEither = (overflow: Overflow, fn: (value: string) => boolean) =>
+  fn(overflow.overflowX) || fn(overflow.overflowY);
+const isBoth = (overflow: Overflow, fn: (value: string) => boolean) =>
+  fn(overflow.overflowX) && fn(overflow.overflowY);
+
+const isElementScrollable = (el: Element): boolean => {
+  const style: CSSStyleDeclaration = window.getComputedStyle(el);
+  const overflow: Overflow = {
+    overflowX: style.overflowX,
+    overflowY: style.overflowY,
+  };
+
+  return isEither(overflow, isScroll) || isEither(overflow, isAuto);
+};
+
+// Special case for a body element
+// Playground: https://codepen.io/alexreardon/pen/ZmyLgX?editors=1111
+const isBodyScrollable = (): boolean => {
+  // Because we always return false for now, we can skip any actual processing in production
+  if (process.env.NODE_ENV === 'production') {
+    return false;
+  }
+
+  const body: HTMLElement = getBodyElement(); // HTMLBodyElement
+  const html: HTMLElement | null = document.documentElement;
+  invariant(html);
+
+  // 1. The `body` has `overflow-[x|y]: auto | scroll`
+  if (!isElementScrollable(body)) {
+    return false;
+  }
+
+  const htmlStyle: CSSStyleDeclaration = window.getComputedStyle(html);
+  const htmlOverflow: Overflow = {
+    overflowX: htmlStyle.overflowX,
+    overflowY: htmlStyle.overflowY,
+  };
+
+  if (isBoth(htmlOverflow, isVisible)) {
+    return false;
+  }
+
+  warning(`
+    We have detected that your <body> element might be a scroll container.
+    We have found no reliable way of detecting whether the <body> element is a scroll container.
+    Under most circumstances a <body> scroll bar will be on the <html> element (document.documentElement)
+
+    Because we cannot determine if the <body> is a scroll container, and generally it is not one,
+    we will be treating the <body> as *not* a scroll container
+
+    More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-detect-scroll-containers.md
+  `);
+  return false;
+};
+
+const getClosestScrollable = (el: Element | null): Element | null => {
+  // cannot do anything else!
+  if (el == null) {
+    return null;
+  }
+
+  // not allowing us to go higher then body
+  if (el === document.body) {
+    return isBodyScrollable() ? el : null;
+  }
+
+  // Should never get here, but just being safe
+  if (el === document.documentElement) {
+    return null;
+  }
+
+  if (!isElementScrollable(el)) {
+    // keep recursing
+    return getClosestScrollable(el.parentElement);
+  }
+
+  // success!
+  return el;
+};
+
+export default getClosestScrollable;