61 lines
1.0 KiB
JavaScript
61 lines
1.0 KiB
JavaScript
'use strict';
|
|
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import TransitionGroup from 'react-transition-group/TransitionGroup';
|
|
|
|
const DEFAULT_DURATION = 1000;
|
|
|
|
export default class TransitionAppear extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
}
|
|
|
|
render()
|
|
{
|
|
let props = this.props;
|
|
let duration = props.hasOwnProperty('duration') ? props.duration : DEFAULT_DURATION;
|
|
|
|
return (
|
|
<TransitionGroup
|
|
component={FakeTransitionWrapper}
|
|
transitionName='transition'
|
|
transitionAppear={!!duration}
|
|
transitionAppearTimeout={duration}
|
|
transitionEnter={false}
|
|
transitionLeave={false}
|
|
>
|
|
{this.props.children}
|
|
</TransitionGroup>
|
|
);
|
|
}
|
|
}
|
|
|
|
TransitionAppear.propTypes =
|
|
{
|
|
children : PropTypes.any,
|
|
duration : PropTypes.number
|
|
};
|
|
|
|
class FakeTransitionWrapper extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
}
|
|
|
|
render()
|
|
{
|
|
let children = React.Children.toArray(this.props.children);
|
|
|
|
return children[0] || null;
|
|
}
|
|
}
|
|
|
|
FakeTransitionWrapper.propTypes =
|
|
{
|
|
children : PropTypes.any
|
|
};
|