mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
Add initial messages implementation.
This commit is contained in:
parent
8ec429f0cf
commit
bbdebfb846
1 changed files with 74 additions and 0 deletions
74
src/uxbox/ui/messages.cljs
Normal file
74
src/uxbox/ui/messages.cljs
Normal file
|
@ -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]}))
|
Loading…
Add table
Reference in a new issue