52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
import React, { Component, PropTypes } from 'react';
|
||
|
|
||
|
const ActivableRendererFactory = (options = {delay: 500}) => (ActivableComponent) => {
|
||
|
return class ActivableRenderer extends Component {
|
||
|
static propTypes = {
|
||
|
active: PropTypes.bool.isRequired,
|
||
|
children: PropTypes.any,
|
||
|
delay: PropTypes.number
|
||
|
};
|
||
|
|
||
|
static defaultProps = {
|
||
|
delay: options.delay
|
||
|
}
|
||
|
|
||
|
state = {
|
||
|
active: this.props.active,
|
||
|
rendered: this.props.active
|
||
|
};
|
||
|
|
||
|
componentWillReceiveProps (nextProps) {
|
||
|
if (nextProps.active && !this.props.active) this.renderAndActivate();
|
||
|
if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
|
||
|
}
|
||
|
|
||
|
renderAndActivate () {
|
||
|
if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
|
||
|
this.setState({ rendered: true, active: false }, () => {
|
||
|
setTimeout(() => this.setState({ active: true }), 20);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
deactivateAndUnrender () {
|
||
|
this.setState({ rendered: true, active: false }, () => {
|
||
|
this.unrenderTimeout = setTimeout(() => {
|
||
|
this.setState({ rendered: false });
|
||
|
this.unrenderTimeout = null;
|
||
|
}, this.props.delay);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
render () {
|
||
|
const { delay, ...others } = this.props; // eslint-disable-line no-unused-vars
|
||
|
const { active, rendered } = this.state;
|
||
|
return rendered
|
||
|
? <ActivableComponent {...others} active={active} />
|
||
|
: null;
|
||
|
}
|
||
|
};
|
||
|
};
|
||
|
|
||
|
export default ActivableRendererFactory;
|