diff --git a/src/uxbox/ui/messages.cljs b/src/uxbox/ui/messages.cljs new file mode 100644 index 000000000..994f7b4ce --- /dev/null +++ b/src/uxbox/ui/messages.cljs @@ -0,0 +1,74 @@ +(ns uxbox.ui.messages + (:require [sablono.core :as html :refer-macros [html]] + [rum.core :as rum] + [promesa.core :as p] + [cuerdas.core :as str] + [uxbox.rstore :as rs] + [uxbox.ui.icons :as i] + [uxbox.ui.mixins :as mx] + [uxbox.util.data :refer (classnames)] + [uxbox.util.dom :as dom])) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Api +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defonce +message+ (atom nil)) +(def ^:const +animation-timeout+ 600) + +(defn set-timeout! + [ms callback] + (js/setTimeout callback ms)) + +(defn abort-timeout! + [v] + (js/clearTimeout v)) + +(defn error + ([message] (error message nil)) + ([message {:keys [timeout] :or {timeout 3000}}] + (when-let [prev-message @+message+] + (abort-timeout! (:timeout-total prev-message)) + (abort-timeout! (:timeout prev-message))) + + (let [timeout-total (set-timeout! (+ timeout +animation-timeout+) + #(reset! +message+ nil)) + timeout (set-timeout! timeout #(swap! +message+ assoc :state :hide))] + (reset! +message+ {:type :error + :state :normal + :timeout-total timeout-total + :timeout timeout + :content message})))) + +;; (set-timeout! 1000 #(error "Something wrong has happened 1")) +;; (set-timeout! 2000 #(error "Something wrong has happened 2")) +;; (set-timeout! 3000 #(error "Something wrong has happened 3")) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Component +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn messages-will-update + [own] + (println "messages-will-update") + own) + +(defn messages-render + [own] + (when-let [message (rum/react +message+)] + (let [classes (classnames :error (= (:type message) :error) + :info (= (:type message) :info) + :hide-message (= (:state message) :hide) + :quick true)] + (html + [:div.message {:class classes} + [:div.message-body + [:span.close i/close] + [:span (:content message)]]])))) + +(def ^:const messages + (mx/component + {:render messages-render + :will-update messages-will-update + :name "messages" + :mixins [mx/static rum/reactive]}))