notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form builder as a way to simplify some things

Browse Source
This commit is contained in:
Bryce Covert
2022-07-14 22:08:03 -07:00
parent 99fe24ddae
commit 586978823e
6 changed files with 760 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/cljs/auto_ap/views/pages/page_stack.cljs Normal file
View File

@@ -0,0 +1,85 @@
(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)])))]]]))))