-
Notifications
You must be signed in to change notification settings - Fork 38
/
AnimateGroupChild.js
92 lines (75 loc) · 2.03 KB
/
AnimateGroupChild.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { Component, Children } from 'react';
import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';
import _ from 'lodash';
import Animate from './Animate';
const parseDurationOfSingleTransition = (options = {}) => {
const { steps, duration } = options;
if (steps && steps.length) {
return steps.reduce((result, entry) => (
result + (_.isNumber(entry.duration) && entry.duration > 0 ? entry.duration : 0)
), 0);
}
if (_.isNumber(duration)) {
return duration;
}
return 0;
};
class AnimateGroupChild extends Component {
static propTypes = {
appearOptions: PropTypes.object,
enterOptions: PropTypes.object,
leaveOptions: PropTypes.object,
children: PropTypes.element,
};
state = {
isActive: false,
};
handleStyleActive(style) {
if (style) {
const onAnimationEnd = style.onAnimationEnd ?
() => {
style.onAnimationEnd();
} :
null;
this.setState({
...style,
onAnimationEnd,
isActive: true,
});
}
}
handleEnter = (node, isAppearing) => {
const { appearOptions, enterOptions } = this.props;
this.handleStyleActive(isAppearing ? appearOptions : enterOptions);
}
handleExit = () => {
this.handleStyleActive(this.props.leaveOptions);
}
parseTimeout() {
const { appearOptions, enterOptions, leaveOptions } = this.props;
return parseDurationOfSingleTransition(appearOptions) +
parseDurationOfSingleTransition(enterOptions) +
parseDurationOfSingleTransition(leaveOptions);
}
render() {
const {
children, appearOptions, enterOptions, leaveOptions, ...props
} = this.props;
return (
<Transition
{...props}
onEnter={this.handleEnter}
onExit={this.handleExit}
timeout={this.parseTimeout()}
>
{() => (
<Animate {...this.state}>
{Children.only(children)}
</Animate>
)}
</Transition>
);
}
}
export default AnimateGroupChild;