@helpdice/draggable 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,140 @@
+// @flow
+import {
+  getBox,
+  withScroll,
+  createBox,
+  expand,
+  type BoxModel,
+  type Position,
+  type Spacing,
+} from 'css-box-model';
+import getDroppableDimension, {
+  type Closest,
+} from '../../state/droppable/get-droppable';
+import type { Env } from './get-env';
+import type {
+  DroppableDimension,
+  DroppableDescriptor,
+  Direction,
+  ScrollSize,
+} from '../../types';
+import getScroll from './get-scroll';
+
+const getClient = (
+  targetRef: HTMLElement,
+  closestScrollable: Element | null,
+): BoxModel => {
+  const base: BoxModel = getBox(targetRef);
+
+  // Droppable has no scroll parent
+  if (!closestScrollable) {
+    return base;
+  }
+
+  // Droppable is not the same as the closest scrollable
+  if (targetRef !== closestScrollable) {
+    return base;
+  }
+
+  // Droppable is scrollable
+
+  // Element.getBoundingClient() returns a clipped padding box:
+  // When not scrollable: the full size of the element
+  // When scrollable: the visible size of the element
+  // (which is not the full width of its scrollable content)
+  // So we recalculate the borderBox of a scrollable droppable to give
+  // it its full dimensions. This will be cut to the correct size by the frame
+
+  // Creating the paddingBox based on scrollWidth / scrollTop
+  // scrollWidth / scrollHeight are based on the paddingBox of an element
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
+  const top: number = base.paddingBox.top - closestScrollable.scrollTop;
+  const left: number = base.paddingBox.left - closestScrollable.scrollLeft;
+  const bottom: number = top + closestScrollable.scrollHeight;
+  const right: number = left + closestScrollable.scrollWidth;
+
+  // unclipped padding box
+  const paddingBox: Spacing = {
+    top,
+    right,
+    bottom,
+    left,
+  };
+
+  // Creating the borderBox by adding the borders to the paddingBox
+  const borderBox: Spacing = expand(paddingBox, base.border);
+
+  // We are not accounting for scrollbars
+  // Adjusting for scrollbars is hard because:
+  // - they are different between browsers
+  // - scrollbars can be activated and removed during a drag
+  // We instead account for this slightly in our auto scroller
+
+  const client: BoxModel = createBox({
+    borderBox,
+    margin: base.margin,
+    border: base.border,
+    padding: base.padding,
+  });
+  return client;
+};
+
+// Exact
+type Args = {
+  ref: HTMLElement,
+  descriptor: DroppableDescriptor,
+  env: Env,
+  windowScroll: Position,
+  direction?: Direction,
+  isDropDisabled?: boolean,
+  isCombineEnabled?: boolean,
+  shouldClipSubject: boolean,
+};
+
+export default ({
+  ref,
+  descriptor,
+  env,
+  windowScroll,
+  direction,
+  isDropDisabled,
+  isCombineEnabled,
+  shouldClipSubject,
+}: Args): DroppableDimension => {
+  const closestScrollable: Element | null = env.closestScrollable;
+  const client: BoxModel = getClient(ref, closestScrollable);
+  const page: BoxModel = withScroll(client, windowScroll);
+
+  const closest: Closest | null = (() => {
+    if (!closestScrollable) {
+      return null;
+    }
+
+    const frameClient: BoxModel = getBox(closestScrollable);
+    const scrollSize: ScrollSize = {
+      scrollHeight: closestScrollable.scrollHeight,
+      scrollWidth: closestScrollable.scrollWidth,
+    };
+
+    return {
+      client: frameClient,
+      page: withScroll(frameClient, windowScroll),
+      scroll: getScroll(closestScrollable),
+      scrollSize,
+      shouldClipSubject,
+    };
+  })();
+
+  const dimension: DroppableDimension = getDroppableDimension({
+    descriptor,
+    isEnabled: !isDropDisabled,
+    isCombineEnabled,
+    isFixedOnPage: env.isFixedOnPage,
+    direction,
+    client,
+    page,
+    closest,
+  });
+
+  return dimension;
+};

package/src/view/use-droppable-publisher/get-env.ts

@@ -0,0 +1,32 @@
+// @flow
+import getClosestScrollable from './get-closest-scrollable';
+
+// Exact
+export type Env = {
+  closestScrollable: Element | null,
+  isFixedOnPage: boolean,
+};
+
+// TODO: do this check at the same time as the closest scrollable
+// in order to avoid double calling getComputedStyle
+// Do this when we move to multiple scroll containers
+const getIsFixed = (el: Element | null): boolean => {
+  if (!el) {
+    return false;
+  }
+  const style: CSSStyleDeclaration = window.getComputedStyle(el);
+  if (style.position === 'fixed') {
+    return true;
+  }
+  return getIsFixed(el.parentElement);
+};
+
+export default (start: Element): Env => {
+  const closestScrollable: Element | null = getClosestScrollable(start);
+  const isFixedOnPage: boolean = getIsFixed(start);
+
+  return {
+    closestScrollable,
+    isFixedOnPage,
+  };
+};

package/src/view/use-droppable-publisher/get-listener-options.ts

@@ -0,0 +1,12 @@
+// @flow
+import type { ScrollOptions } from '../../types';
+
+const immediate = {
+  passive: false,
+};
+const delayed = {
+  passive: true,
+};
+
+export default (options: ScrollOptions) =>
+  options.shouldPublishImmediately ? immediate : delayed;

package/src/view/use-droppable-publisher/get-scroll.ts

@@ -0,0 +1,7 @@
+// @flow
+import type { Position } from 'css-box-model';
+
+export default (el: Element): Position => ({
+  x: el.scrollLeft,
+  y: el.scrollTop,
+});

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

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

package/src/view/use-droppable-publisher/is-in-fixed-container.ts

@@ -0,0 +1,21 @@
+// @flow
+
+const isElementFixed = (el: Element): boolean =>
+  window.getComputedStyle(el).position === 'fixed';
+
+const find = (el: Element | null): boolean => {
+  // cannot do anything else!
+  if (el == null) {
+    return false;
+  }
+
+  // keep looking
+  if (!isElementFixed(el)) {
+    return find(el.parentElement);
+  }
+
+  // success!
+  return true;
+};
+
+export default find;

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

@@ -0,0 +1,288 @@
+// @flow
+import { useRef } from "react";
+import { type Position } from "css-box-model";
+import rafSchedule from "raf-schd";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+import memoizeOne from "memoize-one";
+import { invariant } from "../../invariant";
+import checkForNestedScrollContainers from "./check-for-nested-scroll-container";
+import * as dataAttr from "../data-attributes";
+import { origin } from "../../state/position";
+import getScroll from "./get-scroll";
+import type {
+  DroppableEntry,
+  DroppableCallbacks,
+} from "../../state/registry/registry-types";
+import getEnv, { type Env } from "./get-env";
+import type {
+  Id,
+  DroppableId,
+  TypeId,
+  DroppableDimension,
+  DroppableDescriptor,
+  Direction,
+  ScrollOptions,
+  DroppableMode,
+} from "../../types";
+import getDimension from "./get-dimension";
+import AppContext, { type AppContextValue } from "../context/app-context";
+import { warning } from "../../dev-warning";
+import getListenerOptions from "./get-listener-options";
+import useRequiredContext from "../use-required-context";
+import usePreviousRef from "../use-previous-ref";
+import useLayoutEffect from "../use-isomorphic-layout-effect";
+import useUniqueId from "../use-unique-id";
+
+// Exact
+type Props = {
+  droppableId: DroppableId,
+  type?: TypeId,
+  mode?: DroppableMode,
+  direction?: Direction,
+  isDropDisabled?: boolean,
+  isCombineEnabled?: boolean,
+  ignoreContainerClipping?: boolean,
+  getDroppableRef?: () => HTMLElement | null,
+};
+
+// Exact
+type WhileDragging = {
+  ref: HTMLElement,
+  descriptor: DroppableDescriptor,
+  env: Env,
+  scrollOptions: ScrollOptions,
+};
+
+const getClosestScrollableFromDrag = (dragging: WhileDragging | null): Element | null =>
+  (dragging && dragging.env.closestScrollable) || null;
+
+export default function useDroppablePublisher(args: Props) {
+  const whileDraggingRef = useRef<WhileDragging | null>(null);
+  const appContext: AppContextValue = useRequiredContext(AppContext);
+  const uniqueId: Id = useUniqueId("droppable");
+  const { registry, marshal } = appContext;
+  const previousRef = usePreviousRef(args);
+
+  const descriptor = useMemo<DroppableDescriptor>(
+    () => ({
+      id: args.droppableId,
+      type: args.type ?? "",
+      mode: args.mode ?? "standard", // By default
+    }),
+    [args.droppableId, args.mode, args.type],
+  );
+  const publishedDescriptorRef = useRef<DroppableDescriptor>(descriptor);
+
+  const memoizedUpdateScroll = useMemo(
+    () =>
+      memoizeOne((x: number, y: number) => {
+        invariant(
+          whileDraggingRef.current,
+          "Can only update scroll when dragging",
+        );
+        const scroll: Position = { x, y };
+        marshal.updateDroppableScroll(descriptor.id, scroll);
+      }),
+    [descriptor.id, marshal],
+  );
+
+  const getClosestScroll = useCallback((): Position => {
+    const dragging: WhileDragging | null = whileDraggingRef.current;
+    if (!dragging || !dragging.env.closestScrollable) {
+      return origin;
+    }
+
+    return getScroll(dragging.env.closestScrollable);
+  }, []);
+
+  const updateScroll = useCallback(() => {
+    // reading scroll value when called so value will be the latest
+    const scroll: Position = getClosestScroll();
+    memoizedUpdateScroll(scroll.x, scroll.y);
+  }, [getClosestScroll, memoizedUpdateScroll]);
+
+  const scheduleScrollUpdate = useMemo(
+    () => rafSchedule(updateScroll),
+    [updateScroll],
+  );
+
+  const onClosestScroll = useCallback(() => {
+    const dragging: WhileDragging | null = whileDraggingRef.current;
+    const closest: Element | null = getClosestScrollableFromDrag(dragging);
+
+    invariant(
+      dragging && closest,
+      "Could not find scroll options while scrolling",
+    );
+    const options: ScrollOptions = dragging.scrollOptions;
+    if (options.shouldPublishImmediately) {
+      updateScroll();
+      return;
+    }
+    scheduleScrollUpdate();
+  }, [scheduleScrollUpdate, updateScroll]);
+
+  const getDimensionAndWatchScroll = useCallback(
+    (windowScroll: Position, options: ScrollOptions) => {
+      invariant(
+        !whileDraggingRef.current,
+        "Cannot collect a droppable while a drag is occurring",
+      );
+      const previous: Props = previousRef.current;
+      const ref: HTMLElement | null = previous.getDroppableRef ? previous.getDroppableRef() : null;
+      invariant(ref, "Cannot collect without a droppable ref");
+      const env: Env = getEnv(ref);
+
+      const dragging: WhileDragging = {
+        ref,
+        descriptor,
+        env,
+        scrollOptions: options,
+      };
+      // side effect
+      whileDraggingRef.current = dragging;
+
+      const dimension: DroppableDimension = getDimension({
+        ref,
+        descriptor,
+        env,
+        windowScroll,
+        direction: previous.direction,
+        isDropDisabled: previous.isDropDisabled,
+        isCombineEnabled: previous.isCombineEnabled,
+        shouldClipSubject: !previous.ignoreContainerClipping,
+      });
+
+      const scrollable: Element | null = env.closestScrollable;
+
+      if (scrollable) {
+        scrollable.setAttribute(
+          dataAttr.scrollContainer.contextId,
+          appContext.contextId,
+        );
+
+        // bind scroll listener
+        scrollable.addEventListener(
+          "scroll",
+          onClosestScroll,
+          getListenerOptions(dragging.scrollOptions),
+        );
+        // print a debug warning if using an unsupported nested scroll container setup
+        if (process.env.NODE_ENV !== "production") {
+          checkForNestedScrollContainers(scrollable);
+        }
+      }
+
+      return dimension;
+    },
+    [appContext.contextId, descriptor, onClosestScroll, previousRef],
+  );
+
+  const getScrollWhileDragging = useCallback((): Position => {
+    const dragging: WhileDragging | null = whileDraggingRef.current;
+    const closest: Element | null = getClosestScrollableFromDrag(dragging);
+    invariant(
+      dragging && closest,
+      "Can only recollect Droppable client for Droppables that have a scroll container",
+    );
+
+    return getScroll(closest);
+  }, []);
+
+  const dragStopped = useCallback(() => {
+    const dragging: WhileDragging | null = whileDraggingRef.current;
+    invariant(dragging, "Cannot stop drag when no active drag");
+    const closest: Element | null = getClosestScrollableFromDrag(dragging);
+
+    // goodbye old friend
+    whileDraggingRef.current = null;
+
+    if (!closest) {
+      return;
+    }
+
+    // unwatch scroll
+    scheduleScrollUpdate.cancel();
+    closest.removeAttribute(dataAttr.scrollContainer.contextId);
+    const listenerOptions: AddEventListenerOptions = 
+      getListenerOptions(dragging.scrollOptions);
+    closest.removeEventListener(
+      "scroll",
+      onClosestScroll,
+      listenerOptions,
+    );
+  }, [onClosestScroll, scheduleScrollUpdate]);
+
+  const scroll = useCallback((change: Position) => {
+    // arrange
+    const dragging: WhileDragging | null = whileDraggingRef.current;
+    invariant(dragging, "Cannot scroll when there is no drag");
+    const closest: Element | null = getClosestScrollableFromDrag(dragging);
+    invariant(closest, "Cannot scroll a droppable with no closest scrollable");
+
+    // act
+    closest.scrollTop += change.y;
+    closest.scrollLeft += change.x;
+  }, []);
+
+  const callbacks: DroppableCallbacks = useMemo(() => {
+    return {
+      getDimensionAndWatchScroll,
+      getScrollWhileDragging,
+      dragStopped,
+      scroll,
+    };
+  }, [dragStopped, getDimensionAndWatchScroll, getScrollWhileDragging, scroll]);
+
+  const entry: DroppableEntry = useMemo(
+    () => ({
+      uniqueId,
+      descriptor,
+      callbacks,
+    }),
+    [callbacks, descriptor, uniqueId],
+  );
+
+  // Register with the marshal and let it know of:
+  // - any descriptor changes
+  // - when it unmounts
+  useLayoutEffect(() => {
+    publishedDescriptorRef.current = entry.descriptor;
+    registry.droppable.register(entry);
+
+    return () => {
+      if (whileDraggingRef.current) {
+        warning(
+          "Unsupported: changing the droppableId or type of a Droppable during a drag",
+        );
+        dragStopped();
+      }
+
+      registry.droppable.unregister(entry);
+    };
+  }, [callbacks, descriptor, dragStopped, entry, marshal, registry.droppable]);
+
+  // update is enabled with the marshal
+  // only need to update when there is a drag
+  useLayoutEffect(() => {
+    if (!whileDraggingRef.current) {
+      return;
+    }
+    marshal.updateDroppableIsEnabled(
+      publishedDescriptorRef.current.id,
+      !args.isDropDisabled,
+    );
+  }, [args.isDropDisabled, marshal]);
+
+  // update is combine enabled with the marshal
+  // only need to update when there is a drag
+  useLayoutEffect(() => {
+    if (!whileDraggingRef.current) {
+      return;
+    }
+    marshal.updateDroppableIsCombineEnabled(
+      publishedDescriptorRef.current.id,
+      args.isCombineEnabled ?? false, // by default
+    );
+  }, [args.isCombineEnabled, marshal]);
+}

package/src/view/use-focus-marshal/focus-marshal-types.ts

@@ -0,0 +1,14 @@
+// @flow
+import type { DraggableId } from '../../types';
+
+export type Unregister = () => void;
+
+export type Register = (id: DraggableId, focus: () => void) => Unregister;
+
+// Exact
+export type FocusMarshal = {
+  register: Register,
+  tryRecordFocus: (tryRecordFor: DraggableId) => void,
+  tryRestoreFocusRecorded: () => void,
+  tryShiftRecord: (previous: DraggableId, redirectTo: DraggableId) => void,
+};

package/src/view/use-focus-marshal/index.ts

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

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

@@ -0,0 +1,128 @@
+// @flow
+import { useRef } from "react";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+import type { DraggableId, ContextId, AnimationFrameID } from "../../types";
+import type { FocusMarshal, Unregister } from "./focus-marshal-types";
+import { dragHandle as dragHandleAttr } from "../data-attributes";
+import useLayoutEffect from "../use-isomorphic-layout-effect";
+import findDragHandle from "../get-elements/find-drag-handle";
+
+// Exact
+type Entry = {
+  id: DraggableId,
+  focus: () => void,
+};
+
+type EntryMap = {
+  [id: DraggableId]: Entry,
+};
+
+export default function useFocusMarshal(contextId: ContextId): FocusMarshal {
+  const entriesRef = useRef<EntryMap>({});
+  const recordRef = useRef<DraggableId | null>(null);
+  const restoreFocusFrameRef = useRef<AnimationFrameID | null>(null);
+  const isMountedRef = useRef<boolean>(false);
+
+  const register = useCallback(function register(
+    id: DraggableId,
+    focus: () => void,
+  ): Unregister {
+    const entry: Entry = { id, focus };
+    entriesRef.current[id] = entry;
+
+    return function unregister() {
+      const entries: EntryMap = entriesRef.current;
+      const current: Entry = entries[id];
+      // entry might have been overrided by another registration
+      if (current !== entry) {
+        delete entries[id];
+      }
+    };
+  }, []);
+
+  const tryGiveFocus = useCallback(
+    function tryGiveFocus(tryGiveFocusTo: DraggableId) {
+      const handle: HTMLElement | null = findDragHandle(contextId, tryGiveFocusTo);
+
+      if (handle && handle !== document.activeElement) {
+        handle.focus();
+      }
+    },
+    [contextId],
+  );
+
+  const tryShiftRecord = useCallback(function tryShiftRecord(
+    previous: DraggableId,
+    redirectTo: DraggableId,
+  ) {
+    if (recordRef.current === previous) {
+      recordRef.current = redirectTo;
+    }
+  }, []);
+
+  const tryRestoreFocusRecorded = useCallback(
+    function tryRestoreFocusRecorded() {
+      // frame already queued
+      if (restoreFocusFrameRef.current) {
+        return;
+      }
+
+      // cannot give focus if unmounted
+      // this code path is generally not hit expect for some hot-reloading flows
+      if (!isMountedRef.current) {
+        return;
+      }
+
+      restoreFocusFrameRef.current = requestAnimationFrame(() => {
+        restoreFocusFrameRef.current = null;
+        const record: DraggableId | null = recordRef.current;
+        if (record) {
+          tryGiveFocus(record);
+        }
+      });
+    },
+    [tryGiveFocus],
+  );
+
+  const tryRecordFocus = useCallback(function tryRecordFocus(id: DraggableId) {
+    // clear any existing record
+    recordRef.current = null;
+
+    const focused: Element | null = document.activeElement;
+
+    // no item focused so it cannot be our item
+    if (!focused) {
+      return;
+    }
+
+    // focused element is not a drag handle or does not have the right id
+    if (focused.getAttribute(dragHandleAttr.draggableId) !== id) {
+      return;
+    }
+
+    recordRef.current = id;
+  }, []);
+
+  useLayoutEffect(() => {
+    isMountedRef.current = true;
+    return function clearFrameOnUnmount() {
+      isMountedRef.current = false;
+      const frameId: AnimationFrameID | null = restoreFocusFrameRef.current;
+      if (frameId) {
+        cancelAnimationFrame(frameId);
+      }
+    };
+  }, []);
+
+  const marshal: FocusMarshal = useMemo(
+    () => ({
+      register,
+      tryRecordFocus,
+      tryRestoreFocusRecorded,
+      tryShiftRecord,
+    }),
+    [register, tryRecordFocus, tryRestoreFocusRecorded, tryShiftRecord],
+  );
+
+  return marshal;
+}

package/src/view/use-hidden-text-element/index.ts

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