@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
4
4
import { polyfill } from 'react-lifecycles-compat'
5
5
6
6
import { timeoutsShape } from './utils/PropTypes'
7
+ import TransitionGroupContext from './TransitionGroupContext'
7
8
8
9
export const UNMOUNTED = 'unmounted'
9
10
export const EXITED = 'exited'
@@ -101,17 +102,12 @@ export const EXITING = 'exiting'
101
102
* `'exiting'` to `'exited'`.
102
103
*/
103
104
class Transition extends React . Component {
104
- static contextTypes = {
105
- transitionGroup : PropTypes . object ,
106
- }
107
- static childContextTypes = {
108
- transitionGroup : ( ) => { } ,
109
- }
105
+ static contextType = TransitionGroupContext
110
106
111
107
constructor ( props , context ) {
112
108
super ( props , context )
113
109
114
- let parentGroup = context . transitionGroup
110
+ let parentGroup = context
115
111
// In the context of a TransitionGroup all enters are really appears
116
112
let appear =
117
113
parentGroup && ! parentGroup . isMounting ? props . enter : props . appear
@@ -140,10 +136,6 @@ class Transition extends React.Component {
140
136
this . nextCallback = null
141
137
}
142
138
143
- getChildContext ( ) {
144
- return { transitionGroup : null } // allows for nested Transitions
145
- }
146
-
147
139
static getDerivedStateFromProps ( { in : nextIn } , prevState ) {
148
140
if ( nextIn && prevState . status === UNMOUNTED ) {
149
141
return { status : EXITED }
@@ -230,8 +222,8 @@ class Transition extends React.Component {
230
222
231
223
performEnter ( node , mounting ) {
232
224
const { enter } = this . props
233
- const appearing = this . context . transitionGroup
234
- ? this . context . transitionGroup . isMounting
225
+ const appearing = this . context
226
+ ? this . context . isMounting
235
227
: mounting
236
228
237
229
const timeouts = this . getTimeouts ( )
@@ -371,11 +363,21 @@ class Transition extends React.Component {
371
363
delete childProps . onExited
372
364
373
365
if ( typeof children === 'function' ) {
374
- return children ( status , childProps )
366
+ // allows for nested Transitions
367
+ return (
368
+ < TransitionGroupContext . Provider value = { null } >
369
+ { children ( status , childProps ) }
370
+ </ TransitionGroupContext . Provider >
371
+ )
375
372
}
376
373
377
374
const child = React . Children . only ( children )
378
- return React . cloneElement ( child , childProps )
375
+ return (
376
+ // allows for nested Transitions
377
+ < TransitionGroupContext . Provider value = { null } >
378
+ { React . cloneElement ( child , childProps ) }
379
+ </ TransitionGroupContext . Provider >
380
+ )
379
381
}
380
382
}
381
383
0 commit comments