Skip to content

Commit 64b4693

Browse files
marnuswmarnusw
committed
React-Router 4 demo and support children rendering null.
1 parent 6513728 commit 64b4693

File tree

7 files changed

+143
-26
lines changed

7 files changed

+143
-26
lines changed

‎demo/assets/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@ p {
2222
.examples > p {
2323
margin-bottom: 20px;
2424
}
25+
26+
.router-example h2 {
27+
margin-top: 0;
28+
}

‎demo/assets/transitions.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,22 +98,22 @@
9898

9999
/* Fade with width transition */
100100

101-
.fade-width-leave {
101+
.fade-fast-leave {
102102
opacity: 1;
103103
}
104-
.fade-width-leave.fade-width-leave-active {
104+
.fade-fast-leave.fade-fast-leave-active {
105105
opacity: 0;
106106
transition: opacity .5s ease-in-out;
107107
}
108108

109-
.fade-width-enter {
109+
.fade-fast-enter {
110110
opacity: 0;
111111
}
112-
.fade-width-enter.fade-width-enter-active {
112+
.fade-fast-enter.fade-fast-enter-active {
113113
opacity: 1;
114114
transition: opacity .5s ease-in-out;
115115
}
116116

117-
.fade-width-height {
117+
.fade-fast-height {
118118
transition: height .5s ease-in-out, width .5s ease-in-out;
119119
}

‎demo/components/AnimatedRouter.jsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* eslint-disable react/no-multi-comp */
2+
import React from 'react'
3+
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
4+
import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx'
5+
6+
const Home = () => (
7+
<div>
8+
<h2>Home</h2>
9+
<img src="img/vista3.jpg" width="600" height="255"/>
10+
</div>
11+
)
12+
13+
const One = () => (
14+
<div>
15+
<h2>One</h2>
16+
<img src="img/vista4.jpg" width="600" height="280"/>
17+
</div>
18+
)
19+
20+
const Two = () => (
21+
<div>
22+
<h2>Two</h2>
23+
<img src="img/vista2.jpg" width="600" height="290"/>
24+
</div>
25+
)
26+
27+
const AnimatedRouter = () => (
28+
<Router>
29+
<div className="router-example">
30+
<ul>
31+
<li><Link to="/">Home</Link></li>
32+
<li><Link to="/one">One</Link></li>
33+
<li><Link to="/two">Two</Link></li>
34+
<li><Link to="/three">Three (no match)</Link></li>
35+
</ul>
36+
37+
<hr/>
38+
39+
<Route render={({location}) => (
40+
<ReactCSSTransitionReplace
41+
transitionName="fade-fast"
42+
transitionEnterTimeout={500}
43+
transitionLeaveTimeout={500}
44+
>
45+
<Switch key={location.pathname} location={location}>
46+
<Route path="/" exact component={Home}/>
47+
<Route path="/one" component={One}/>
48+
<Route path="/two" component={Two}/>
49+
</Switch>
50+
</ReactCSSTransitionReplace>
51+
)}/>
52+
53+
<hr/>
54+
</div>
55+
</Router>
56+
)
57+
58+
export default AnimatedRouter

‎demo/components/Demo.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const NavbarBrand = Navbar.Brand
66
import PageHead from './PageHead.jsx'
77
import ContentSwapper from './ContentSwapper.jsx'
88
import ContentAddRemove from './ContentAddRemove.jsx'
9+
import AnimatedRouter from './AnimatedRouter.jsx'
910

1011
import ContentLong from './ContentLong.jsx'
1112
import ContentShort from './ContentShort.jsx'
@@ -94,10 +95,15 @@ class Demo extends React.Component {
9495
<p></p>
9596

9697
<ContentAddRemove
97-
transitionName="fade-width" transitionEnterTimeout={500} transitionLeaveTimeout={500} changeWidth
98+
transitionName="fade-fast" transitionEnterTimeout={500} transitionLeaveTimeout={500} changeWidth
9899
>
99100
<img key="img1" src="img/vista1.jpg" width="600" height="235"/>
100101
</ContentAddRemove>
102+
103+
<h3 id="react-router">React Router v4</h3>
104+
<p></p>
105+
106+
<AnimatedRouter />
101107
</div>
102108
</Grid>
103109
</div>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"react": "^15.3.2",
7676
"react-bootstrap": "^0.31.0",
7777
"react-dom": "^15.3.2",
78+
"react-router-dom": "^4.1.1",
7879
"rimraf": "^2.5.4",
7980
"vinyl-buffer": "^1.0.0",
8081
"vinyl-source-stream": "^1.1.0",

‎src/ReactCSSTransitionReplace.jsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,11 @@ export default class ReactCSSTransitionReplace extends React.Component {
101101
}
102102

103103
if (currentChild) {
104-
nextState.height = findDOMNode(this.childRefs[currentKey]).offsetHeight
105-
nextState.width = this.props.changeWidth ? findDOMNode(this.childRefs[currentKey]).offsetWidth : null
104+
const currentChildNode = findDOMNode(this.childRefs[currentKey])
105+
nextState.height = currentChildNode ? currentChildNode.offsetHeight : 0
106+
nextState.width = this.props.changeWidth
107+
? (currentChildNode ? currentChildNode.offsetWidth : 0)
108+
: null
106109
nextState.prevChildren = {
107110
...prevChildren,
108111
[currentKey]: currentChild,
@@ -118,7 +121,10 @@ export default class ReactCSSTransitionReplace extends React.Component {
118121
componentDidUpdate() {
119122
if (this.shouldEnterCurrent) {
120123
this.shouldEnterCurrent = false
121-
this.performEnter(this.state.currentKey)
124+
// If the current child renders null there is nothing to enter
125+
if (findDOMNode(this.childRefs[this.state.currentKey])) {
126+
this.performEnter(this.state.currentKey)
127+
}
122128
}
123129

124130
const keysToLeave = this.keysToLeave
@@ -194,10 +200,11 @@ export default class ReactCSSTransitionReplace extends React.Component {
194200
performHeightTransition = () => {
195201
if (!this.unmounted) {
196202
const {state} = this
203+
const currentChildNode = state.currentChild ? findDOMNode(this.childRefs[state.currentKey]) : null
197204
this.setState({
198-
height: state.currentChild ? findDOMNode(this.childRefs[state.currentKey]).offsetHeight : 0,
205+
height: currentChildNode ? currentChildNode.offsetHeight : 0,
199206
width: this.props.changeWidth
200-
? (state.currentChild ? findDOMNode(this.childRefs[state.currentKey]).offsetWidth : 0)
207+
? (currentChildNode ? currentChildNode.offsetWidth : 0)
201208
: null,
202209
})
203210
}

‎yarn.lock‎

Lines changed: 56 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1254,15 +1254,7 @@ [email protected]:
12541254
version "0.0.1"
12551255
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
12561256

1257-
concat-stream@^1.5.2:
1258-
version "1.6.0"
1259-
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
1260-
dependencies:
1261-
inherits "^2.0.3"
1262-
readable-stream "^2.2.2"
1263-
typedarray "^0.0.6"
1264-
1265-
concat-stream@~1.5.0, concat-stream@~1.5.1:
1257+
concat-stream@^1.5.2, concat-stream@~1.5.0, concat-stream@~1.5.1:
12661258
version "1.5.2"
12671259
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.2.tgz#708978624d856af41a5a741defdd261da752c266"
12681260
dependencies:
@@ -2378,6 +2370,16 @@ hawk@~3.1.3:
23782370
hoek "2.x.x"
23792371
sntp "1.x.x"
23802372

2373+
history@^4.5.1, history@^4.6.0:
2374+
version "4.6.1"
2375+
resolved "https://registry.yarnpkg.com/history/-/history-4.6.1.tgz#911cf8eb65728555a94f2b12780a0c531a14d2fd"
2376+
dependencies:
2377+
invariant "^2.2.1"
2378+
loose-envify "^1.2.0"
2379+
resolve-pathname "^2.0.0"
2380+
value-equal "^0.2.0"
2381+
warning "^3.0.0"
2382+
23812383
hmac-drbg@^1.0.0:
23822384
version "1.0.1"
23832385
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2390,6 +2392,10 @@ [email protected]:
23902392
version "2.16.3"
23912393
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
23922394

2395+
hoist-non-react-statics@^1.2.0:
2396+
version "1.2.0"
2397+
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
2398+
23932399
home-or-tmp@^2.0.0:
23942400
version "2.0.0"
23952401
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -2477,7 +2483,7 @@ inherits@1:
24772483
version "1.0.2"
24782484
resolved "https://registry.yarnpkg.com/inherits/-/inherits-1.0.2.tgz#ca4309dadee6b54cc0b8d247e8d7c7a0975bdc9b"
24792485

2480-
inherits@2, [email protected], inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1:
2486+
inherits@2, [email protected], inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
24812487
version "2.0.3"
24822488
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
24832489

@@ -2530,7 +2536,7 @@ interpret@^1.0.0:
25302536
version "1.0.3"
25312537
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
25322538

2533-
invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.1:
2539+
invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
25342540
version "2.2.2"
25352541
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
25362542
dependencies:
@@ -3068,7 +3074,7 @@ lodash@~1.0.1:
30683074
version "1.0.2"
30693075
resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
30703076

3071-
loose-envify@^1.0.0, loose-envify@^1.1.0:
3077+
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
30723078
version "1.3.1"
30733079
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
30743080
dependencies:
@@ -3573,6 +3579,12 @@ path-root@^0.1.1:
35733579
dependencies:
35743580
path-root-regex "^0.1.0"
35753581

3582+
path-to-regexp@^1.5.3:
3583+
version "1.7.0"
3584+
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
3585+
dependencies:
3586+
isarray "0.0.1"
3587+
35763588
path-type@^1.0.0:
35773589
version "1.1.0"
35783590
resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -3650,7 +3662,7 @@ promise@^7.1.1:
36503662
dependencies:
36513663
asap "~2.0.3"
36523664

3653-
prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
3665+
prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
36543666
version "15.5.8"
36553667
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
36563668
dependencies:
@@ -3762,6 +3774,27 @@ react-prop-types@^0.4.0:
37623774
dependencies:
37633775
warning "^3.0.0"
37643776

3777+
react-router-dom@^4.1.1:
3778+
version "4.1.1"
3779+
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
3780+
dependencies:
3781+
history "^4.5.1"
3782+
loose-envify "^1.3.1"
3783+
prop-types "^15.5.4"
3784+
react-router "^4.1.1"
3785+
3786+
react-router@^4.1.1:
3787+
version "4.1.1"
3788+
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
3789+
dependencies:
3790+
history "^4.6.0"
3791+
hoist-non-react-statics "^1.2.0"
3792+
invariant "^2.2.2"
3793+
loose-envify "^1.3.1"
3794+
path-to-regexp "^1.5.3"
3795+
prop-types "^15.5.4"
3796+
warning "^3.0.0"
3797+
37653798
react-transition-group@^1.1.1:
37663799
version "1.1.2"
37673800
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.1.2.tgz#374cd778070f74b0a658045fc532edfd471ad836"
@@ -3810,7 +3843,7 @@ read-pkg@^1.0.0:
38103843
isarray "0.0.1"
38113844
string_decoder "~0.10.x"
38123845

3813-
readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.6:
3846+
readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.6:
38143847
version "2.2.9"
38153848
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.9.tgz#cf78ec6f4a6d1eb43d26488cac97f042e74b7fc8"
38163849
dependencies:
@@ -4008,6 +4041,10 @@ resolve-from@^1.0.0:
40084041
version "1.0.1"
40094042
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
40104043

4044+
resolve-pathname@^2.0.0:
4045+
version "2.1.0"
4046+
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944"
4047+
40114048
[email protected]:
40124049
version "1.1.7"
40134050
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
@@ -4527,7 +4564,7 @@ type-check@~0.3.2:
45274564
dependencies:
45284565
prelude-ls "~1.1.2"
45294566

4530-
typedarray@^0.0.6, typedarray@~0.0.5:
4567+
typedarray@~0.0.5:
45314568
version "0.0.6"
45324569
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
45334570

@@ -4617,6 +4654,10 @@ validate-npm-package-license@^3.0.1:
46174654
spdx-correct "~1.0.0"
46184655
spdx-expression-parse "~1.0.0"
46194656

4657+
value-equal@^0.2.0:
4658+
version "0.2.1"
4659+
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d"
4660+
46204661
[email protected]:
46214662
version "1.3.6"
46224663
resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"

0 commit comments

Comments
 (0)