Adds open/close animations to dialogs and modals

ts/hooks/useAnimated.tsx

@@ -0,0 +1,37 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useState, ReactElement } from 'react';
+import { animated, useTransition, UseTransitionProps } from '@react-spring/web';
+import cubicBezier from 'bezier-easing';
+
+export function useAnimated<Props extends Record<string, unknown>>(
+  props: UseTransitionProps,
+  onClose: () => unknown
+): {
+  close: () => unknown;
+  renderAnimation: (children: ReactElement) => JSX.Element;
+} {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const transitions = useTransition<boolean, Props>(isOpen, {
+    ...props,
+    leave: {
+      ...props.leave,
+      onRest: () => onClose(),
+    },
+    config: {
+      duration: 200,
+      easing: cubicBezier(0.17, 0.17, 0, 1),
+      ...props.config,
+    },
+  });
+
+  return {
+    close: () => setIsOpen(false),
+    renderAnimation: children =>
+      transitions((style, item) =>
+        item ? <animated.div style={style}>{children}</animated.div> : null
+      ),
+  };
+}

ts/hooks/useReducedMotion.ts

@@ -0,0 +1,34 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { useEffect, useState } from 'react';
+
+function getReducedMotionQuery(): MediaQueryList {
+  return window.matchMedia('(prefers-reduced-motion: reduce)');
+}
+
+// Inspired by <https://github.com/infiniteluke/react-reduce-motion>.
+export function useReducedMotion(): boolean {
+  const initialQuery = getReducedMotionQuery();
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
+    initialQuery.matches
+  );
+
+  useEffect(() => {
+    const query = getReducedMotionQuery();
+
+    function changePreference() {
+      setPrefersReducedMotion(query.matches);
+    }
+
+    changePreference();
+
+    query.addEventListener('change', changePreference);
+
+    return () => {
+      query.removeEventListener('change', changePreference);
+    };
+  });
+
+  return prefersReducedMotion;
+}