@planningcenter/react-beautiful-dnd 13.2.0

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

@@ -0,0 +1,139 @@
+// @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,
+): 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;
+};
+
+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 = env.closestScrollable;
+  const client: BoxModel = getClient(ref, closestScrollable);
+  const page: BoxModel = withScroll(client, windowScroll);
+
+  const closest: ?Closest = (() => {
+    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.js

@@ -0,0 +1,31 @@
+// @flow
+import getClosestScrollable from './get-closest-scrollable';
+
+export type Env = {|
+  closestScrollable: ?Element,
+  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): 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 = getClosestScrollable(start);
+  const isFixedOnPage: boolean = getIsFixed(start);
+
+  return {
+    closestScrollable,
+    isFixedOnPage,
+  };
+};

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

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

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

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

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

@@ -0,0 +1,21 @@
+// @flow
+
+const isElementFixed = (el: Element): boolean =>
+  window.getComputedStyle(el).position === 'fixed';
+
+const find = (el: ?Element): 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.js

@@ -0,0 +1,283 @@
+// @flow
+import { useRef } from 'react';
+import { type Position } from 'css-box-model';
+import rafSchedule from 'raf-schd';
+import { useMemo, useCallback } from 'use-memo-one';
+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';
+
+type Props = {|
+  droppableId: DroppableId,
+  type: TypeId,
+  mode: DroppableMode,
+  direction: Direction,
+  isDropDisabled: boolean,
+  isCombineEnabled: boolean,
+  ignoreContainerClipping: boolean,
+  getDroppableRef: () => ?HTMLElement,
+|};
+
+type WhileDragging = {|
+  ref: HTMLElement,
+  descriptor: DroppableDescriptor,
+  env: Env,
+  scrollOptions: ScrollOptions,
+|};
+
+const getClosestScrollableFromDrag = (dragging: ?WhileDragging): ?Element =>
+  (dragging && dragging.env.closestScrollable) || null;
+
+export default function useDroppablePublisher(args: Props) {
+  const whileDraggingRef = useRef<?WhileDragging>(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,
+    }),
+    [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 = 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 = whileDraggingRef.current;
+    const closest: ?Element = 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 = previous.getDroppableRef();
+      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 = 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 = whileDraggingRef.current;
+    const closest: ?Element = 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 = whileDraggingRef.current;
+    invariant(dragging, 'Cannot stop drag when no active drag');
+    const closest: ?Element = getClosestScrollableFromDrag(dragging);
+
+    // goodbye old friend
+    whileDraggingRef.current = null;
+
+    if (!closest) {
+      return;
+    }
+
+    // unwatch scroll
+    scheduleScrollUpdate.cancel();
+    closest.removeAttribute(dataAttr.scrollContainer.contextId);
+    closest.removeEventListener(
+      'scroll',
+      onClosestScroll,
+      getListenerOptions(dragging.scrollOptions),
+    );
+  }, [onClosestScroll, scheduleScrollUpdate]);
+
+  const scroll = useCallback((change: Position) => {
+    // arrange
+    const dragging: ?WhileDragging = whileDraggingRef.current;
+    invariant(dragging, 'Cannot scroll when there is no drag');
+    const closest: ?Element = 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,
+    );
+  }, [args.isCombineEnabled, marshal]);
+}

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

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

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

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

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

@@ -0,0 +1,129 @@
+// @flow
+import { useRef } from 'react';
+import { useMemo, useCallback } from 'use-memo-one';
+import type { DraggableId, ContextId } 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';
+
+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);
+  const restoreFocusFrameRef = useRef<?AnimationFrameID>(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 = 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 = recordRef.current;
+        if (record) {
+          tryGiveFocus(record);
+        }
+      });
+    },
+    [tryGiveFocus],
+  );
+
+  const tryRecordFocus = useCallback(function tryRecordFocus(id: DraggableId) {
+    // clear any existing record
+    recordRef.current = null;
+
+    const focused: ?Element = 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 = 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.js

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