status-im/reagent
2
0
Fork 0
mirror of https://github.com/status-im/reagent.git synced 2025-01-11 20:34:37 +00:00
Code Issues Projects Releases Wiki Activity

Add react-transition-group example

Browse Source 
Closes #311
This commit is contained in:
Juho Teperi 2020-04-19 15:18:01 +03:00
parent 66ff6ccb82
commit 9dfe18e918
5 changed files with 136 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
doc/InteropWithReact.md
View File

@ -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)

28
examples/react-transition-group/project.clj Normal file
View File

@ -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}}}})

21
examples/react-transition-group/resources/public/fade.css Normal file
View File

@ -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;
}

14
examples/react-transition-group/resources/public/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="fade.css">
</head>
<body>
<div id="app">
<h1>Reagent example app – see README.md</h1>
</div>
<script src="js/main.js"></script>
</body>
</html>

72
examples/react-transition-group/src/example/core.cljs Normal file
View File

@ -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)