dillon1000/react
Commit
Browse files 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.
Changed paths8 files
First-parent comparisonsrc/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 DeletedPatch
Files changed
Rendering syntax-highlighted changes…