Modernize DeliveryIssueDialog, fix outline clipping in Modal

ts/util/hooks/index.ts

@@ -0,0 +1,159 @@
+// Copyright 2020-2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+import { ActionCreatorsMapObject, bindActionCreators } from 'redux';
+import { useDispatch } from 'react-redux';
+import { first, last, noop } from 'lodash';
+
+export function usePrevious<T>(initialValue: T, currentValue: T): T {
+  const previousValueRef = React.useRef<T>(initialValue);
+  const result = previousValueRef.current;
+  previousValueRef.current = currentValue;
+  return result;
+}
+
+export const useBoundActions = <T extends ActionCreatorsMapObject>(
+  actions: T
+): T => {
+  const dispatch = useDispatch();
+
+  return React.useMemo(() => {
+    return bindActionCreators(actions, dispatch);
+  }, [actions, dispatch]);
+};
+
+export const usePageVisibility = (): boolean => {
+  const [result, setResult] = React.useState(!document.hidden);
+
+  React.useEffect(() => {
+    const onVisibilityChange = () => {
+      setResult(!document.hidden);
+    };
+
+    document.addEventListener('visibilitychange', onVisibilityChange, false);
+
+    return () => {
+      document.removeEventListener(
+        'visibilitychange',
+        onVisibilityChange,
+        false
+      );
+    };
+  }, []);
+
+  return result;
+};
+
+/**
+ * A light hook wrapper around `IntersectionObserver`.
+ *
+ * Example usage:
+ *
+ *     function MyComponent() {
+ *       const [intersectionRef, intersectionEntry] = useIntersectionObserver();
+ *       const isVisible = intersectionEntry
+ *         ? intersectionEntry.isIntersecting
+ *         : true;
+ *
+ *       return (
+ *         <div ref={intersectionRef}>
+ *           I am {isVisible ? 'on the screen' : 'invisible'}
+ *         </div>
+ *       );
+ *    }
+ */
+export function useIntersectionObserver(): [
+  (el?: Element | null) => void,
+  IntersectionObserverEntry | null
+] {
+  const [
+    intersectionObserverEntry,
+    setIntersectionObserverEntry,
+  ] = React.useState<IntersectionObserverEntry | null>(null);
+
+  const unobserveRef = React.useRef<(() => unknown) | null>(null);
+
+  const setRef = React.useCallback((el?: Element | null) => {
+    if (unobserveRef.current) {
+      unobserveRef.current();
+      unobserveRef.current = null;
+    }
+
+    if (!el) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(entries => {
+      if (entries.length !== 1) {
+        window.log.error(
+          'IntersectionObserverWrapper was observing the wrong number of elements'
+        );
+        return;
+      }
+      entries.forEach(entry => {
+        setIntersectionObserverEntry(entry);
+      });
+    });
+
+    unobserveRef.current = observer.unobserve.bind(observer, el);
+
+    observer.observe(el);
+  }, []);
+
+  return [setRef, intersectionObserverEntry];
+}
+
+function getTop(element: Readonly<Element>): number {
+  return element.getBoundingClientRect().top;
+}
+
+function isWrapped(element: Readonly<null | HTMLElement>): boolean {
+  if (!element) {
+    return false;
+  }
+
+  const { children } = element;
+  const firstChild = first(children);
+  const lastChild = last(children);
+
+  return Boolean(
+    firstChild &&
+      lastChild &&
+      firstChild !== lastChild &&
+      getTop(firstChild) !== getTop(lastChild)
+  );
+}
+
+/**
+ * A hook that returns a ref (to put on your element) and a boolean. The boolean will be
+ * `true` if the element's children have different `top`s, and `false` otherwise.
+ */
+export function useHasWrapped<T extends HTMLElement>(): [
+  React.Ref<T>,
+  boolean
+] {
+  const [element, setElement] = React.useState<null | T>(null);
+
+  const [hasWrapped, setHasWrapped] = React.useState(isWrapped(element));
+
+  React.useEffect(() => {
+    if (!element) {
+      return noop;
+    }
+
+    // We can remove this `any` when we upgrade to TypeScript 4.2+, which adds
+    //   `ResizeObserver` type definitions.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const observer = new (window as any).ResizeObserver(() => {
+      setHasWrapped(isWrapped(element));
+    });
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return [setElement, hasWrapped];
+}

ts/util/hooks/useRestoreFocus.ts

@@ -0,0 +1,47 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+type CallbackType = (toFocus: HTMLElement | null | undefined) => void;
+
+// Restore focus on teardown
+export const useRestoreFocus = (): Array<CallbackType> => {
+  const toFocusRef = React.useRef<HTMLElement | null>(null);
+  const lastFocusedRef = React.useRef<HTMLElement | null>(null);
+
+  // We need to use a callback here because refs aren't necessarily populated on first
+  //   render. For example, ModalHost makes a top-level parent div first, and then renders
+  //   into it. And the children you pass it don't have access to that root div.
+  const setFocusRef = React.useCallback(
+    (toFocus: HTMLElement | null | undefined) => {
+      if (!toFocus) {
+        return;
+      }
+
+      // We only want to do this once.
+      if (toFocusRef.current) {
+        return;
+      }
+      toFocusRef.current = toFocus;
+
+      // Remember last-focused element, focus this new target element.
+      lastFocusedRef.current = document.activeElement as HTMLElement;
+      toFocus.focus();
+    },
+    []
+  );
+
+  React.useEffect(() => {
+    return () => {
+      // On unmount, returned focus to element focused before we set the focus
+      setTimeout(() => {
+        if (lastFocusedRef.current && lastFocusedRef.current.focus) {
+          lastFocusedRef.current.focus();
+        }
+      });
+    };
+  }, []);
+
+  return [setFocusRef];
+};