Improving the tile server chooser (#7)

src/components/map/TileServerChooserDialog.tsx

@@ -1,4 +1,7 @@
 import {
+  createAnimation,
+  IonButton,
+  IonButtons,
   IonContent,
   IonHeader,
   IonItem,
@@ -8,29 +11,69 @@ import {
   IonRadio,
   IonRadioGroup,
   IonTitle,
+  IonToolbar,
 } from '@ionic/react';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { mapActions, MapState } from '../../store/map';
 import { tileProviders } from './tile';
 
 const TileServerChooserDialog: React.FC<{}> = () => {
-  
   const tileProvider = useSelector(
     (state: { map: MapState }) => state.map.scope.tileProvider
   ) as keyof typeof tileProviders;
 
   const dispatch = useDispatch();
 
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  const dismiss = () => {
+    modal.current?.dismiss();
+  };
+
   const changeHandler = (event: any) => {
     dispatch(mapActions.setTileProvider(event.detail.value));
+    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 trigger='open-TileServerChooser'>
+    <IonModal
-      <IonHeader>
+      ref={modal}
-        <IonTitle>Select your map</IonTitle>
+      trigger='open-TileServerChooser'
-      </IonHeader>
+      enterAnimation={enterAnimation}
+      leaveAnimation={leaveAnimation}
+    >
+      <IonToolbar>
+        <IonTitle>Choose your map</IonTitle>
+        <IonButtons slot='end'>
+          <IonButton onClick={() => dismiss()}>Close</IonButton>
+        </IonButtons>
+      </IonToolbar>
       <IonContent>
         <IonList>
           <IonRadioGroup value={tileProvider} onIonChange={changeHandler}>

src/theme/map.css

@@ -42,3 +42,25 @@ path {
 path.current {
   stroke: rgba(2, 71, 20, 0.8);
 }
+
+ion-modal {
+  --height: 50%;
+  --border-radius: 16px;
+  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* ion-modal::part(backdrop) {
+  background: rgba(209, 213, 219);
+  opacity: 1;
+} */
+
+ion-modal ion-toolbar {
+  --background: rgba(14,116,144, .7);
+  --color: white;
+}
+
+ion-modal ion-content {
+  background-color: rgba(255,255,255,.7)
+  ;
+}