/
ActivableRenderer.js
56 lines (47 loc) · 1.62 KB
/
ActivableRenderer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const ActivableRendererFactory = (options = { delay: 500 }) =>
ActivableComponent => class ActivableRenderer extends Component {
static propTypes = {
active: PropTypes.bool.isRequired,
children: PropTypes.node,
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();
}
componentWillUnmount() {
clearTimeout(this.activateTimeout);
clearTimeout(this.unrenderTimeout);
}
renderAndActivate() {
if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
this.setState({ rendered: true, active: false }, () => {
this.activateTimeout = 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;