From 326badfc684939dd680050ec9b3f9248e5f00db9 Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Mon, 22 Jan 2018 21:36:07 +1100 Subject: [PATCH] Animation - humble beginnings --- project.clj | 3 +- src/day8/re_frame/trace/utils/animated.cljs | 64 +++++++++++ src/day8/re_frame/trace/view/app_db.cljs | 119 ++++++++++++++------ 3 files changed, 149 insertions(+), 37 deletions(-) create mode 100644 src/day8/re_frame/trace/utils/animated.cljs diff --git a/project.clj b/project.clj index 2d1f8ee..4863d2a 100644 --- a/project.clj +++ b/project.clj @@ -7,7 +7,8 @@ [reagent "0.6.0" :scope "provided"] [re-frame "0.10.3-alpha2" :scope "provided"] [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"] [lein-less "RELEASE"]] :deploy-repositories {"releases" :clojars diff --git a/src/day8/re_frame/trace/utils/animated.cljs b/src/day8/re_frame/trace/utils/animated.cljs new file mode 100644 index 0000000..c8e03c9 --- /dev/null +++ b/src/day8/re_frame/trace/utils/animated.cljs @@ -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"))) diff --git a/src/day8/re_frame/trace/view/app_db.cljs b/src/day8/re_frame/trace/view/app_db.cljs index f9b3818..abf62aa 100644 --- a/src/day8/re_frame/trace/view/app_db.cljs +++ b/src/day8/re_frame/trace/view/app_db.cljs @@ -2,6 +2,7 @@ (:require [devtools.prefs] [devtools.formatters.core] [day8.re-frame.trace.utils.utils :as utils] + [day8.re-frame.trace.utils.animated :as animated] [day8.re-frame.trace.view.components :as components] [mranderson047.re-frame.v0v10v2.re-frame.core :as rf] [mranderson047.reagent.v0v6v0.reagent.core :as r] @@ -198,6 +199,7 @@ (get-in @app-db-after path)))] [rc/v-box ;: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] [rc/v-box :class (when open? "app-db-path--pod-border") @@ -224,43 +226,50 @@ #_[path]] #_"---main-section---"]]) - (when render-diff? - (list - ^{:key "only-before"} - [rc/v-box - :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]]] + [animated/component + (animated/v-box-options {:style { + ;:margin-left "-34px" + ;:opacity "1" + ;:height "200px" + ;:min-height "10px" + }}) + (when render-diff? + (list + ^{:key "only-before"} + [rc/v-box + :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"} - [rc/v-box - :class "data-viewer data-viewer--top-rule" - :children [[components/simple-render - diff-before - ["app-db-diff" path]]]] + ^{:key "only-before-diff"} + [rc/v-box + :class "data-viewer data-viewer--top-rule" + :children [[components/simple-render + diff-before + ["app-db-diff" path]]]] - ^{:key "only-after"} - [rc/v-box - :class "app-db-path--link" - :justify :end - :children [[rc/hyperlink-href - ;:class "app-db-path--label" - :label "ONLY AFTER" - :style {:margin-left common/gs-7s} - :target "_blank" - :href utils/diff-link]]] + ^{:key "only-after"} + [rc/v-box + :class "app-db-path--link" + :justify :end + :children [[rc/hyperlink-href + ;:class "app-db-path--label" + :label "ONLY AFTER" + :style {:margin-left common/gs-7s} + :target "_blank" + :href utils/diff-link]]] - ^{:key "only-after-diff"} - [rc/v-box - :class "data-viewer data-viewer--top-rule rounded-bottom" - :children [[components/simple-render - diff-after - ["app-db-diff" path]]]])) + ^{:key "only-after-diff"} + [rc/v-box + :class "data-viewer data-viewer--top-rule rounded-bottom" + :children [[components/simple-render + diff-after + ["app-db-diff" path]]]]))] (when open? [rc/gap-f :size pod-padding])]]]])) @@ -278,13 +287,51 @@ (defn pod-section [] (let [pods @(rf/subscribe [:app-db/paths])] - [rc/v-box + + ;; CURRENT + #_[rc/v-box :gap pod-gap :children (if (empty? pods) [[no-pods]] (doall (for [p 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 (defn original-render [app-db]