Creating a library for modal animations.

src/components/map/TileServerChooserDialog.tsx

@@ -1,9 +1,7 @@
 import {
-  createAnimation,
   IonButton,
   IonButtons,
   IonContent,
-  IonHeader,
   IonItem,
   IonLabel,
   IonList,
@@ -15,6 +13,7 @@ import {
 } from '@ionic/react';
 import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { enterAnimation, leaveAnimation } from '../../lib/animation';
 import { mapActions, MapState } from '../../store/map';
 import { tileProviders } from './tile';
 
@@ -36,30 +35,6 @@ const TileServerChooserDialog: React.FC<{}> = () => {
     dismiss();
   };
 
-  const enterAnimation = (baseEl: HTMLElement) => {
-    const root = baseEl.shadowRoot;
-
-    const backdropAnimation = createAnimation()
-      .addElement(root?.querySelector('ion-backdrop')!)
-      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-    const wrapperAnimation = createAnimation()
-      .addElement(root?.querySelector('.modal-wrapper')!)
-      .keyframes([
-        { offset: 0, opacity: '0', transform: 'scale(0)' },
-        { offset: 1, opacity: '0.99', transform: 'scale(1)' },
-      ]);
-
-    return createAnimation()
-      .addElement(baseEl)
-      .easing('ease-out')
-      .duration(500)
-      .addAnimation([backdropAnimation, wrapperAnimation]);
-  };
-
-  const leaveAnimation = (baseEl: HTMLElement) => {
-    return enterAnimation(baseEl).direction('reverse');
-  };
 
   return (
     <IonModal

src/components/map/gpx-record.tsx

@@ -4,7 +4,6 @@ import { useDB, useFind } from 'react-pouchdb';
 
 import '../../theme/get-location.css';
 import {
-  createAnimation,
   IonButton,
   IonButtons,
   IonContent,
@@ -25,6 +24,7 @@ import {
   stopBackgroundGeolocation,
 } from '../../lib/background-geolocation';
 import { deleteCurrent, saveCurrent } from '../../db/gpx';
+import { enterAnimation, leaveAnimation } from '../../lib/animation';
 
 const GpxRecord: React.FC<{}> = () => {
   const db = useDB();
@@ -80,30 +80,6 @@ const GpxRecord: React.FC<{}> = () => {
     pauseRecording();
   };
 
-  const enterAnimation = (baseEl: HTMLElement) => {
-    const root = baseEl.shadowRoot;
-
-    const backdropAnimation = createAnimation()
-      .addElement(root?.querySelector('ion-backdrop')!)
-      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-    const wrapperAnimation = createAnimation()
-      .addElement(root?.querySelector('.modal-wrapper')!)
-      .keyframes([
-        { offset: 0, opacity: '0', transform: 'scale(0)' },
-        { offset: 1, opacity: '0.99', transform: 'scale(1)' },
-      ]);
-
-    return createAnimation()
-      .addElement(baseEl)
-      .easing('ease-out')
-      .duration(500)
-      .addAnimation([backdropAnimation, wrapperAnimation]);
-  };
-
-  const leaveAnimation = (baseEl: HTMLElement) => {
-    return enterAnimation(baseEl).direction('reverse');
-  };
 
   return (
     <Fragment>

src/lib/animation.ts

@@ -0,0 +1,26 @@
+import { createAnimation } from '@ionic/react';
+
+export const enterAnimation = (baseEl: HTMLElement) => {
+  const root = baseEl.shadowRoot;
+
+  const backdropAnimation = createAnimation()
+    .addElement(root?.querySelector('ion-backdrop')!)
+    .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+  const wrapperAnimation = createAnimation()
+    .addElement(root?.querySelector('.modal-wrapper')!)
+    .keyframes([
+      { offset: 0, opacity: '0', transform: 'scale(0)' },
+      { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+    ]);
+
+  return createAnimation()
+    .addElement(baseEl)
+    .easing('ease-out')
+    .duration(500)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+export const leaveAnimation = (baseEl: HTMLElement) => {
+  return enterAnimation(baseEl).direction('reverse');
+};