enhance(capacitor): add modals

src/main/capacitor/app.cljs

@@ -86,7 +86,6 @@
   (let [[all-pages set-all-pages!] (rum/use-state [])
         [reload set-reload!] (rum/use-state 0)
         [page-input-open? set-page-input-open?] (rum/use-state false)
-        [journal-calendar-open? set-journal-calendar-open?] (rum/use-state false)
         [filtered-pages set-filtered-pages!] (rum/use-state [])]
 
     (rum/use-effect!
@@ -126,13 +125,28 @@
        [:div.flex.justify-between.items-center.mt-4
         [:h1.text-3xl.font-mono.font-bold.py-2 "Journals"]
         [:flex.gap-1
-         (ionic/ion-button {:size "small" :fill "clear" :on-click #(set-journal-calendar-open? true)}
+         (ionic/ion-button
+           {:size "small" :fill "clear"
+            :on-click (fn []
+                        (ui/open-modal!
+                          (fn [{:keys [close!]}]
+                            (ionic/ion-datetime
+                              {:presentation "date"
+                               :onIonChange (fn [^js e]
+                                              (let [val (.-value (.-detail e))]
+                                                (let [page-name (frontend-date/journal-name (gdate/Date. (js/Date. val)))
+                                                      nav-to-journal! #(pages-util/nav-to-block! % {:reload-pages! (fn [] ())})]
+                                                  (if-let [journal (handler/local-page page-name)]
+                                                    (nav-to-journal! journal)
+                                                    (-> (handler/<create-page! page-name)
+                                                      (p/then #(nav-to-journal! (handler/local-page page-name)))))
+                                                  (close!))))}))))}
            [:span {:slot "icon-only"} (ionic/tabler-icon "calendar" {:size 22})])]]
 
        (journals-list)
 
-       (when journal-calendar-open?
-         (journals-calendar-modal {:close! #(set-journal-calendar-open? false)}))
+       ;(when journal-calendar-open?
+       ;  (journals-calendar-modal {:close! #(set-journal-calendar-open? false)}))
 
        [:div.flex.justify-between.items-center.pt-4
         [:h1.text-3xl.font-mono.font-bold.py-2
@@ -243,4 +257,4 @@
                       :animated true :swipeGesture false})
 
       (ui/install-notifications)
-      ]]))
+      (ui/install-modals)]]))

src/main/capacitor/components/ui.cljs

@@ -2,6 +2,7 @@
   (:require [frontend.handler.notification :as notification]
             [frontend.rum :as r]
             [frontend.state :as fstate]
+            [medley.core :as medley]
             [react-transition-group :refer [CSSTransition TransitionGroup]]
             [rum.core :as rum]
             [capacitor.ionic :as ionic]))
@@ -101,13 +102,58 @@
             items (if clear-all (cons clear-all notifications) notifications)]
         (doall items)))))
 
+(defonce *modals (atom []))
+(defonce ^:private *id (atom 0))
+(defonce ^:private gen-id #(reset! *id (inc @*id)))
+
 (rum/defc simple-modal
-  [{:keys [close! as-page? modal-props]} children]
+  [{:keys [close! as-page? modal-props]} content]
   (let [{:keys [class]} modal-props]
     (ionic/ion-modal
       (merge modal-props
         {:is-open true
          :onWillDismiss (fn [] (close!))
          :class (str class (when (not (true? as-page?)) " ion-datetime-button-overlay"))})
-      (if (fn? children)
-        (children) children))))
+      (if (fn? content)
+        (content) content))))
+
+(defn get-modal
+  ([] (some-> @*modals last))
+  ([id]
+   (when id
+     (some->> (medley/indexed @*modals)
+       (filter #(= id (:id (second %)))) (first)))))
+
+(defn- upsert-modal!
+  [config]
+  (when-let [id (:id config)]
+    (if-let [[index config'] (get-modal id)]
+      (swap! *modals assoc index (merge config' config))
+      (swap! *modals conj config)) id))
+
+(defn- delete-modal!
+  [id]
+  (when-let [[index _] (get-modal id)]
+    (swap! *modals #(->> % (medley/remove-nth index) (vec)))))
+
+(defn open-modal!
+  [content & {:keys [id type] :as props}]
+  (upsert-modal!
+    (merge props
+      {:id (or id (gen-id))
+       :type (or type :default)                             ;; :alert :confirm :page
+       :as-page? (= type :page)
+       :content content})))
+
+(defn close-modal!
+  ([] (some-> @*modals (last) :id (close-modal!)))
+  ([id] (delete-modal! id)))
+
+(rum/defc install-modals []
+  (let [_ (r/use-atom *modals)]
+    [:<>
+     (for [{:keys [id content] :as props} @*modals
+           :let [close! #(close-modal! id)
+                 props' (assoc props :close! close!)]]
+       (simple-modal props'
+         (if (fn? content) (content props') content)))]))