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
+      ),
+  };
+}