Alerts

A tiny library in Respo for showing alerts.

Usage

[respo/alerts "0.4.1"]

This library provides several UI components, so you need to control their visibilities with your own states, for example: {:show-alert? true}.

[respo-alerts.core :refer [comp-alert comp-prompt comp-confirm]]

Since every component has its own internal states, I use cursor-> in all examples:

comp-alert is like alert("message") but with a callback function:

(cursor-> :alert comp-alert states
          {:trigger (comp-buttom "trigger"),
           :text "message text",
           :style {}}
           (fn [e dispatch! mutate!]
               (dispatch! :some/action "data")))

comp-alert is like confirm("message") but with a callback function returning result:

(cursor-> :confirm comp-confirm states
          {:trigger (comp-button "trigger"),
           :text "message text"
           :style {}}
          (fn [e dispatch! mutate!]
              (dispatch! :some/action "data")
              (println "confirmed!")))

comp-prompt is like prompt("message", "default") but with a callback function returning result:

(cursor-> :prompt comp-prompt states
          {:trigger (comp-button "trigger"),
           :text "message text",
           :style {}
           :input-style {}
           :multiline? false
           :initial "default text"
           :placeholder "input"
           :button-text "Submit"
           :validator (fn [x] (if (string/blank? x) "Blank failed" nil))}
          (fn [result dispatch! mutate!]
              (dispatch! :some/action "data")
              (mutate! %cursor (assoc state :show-prompt? false))
              (println "finish editing!" result)))

comp-select pops up a select menu and returns a result in callback function:

(def candidates [{:value "haskell", :display "Haskell"}
                 {:value "clojure", :display "Clojure"}
                 {:value "elixir", :display "Elixir"}])

(cursor-> :select comp-select states (:selected state) candidates
          {:style-trigger {},
           :text "Select a item from:"}
          (fn [result d! m!]
              (println "finish selecting!" result)
              (m! %cursor (assoc state :selected result))))

comp-modal for rendering modal without child:

(let [on-close (fn [m!] (m! %cursor (assoc state :show? false)))]
 (comp-modal
  (:show? state)
  {:title "Demo", :style {:width 400}, :container-style {}}
  on-close
  (fn [] (div {} (<> "Place for child content")))))

(comp-modal-menu
  (:show-modal-menu? state)
  {:title "Demo", :style {:width 300}}
  [{:value "a", :display "A"} {:value "b", :display (div {} (<> "B"))}]
  (fn [m!] (m! %cursor (assoc state :show-modal-menu? false)))
  (fn [result d! m!]
    (println "result" result)
    (m! %cursor (assoc state :show-modal-menu? false)))))

Workflow

Workflow https://github.com/mvc-works/calcit-workflow

License

MIT