Skip to content

Commit 8b42fff

Browse files
authored
Merge pull request marnusw#21 from le0nik/add_custom_height_classname
Add ability to provide custom height className (Fixes marnusw#20)
2 parents 07d986f + 9d9322b commit 8b42fff

File tree

2 files changed

+20
-5
lines changed

2 files changed

+20
-5
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ and the new component animated in. During this process:
4242
- The leaving component continues to be rendered as usual with `static` positioning.
4343
- The entering component is positioned on top of the leaving component with `absolute` positioning.
4444
- The height of the container is set to that of the leaving component, and then immediately to that of the
45-
entering component, and the `{animation-name}-height` class is applied to it.
45+
entering component, and the `{animation-name}-height` class is applied to it, if type of `transitionName` is
46+
`String`. If type of `transitionName` is `Object`, `transitionName.height` class will be used without modifications.
4647

4748
This provides many possibilities for animating the replacement as illustrated in the examples below.
4849

src/ReactCSSTransitionReplace.jsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,16 @@ export default class ReactCSSTransitionReplace extends React.Component {
4545
transitionName: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.shape({
4646
enter: React.PropTypes.string,
4747
leave: React.PropTypes.string,
48-
active: React.PropTypes.string
48+
active: React.PropTypes.string,
49+
height: React.PropTypes.string
4950
}), React.PropTypes.shape({
5051
enter: React.PropTypes.string,
5152
enterActive: React.PropTypes.string,
5253
leave: React.PropTypes.string,
5354
leaveActive: React.PropTypes.string,
5455
appear: React.PropTypes.string,
55-
appearActive: React.PropTypes.string
56+
appearActive: React.PropTypes.string,
57+
height: React.PropTypes.string
5658
})]).isRequired,
5759

5860
transitionAppear: React.PropTypes.bool,
@@ -201,11 +203,18 @@ export default class ReactCSSTransitionReplace extends React.Component {
201203
}
202204

203205
_wrapChild(child, moreProps) {
206+
let transitionName = this.props.transitionName;
207+
208+
if (typeof transitionName === 'object' && transitionName !== null) {
209+
transitionName = { ...transitionName };
210+
delete transitionName.height;
211+
}
212+
204213
// We need to provide this childFactory so that
205214
// ReactCSSTransitionReplaceChild can receive updates to name,
206215
// enter, and leave while it is leaving.
207216
return reactCSSTransitionGroupChild({
208-
name: this.props.transitionName,
217+
name: transitionName,
209218
appear: this.props.transitionAppear,
210219
enter: this.props.transitionEnter,
211220
leave: this.props.transitionLeave,
@@ -231,8 +240,13 @@ export default class ReactCSSTransitionReplace extends React.Component {
231240
}));
232241
}
233242

243+
234244
if (height !== null) {
235-
containerProps.className = `${containerProps.className || ''} ${transitionName}-height`;
245+
const heightClassName = (typeof transitionName === 'object' && transitionName !== null) ?
246+
transitionName.height || '' :
247+
`${transitionName}-height`;
248+
249+
containerProps.className = `${containerProps.className || ''} ${heightClassName}`;
236250
containerProps.style = {
237251
...containerProps.style,
238252
position: 'relative',

0 commit comments

Comments
 (0)