From 9dfe18e918b74fece5640792927803a559dd7c7e Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Sun, 19 Apr 2020 15:18:01 +0300 Subject: [PATCH] Add react-transition-group example Closes #311 --- doc/InteropWithReact.md | 1 + examples/react-transition-group/project.clj | 28 ++++++++ .../resources/public/fade.css | 21 ++++++ .../resources/public/index.html | 14 ++++ .../src/example/core.cljs | 72 +++++++++++++++++++ 5 files changed, 136 insertions(+) create mode 100644 examples/react-transition-group/project.clj create mode 100644 examples/react-transition-group/resources/public/fade.css create mode 100644 examples/react-transition-group/resources/public/index.html create mode 100644 examples/react-transition-group/src/example/core.cljs diff --git a/doc/InteropWithReact.md b/doc/InteropWithReact.md index e1e1d70..14afc97 100644 --- a/doc/InteropWithReact.md +++ b/doc/InteropWithReact.md @@ -191,3 +191,4 @@ to always put the call at the top, as in `my-div` here: - [Material-UI](../examples/material-ui/src/example/core.cljs) - [React-sortable-hoc](../examples/react-sortable-hoc/src/example/core.cljs) +- [React-transition-group](../examples/react-transition-group/src/example/core.cljs) diff --git a/examples/react-transition-group/project.clj b/examples/react-transition-group/project.clj new file mode 100644 index 0000000..98d9a10 --- /dev/null +++ b/examples/react-transition-group/project.clj @@ -0,0 +1,28 @@ +(defproject reagent/react-sortable-hoc-example "0.1.0" + :dependencies [[org.clojure/clojure "1.10.1"] + [org.clojure/clojurescript "1.10.597"] + [reagent "0.10.0"] + [figwheel "0.5.19"] + [cljsjs/react-transition-group "4.3.0-0"]] + + :plugins [[lein-cljsbuild "1.1.7"] + [lein-figwheel "0.5.19"]] + + :figwheel {:repl false + :http-server-root "public"} + + :profiles {:dev {:resource-paths ["target/cljsbuild/client" "target/cljsbuild/client-npm"]}} + + :cljsbuild + {:builds + {:client + {:source-paths ["src"] + :figwheel true + :compiler {:parallel-build true + :source-map true + :optimizations :none + :main "example.core" + :output-dir "target/cljsbuild/client/public/js/out" + :output-to "target/cljsbuild/client/public/js/main.js" + :asset-path "js/out" + :npm-deps false}}}}) diff --git a/examples/react-transition-group/resources/public/fade.css b/examples/react-transition-group/resources/public/fade.css new file mode 100644 index 0000000..f21a371 --- /dev/null +++ b/examples/react-transition-group/resources/public/fade.css @@ -0,0 +1,21 @@ +.hide { + opacity: 0.01; +} + +.fade-enter { + opacity: 0.01; +} + +.fade-enter.fade-enter-active { + opacity: 1; + transition: opacity 500ms ease-in; +} + +.fade-exit { + opacity: 1; +} + +.fade-exit.fade-exit-active { + opacity: 0.01; + transition: opacity 300ms ease-in; +} diff --git a/examples/react-transition-group/resources/public/index.html b/examples/react-transition-group/resources/public/index.html new file mode 100644 index 0000000..9aff66e --- /dev/null +++ b/examples/react-transition-group/resources/public/index.html @@ -0,0 +1,14 @@ + + + + + Example + + + +
+

Reagent example app – see README.md

+
+ + + diff --git a/examples/react-transition-group/src/example/core.cljs b/examples/react-transition-group/src/example/core.cljs new file mode 100644 index 0000000..54335c7 --- /dev/null +++ b/examples/react-transition-group/src/example/core.cljs @@ -0,0 +1,72 @@ +(ns example.core + (:require [reagent.core :as r] + [reagent.dom :as rdom] + ["react-transition-group" :refer [TransitionGroup CSSTransition]] + [goog.object :as gobj])) + +(defn transition-group-example [] + (let [state (r/atom {:i 1 + :elements []})] + (fn [] + [:div + [:button + {:on-click (fn [_] + (swap! state (fn [s] + (-> s + (update :i inc) + (update :elements conj (inc (:i s)))))))} + "Append element"] + [:button + {:on-click (fn [_] + (swap! state (fn [s] + (-> s + (update :elements #(vec (drop-last %)))))))} + "Remove element"] + [:> TransitionGroup + {:component "ul"} + (for [e (:elements @state)] + ;; Looks like :key from props doesn't work with native components + ^{:key e} + ;; Can't move this to separate function, or reagent will add component in between and transitions break + [:> CSSTransition + {:classNames "fade" + :timeout 500 + :on-enter #(js/console.log "enter" e) + :on-entering #(js/console.log "entering" e) + :on-entered #(js/console.log "entered" e) + :on-exit #(js/console.log "enter" e) + :on-exiting #(js/console.log "exiting" e) + :on-exited #(js/console.log "exited" e)} + [:li "item " e]])] ]))) + +(defn css-transition-example [] + (let [state (r/atom true)] + (fn [] + [:div + [:button + {:on-click (fn [_] (swap! state not))} + "Toggle"] + [:> CSSTransition + {:classNames "fade" + :timeout 500 + :in @state + :on-enter #(js/console.log "enter") + :on-entering #(js/console.log "entering") + :on-entered #(js/console.log "entered") + :on-exit #(js/console.log "enter") + :on-exiting #(js/console.log "exiting") + :on-exited #(js/console.log "exited")} + [:div {:class (if-not @state "hide")} "foobar"]]]))) + +(defn main [] + [:div + [:h1 "Transition group example"] + [transition-group-example] + + [:h1 "CSS transition example"] + [css-transition-example]]) + +(defn start [] + (rdom/render [main] (js/document.getElementById "app"))) + +(start)