dillon1000/react

Commit

Rewrite ReactTransitionGroup

The key idea here is that you're always rendering `this.state.children`, not
`this.props.children`. When combined with `cloneWithProps()` this means we can
keep them in the DOM as long as we want. We add new children and reactively
update existing ones using `setState()` inside of `componentWillReceiveProps()`
so `this.state.children` always has the latest versions of components. Since we
may be keeping old components around that are no longer in
`this.props.children` we need a way to figure out where they should be inside
of the combined `this.state.children` list.  `ReactTransitionChildMapping` does
this for us.

Based on that infrastructure we can build the interface we always wanted: enter
and leave lifecycle hooks.

When a component is added to the DOM, `componentWillEnter(callback)` gets
called. Call the callback when you're done animating and `componentDidEnter()`
will be called.

When a component is about to be removed from the DOM,
`componentWillLeave(callback)` gets called. Call the callback when you're done
animating and `componentDidLeave()` will be called and the component will
*actually* be removed from the DOM. It won't be removed until you call the
callback.

These also handle "concurrent" changes. If you "stack" enter/leaves of a single
component before the animation has completed, it will block out all of those
animations until the current animation completes, and then finally it will
animate 0 or 1 times to get itself into the desired current state. This is what
differentiates `componentWillEnter()` from `componentDidMount()`.

The next step would be to build `componentDidReorder()`.

I've built `ReactCSSTransitionGroup` which is identical to the old
`ReactTransitionGroup` and codemodded the callsites.
Browse files
Changed paths8 files
First-parent comparison
A src/addons/transitions/ReactCSSTransitionGroup.js AddedR src/addons/transitions/ReactTransitionableChild.js →src/addons/transitions/ReactCSSTransitionGroupChild.js RenamedR src/addons/transitions/ReactTransitionKeySet.js →src/addons/transitions/ReactTransitionChildMapping.js RenamedM src/addons/transitions/ReactTransitionGroup.js ModifiedA src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js AddedR src/addons/transitions/__tests__/ReactTransitionKeySet-test.js →src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js RenamedM src/addons/transitions/__tests__/ReactTransitionGroup-test.js ModifiedD src/addons/transitions/__tests__/ReactTransitionableChild-test.js Deleted
Patch

Files changed

Rendering syntax-highlighted changes…