UIx Material UI Alert Dialog Slide

alertdialog_slide.cljs

(ns uix.alertdialog-slide
  "UIx version of óhttps://material-ui.com/components/dialogs/#transitions"
  (:require ["@material-ui/core/Button" :as Button]
            ["@material-ui/core/Dialog" :as Dialog]
            ["@material-ui/core/DialogActions" :as DialogActions]
            ["@material-ui/core/DialogContent" :as DialogContent]
            ["@material-ui/core/DialogContentText" :as DialogContentText]
            ["@material-ui/core/DialogTitle" :as DialogTitle]
            ["@material-ui/core/Slide" :as Slide]
            [react :as r]
            [uix.compiler.alpha :as uixc]
            [uix.core.alpha :as uix]
            ))

(defn Transition
  "Ive not found a uix idiomatic way to handle the extra parameter of forwardRef"
  []
  (r/forwardRef (fn [props ref]
                  (set! (.-ref props) ref)
                  (set! (.-direction props) "up")
                  (r/createElement Slide/default props))))

(defn AlertDialogSlide
  []
  (let [opened (uix/state false)]
    [:div
     [:> Button/default {:variant "outlined"
                         :color "primary"
                         :on-click #(reset! opened true)}
      "Slide in alert dialog"]
     [:> Dialog/default
      {:open @opened
       :TransitionComponent (Transition)
       :on-close #(reset! opened false)
       :aria-labelledby "alert-dialog-slide-title"
       :aria-describedby "alert-dialog-slide-description"}
      [:> DialogTitle/default
       {:id "alert-dialog-slide-title"}
       "Use Google's location service?"]
      [:> DialogContent/default
       [:> DialogContentText/default
        {:id "alert-dialog-slide-description"}
        "Let Google help apps determine location. "
        "This means sending anonymous location data "
        "to Google, even when no apps are running"]]
      [:> DialogActions/default
       [:> Button/default
        {:on-click #(reset! opened false) :color "primary"}
        "Disagree"]
       [:> Button/default
        {:on-click #(reset! opened false) :color "primary"}
        "Agree"]
       ]
      ]]))