Skip to content

Commit

Permalink
add delayed-class property
Browse files Browse the repository at this point in the history
  • Loading branch information
@mitchdzugan
mitchdzugan committed May 13, 2020
1 parent 9f6d7f4 commit 119a731
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 31 deletions.
2 changes: 1 addition & 1 deletion project.clj
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
(defproject mayu "0.1.37"
(defproject mayu "0.1.38"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
Expand Down
8 changes: 8 additions & 0 deletions resources/public/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,11 @@ a:hover {
label input {
margin-left: 10px;
}

.transition {
transition: transform 0.4s;
}

.no-transition .transition {
transition: none;
}
32 changes: 18 additions & 14 deletions src/cljc/mayu/dom.cljc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@
[mayu.async
:refer [go go-loop timeout <! chan >! close!]]
[mayu.dom.to-string.attrs
:refer [render-attr-map]]
:refer [render-attr-map render-class]]
[mayu.mdom
:refer [->MText ->MCreateElement ->MBind ->MSSRAwait]]
[wayra.core :as w
:refer [defnm defm mdo fnm <#>]])
#?(:cljs (:require-macros [mayu.dom :refer [mk-ons]])))

;; TODO investigate collect-reduce-and-bind (crab) within crab within crab

(defm env (w/asks :env))

(defnm envs [f]
Expand Down Expand Up @@ -165,16 +167,13 @@
[{} arg])]
(create-element tag attrs m)))
([tag attrs- m-]
let [to-single #(reduce str "" (interpose " " %))]
let [attrs (if (contains? attrs- :class)
(update attrs- :class
#(cond (map? %1) (->> (keys %1)
(filter (partial get %1))
(map name)
to-single)
(coll? %1) (to-single %1)
:else %1))
attrs-)
let [attrs (-> attrs-
(#(if (contains? %1 :class)
(update %1 :class render-class)
%1))
(#(if (contains? %1 :delayed-class)
(update %1 :delayed-class render-class)
%1)))
m (if (fn? m-) m- (text m-))]
{:keys [key]} <- w/get
(w/pass (step tag (inner-create-element key tag attrs m)))))
Expand Down Expand Up @@ -458,9 +457,14 @@

!MCreateElement
(let [{:keys [tag attrs children]} mdom
fixed-attrs (update attrs :style #(-> %1
(dissoc :delayed :remove)
(merge (:delayed %1))))]
fixed-attrs (-> attrs
(update :style #(-> %1
(dissoc :delayed :remove)
(merge (:delayed %1))))
(#(if (contains? %1 :delayed-class)
(assoc %1 :class (:delayed-class %1))
%1))
(dissoc :delayed-class))]
(str "<" tag (render-attr-map fixed-attrs) ">"
(reduce #(str %1 (proc-mdom %2 split-path state)) "" children)
"</" tag ">"))
Expand Down
9 changes: 9 additions & 0 deletions src/cljc/mayu/dom/to_string/attrs.cljc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,12 @@
"Render a map of attributes."
[attrs]
(apply str (sort (map render-attribute attrs))))

(defn render-class [c]
(let [to-single #(reduce str "" (interpose " " %))]
(cond (map? c) (->> (keys c)
(filter (partial get c))
(map name)
to-single)
(coll? c) (to-single c)
:else c)))
38 changes: 23 additions & 15 deletions src/cljc/mayu/examples.cljc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,25 +337,33 @@
(dom/emit ::counter (dom/on-click btn1))
<[button {:style {:margin-left "55px"}} "+"] btn >
(dom/emit ::items (e/map (varg# (->Append)) (dom/on-click btn)))
<[for items $[{:keys [id]}]=
<[keyed id
<[div {:style {:display "flex"
:align-items "stretch"
:margin "5px"
:transition "transform 0.4s"
:transform "scale(0, 0)"
:delayed {:transform "scale(1, 1)"}
:remove {:transform "scale(0, 0)"}}} $=
<[div {:style {:background-color "#74f7df"
:width "50px"}}]
<[button "x"] btn >
(dom/emit ::items (e/map (varg# (->Remove id)) (dom/on-click btn)))]]]]])
<[keyed counter
<[div {:class "no-transition"
:delayed-class ["test" "123"]}
$=
<[for items $[{:keys [id]}]=
<[keyed id
<[div {:class "transition"
:style {:display "flex"
:align-items "stretch"
:margin "5px"
:transform "scale(0, 0)"
:delayed {:transform "scale(1, 1)"}
:remove {:transform "scale(0, 0)"}}} $=
<[div {:style {:background-color "#74f7df"
:width "50px"}}]
<[button "x"] btn >
(dom/emit ::items (e/map (varg# (->Remove id)) (dom/on-click btn)))]]]]]]])

(defui ssr-await-demo []
s-timer <- (s/reduce inc 0 (e/timer 1000))
<[dom/bind s-timer $[timer]=
<[ul $=
<[li {:class {:a true :b false :c true}} "Begin"]
<[ul {:class ["a" "b"]
:delayed-class ["c" "d"]} $=
<[li {:style {:display "none"
:delayed {:display "block"}
:remove {:display "none"}}
:class {:a true :b false :c true}} "Begin"]
<[ssr-await (>= timer 2) 4000
<[timeout <[li "Failed to load in time"]]
<[then <[li "Slow loading 1"]]]
Expand Down
26 changes: 25 additions & 1 deletion src/cljs/mayu/attach.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@
curr-mutable (or (aget curr-data "mutable") #js {})
prev-mutable (or (aget prev-data "mutable") #js {})
path (aget curr-data "path")]
(when (and (.hasOwnProperty curr-data "delayed-class")
(not (.hasOwnProperty prev-data "delayed-class")))
(js/setTimeout #(->> (aget curr-data "delayed-class")
(aset elm "className"))
100))
(doseq [kw-key dom/mutable-keys]
(let [key (name kw-key)
val (aget curr-mutable key)]
Expand All @@ -34,6 +39,18 @@
(when @has?
(swap! g-mutable-els #(assoc % path elm)))))

(defn handle-delayed-class [prev curr]
(let [has? (atom false)
elm (aget curr "elm")
prev-data (or (aget prev "data") #js {})
curr-data (or (aget curr "data") #js {})]
(when (and (.hasOwnProperty curr-data "delayed-class")
(.hasOwnProperty prev-data "delayed-class"))
(let [args (aget curr-data "args")
delayed-class (aget curr-data "delayed-class")]
(->> (assoc-in args [1 :attrs :class] delayed-class)
(aset curr-data "args"))))))

(defrecord TText [s])
(defrecord TCreateElement [tag key path attrs children])

Expand Down Expand Up @@ -84,13 +101,14 @@

TCreateElement
(let [{:keys [tag key path attrs children]} tdom
{:keys [delayed-class]} attrs
mutable (reduce #(if (contains? attrs %2)
(assoc %1 %2 (get attrs %2))
%1)
{}
dom/mutable-keys)
fixed-attrs (reduce #(dissoc %1 %2)
(dissoc attrs :style)
(dissoc attrs :style :delayed-class)
dom/mutable-keys)
fix-keys
(fn [styles]
Expand All @@ -113,6 +131,9 @@
:hook {:insert push-el-mount
:postpatch push-el}}
(#(if (nil? key) %1 (assoc %1 :key (str (hash key)))))
(#(if (nil? delayed-class) %1 (assoc %1
:delayed-class
delayed-class)))
((fn [data]
(if (empty? (:style attrs))
data
Expand Down Expand Up @@ -147,6 +168,7 @@
(copy-to-thunk vnode thunk)))

(defn thunk-prepatch [prev curr]
(handle-delayed-class prev curr)
(let [prev-data (or (aget prev "data") #js {})
curr-data (or (aget curr "data") #js {})
prev-args (or (aget prev-data "args") [])
Expand All @@ -163,6 +185,8 @@
:args [tag data children path]}]
(when (not (nil? (:key data)))
(aset jsdata "key" (:key data)))
(when (not (nil? (:delayed-class data)))
(aset jsdata "delayed-class" (:delayed-class data)))
(h tag jsdata)))

(defprotomethod to-tdoms [mdom]
Expand Down

0 comments on commit 119a731

Please sign in to comment.