86 lines
3.9 KiB
Clojure
86 lines
3.9 KiB
Clojure
(ns auto-ap.views.pages.page-stack
|
|
(:require
|
|
[auto-ap.views.utils :refer [switch-transition transition]]
|
|
[reagent.core :as r]))
|
|
|
|
(defn page-stack []
|
|
(let [last-stack-size (r/atom (->> (r/current-component)
|
|
r/children
|
|
(filter identity) count))
|
|
forward? (r/atom false)]
|
|
(fn [{:keys [pages active]}]
|
|
(let [current-stack-size (->> pages
|
|
(take-while #(not= (:key %)
|
|
active))
|
|
count)
|
|
current-child (->> pages
|
|
(filter #(= (:key %)
|
|
active))
|
|
first)]
|
|
(when (not= current-stack-size @last-stack-size)
|
|
(reset! forward? (> current-stack-size @last-stack-size))
|
|
(reset! last-stack-size current-stack-size))
|
|
[:div
|
|
[:h1.title (:breadcrumb current-child)]
|
|
[switch-transition {:mode "in-out"}
|
|
^{:key current-stack-size}
|
|
[transition
|
|
{:timeout 100
|
|
:exit true
|
|
:in true #_(= current-stack- (:key (meta child)))
|
|
:appear (> current-stack-size 1)}
|
|
(clj->js (fn [state]
|
|
(r/as-element
|
|
[:div {:style {
|
|
:position (cond
|
|
(= "entered" state)
|
|
""
|
|
|
|
(= "entering" state)
|
|
"absolute"
|
|
|
|
(= "exiting" state)
|
|
"absolute"
|
|
|
|
(= "exited" state)
|
|
"")
|
|
:transition "opacity 300ms ease-in-out, transform 300ms ease-in-out"
|
|
:opacity (cond
|
|
(= "entered" state)
|
|
""
|
|
|
|
(= "entering" state)
|
|
0.0
|
|
|
|
(= "exiting" state)
|
|
1.0
|
|
|
|
(= "exited" state)
|
|
0.0)
|
|
:transform (if @forward?
|
|
(cond
|
|
(= "entered" state)
|
|
""
|
|
|
|
(= "entering" state)
|
|
"translateX(100%)"
|
|
|
|
(= "exiting" state)
|
|
"translateX(-100%)"
|
|
|
|
(= "exited" state)
|
|
"translateX(0%)")
|
|
(cond
|
|
(= "entered" state)
|
|
""
|
|
|
|
(= "entering" state)
|
|
"translateX(-100%)"
|
|
|
|
(= "exiting" state)
|
|
"translateX(100%)"
|
|
|
|
(= "exited" state)
|
|
"translateX(0%)"))}}
|
|
(:content current-child)])))]]]))))
|