status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Animation - humble beginnings

This commit is contained in:
Gregg8 2018-01-22 21:36:07 +11:00
parent 23a63de354
commit 326badfc68
3 changed files with 149 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
project.clj
View File

@ -7,7 +7,8 @@
[reagent "0.6.0" :scope "provided"] [reagent "0.6.0" :scope "provided"]
[re-frame "0.10.3-alpha2" :scope "provided"] [re-frame "0.10.3-alpha2" :scope "provided"]
[binaryage/devtools "0.9.4"] [binaryage/devtools "0.9.4"]
[garden "1.3.3"]] [garden "1.3.3"]
[cljsjs/react-flip-move "2.9.17-0"]]
:plugins [[thomasa/mranderson "0.4.7"] :plugins [[thomasa/mranderson "0.4.7"]
[lein-less "RELEASE"]] [lein-less "RELEASE"]]
:deploy-repositories {"releases" :clojars :deploy-repositories {"releases" :clojars

64
src/day8/re_frame/trace/utils/animated.cljs Normal file
View File

@ -0,0 +1,64 @@
(ns day8.re-frame.trace.utils.animated
"Provides animation support for Regent components
Depends on react-flip-move via cljsjs/react-flip-move
https://github.com/cljsjs/packages/tree/master/react-flip-move
see: https://github.com/joshwcomeau/react-flip-move#table-of-contents
see: http://www.upgradingdave.com/blog/posts/2016-12-17-permutation.html
See: https://medium.com/developers-writing/animating-the-unanimatable-1346a5aab3cd#.20km1k5jr
Usage in apps:
[animated/component
(animated/v-box-options {:style {:margin-left \"-34px\"}}
(map
(fn [item] ^{:key (:id item)} [list-item item])
items-list)
see additional properties that can be specified in options
https://github.com/joshwcomeau/react-flip-move#options"
(:require
[mranderson047.reagent.v0v6v0.reagent.core :as reagent]
[cljsjs.react-flip-move]))
(def component
(reagent/adapt-react-class js/FlipMove))
(def ^{:constant true
:doc "mimic v-box style properties for standard :div
note1: typicaly you should also set :class \"rc-v-box display-flex\"
note2: re-com.box/justify-style & align-style for others"}
rc-v-box-style
{:align-items "stretch"
:flex-flow "column nowrap"
:flex "0 0 auto"
:justify-content "flex-start"})
(defn v-box-options
"return merged component attributes suitable for animated v-box.
See https://github.com/joshwcomeau/react-flip-move#options
for supported props other then :style"
[options]
(-> options
(update :style #(merge rc-v-box-style %))
(assoc :class "rc-v-box display-flex")))
(def ^{:constant true
:doc "mimic h-box style properties for standard :div
note1: typicaly you should also set :class \"rc-v-box display-flex\"
note2: re-com.box/justify-style & align-style for others"}
rc-h-box-style
{:align-items "stretch"
:flex-flow "row nowrap"
:flex "0 0 auto"
:justify-content "flex-start"})
(defn h-box-options
"return merged component attributes suitable for animated h-box.
See https://github.com/joshwcomeau/react-flip-move#options
for supported props other then :style"
[options]
(-> options
(update :style #(merge rc-h-box-style %))
(assoc :class "rc-h-box display-flex")))

119
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -2,6 +2,7 @@
(:require [devtools.prefs] (:require [devtools.prefs]
[devtools.formatters.core] [devtools.formatters.core]
[day8.re-frame.trace.utils.utils :as utils] [day8.re-frame.trace.utils.utils :as utils]
[day8.re-frame.trace.utils.animated :as animated]
[day8.re-frame.trace.view.components :as components] [day8.re-frame.trace.view.components :as components]
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf] [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
[mranderson047.reagent.v0v6v0.reagent.core :as r] [mranderson047.reagent.v0v6v0.reagent.core :as r]
@ -198,6 +199,7 @@
(get-in @app-db-after path)))] (get-in @app-db-after path)))]
[rc/v-box [rc/v-box
;:class "app-db-path" ;:class "app-db-path"
:style {:margin-top common/gs-19s} ;; TODO: Find out how to add a gap to the animated/v-box
:children [[pod-header pod-info] :children [[pod-header pod-info]
[rc/v-box [rc/v-box
:class (when open? "app-db-path--pod-border") :class (when open? "app-db-path--pod-border")
@ -224,43 +226,50 @@
#_[path]] #_[path]]
#_"---main-section---"]]) #_"---main-section---"]])
(when render-diff? [animated/component
(list (animated/v-box-options {:style {
^{:key "only-before"} ;:margin-left "-34px"
[rc/v-box ;:opacity "1"
:class "app-db-path--link" ;:height "200px"
:justify :end ;:min-height "10px"
:children [[rc/hyperlink-href }})
;:class "app-db-path--label" (when render-diff?
:label "ONLY BEFORE" (list
:style {:margin-left common/gs-7s} ^{:key "only-before"}
:target "_blank" [rc/v-box
:href utils/diff-link]]] :class "app-db-path--link"
:justify :end
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY BEFORE"
:style {:margin-left common/gs-7s}
:target "_blank"
:href utils/diff-link]]]
^{:key "only-before-diff"} ^{:key "only-before-diff"}
[rc/v-box [rc/v-box
:class "data-viewer data-viewer--top-rule" :class "data-viewer data-viewer--top-rule"
:children [[components/simple-render :children [[components/simple-render
diff-before diff-before
["app-db-diff" path]]]] ["app-db-diff" path]]]]
^{:key "only-after"} ^{:key "only-after"}
[rc/v-box [rc/v-box
:class "app-db-path--link" :class "app-db-path--link"
:justify :end :justify :end
:children [[rc/hyperlink-href :children [[rc/hyperlink-href
;:class "app-db-path--label" ;:class "app-db-path--label"
:label "ONLY AFTER" :label "ONLY AFTER"
:style {:margin-left common/gs-7s} :style {:margin-left common/gs-7s}
:target "_blank" :target "_blank"
:href utils/diff-link]]] :href utils/diff-link]]]
^{:key "only-after-diff"} ^{:key "only-after-diff"}
[rc/v-box [rc/v-box
:class "data-viewer data-viewer--top-rule rounded-bottom" :class "data-viewer data-viewer--top-rule rounded-bottom"
:children [[components/simple-render :children [[components/simple-render
diff-after diff-after
["app-db-diff" path]]]])) ["app-db-diff" path]]]]))]
(when open? (when open?
[rc/gap-f :size pod-padding])]]]])) [rc/gap-f :size pod-padding])]]]]))
@ -278,13 +287,51 @@
(defn pod-section [] (defn pod-section []
(let [pods @(rf/subscribe [:app-db/paths])] (let [pods @(rf/subscribe [:app-db/paths])]
[rc/v-box
;; CURRENT
#_[rc/v-box
:gap pod-gap :gap pod-gap
:children (if (empty? pods) :children (if (empty? pods)
[[no-pods]] [[no-pods]]
(doall (for [p pods] (doall (for [p pods]
^{:key (:id pods)} ^{:key (:id pods)}
[pod p])))])) [pod p])))]
;; ANIMATION EXPERIMENTS
[rc/v-box
:gap pod-gap
:children [
;; Original non-animated
#_(if (empty? pods)
[no-pods]
(for [p pods]
^{:key (:id p)}
[pod p]))
;; First and last pods don't animate (and CSS screwed up)
#_(if (empty? pods)
[no-pods]
[animated/component
(animated/v-box-options {:style {:margin-left "-34px"}})
(for [p pods]
^{:key (:id p)}
[pod p])])
;; Need to always render an animated/component to get first/last animation (CSS screwed up)
(if (empty? pods)
[no-pods]
[rc/box :width "0px" :height "0px"])
[animated/component
(animated/v-box-options {:style {
;:margin-left "-34px"
}})
(for [p pods]
^{:key (:id p)}
[pod p])]
]]
))
;; TODO: OLD UI - REMOVE ;; TODO: OLD UI - REMOVE
(defn original-render [app-db] (defn original-render [app-db]