AnimateGroupChild.js
2.02 KB
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
import React, { Component, Children } from 'react';
import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';
import Animate from './Animate';
const parseDurationOfSingleTransition = (options = {}) => {
const { steps, duration } = options;
if (steps && steps.length) {
return steps.reduce(
(result, entry) => result + (Number.isFinite(entry.duration) && entry.duration > 0 ? entry.duration : 0),
0,
);
}
if (Number.isFinite(duration)) {
return duration;
}
return 0;
};
class AnimateGroupChild extends Component {
constructor() {
super();
this.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 = () => {
const { leaveOptions } = this.props;
this.handleStyleActive(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>
);
}
}
AnimateGroupChild.propTypes = {
appearOptions: PropTypes.object,
enterOptions: PropTypes.object,
leaveOptions: PropTypes.object,
children: PropTypes.element,
};
export default AnimateGroupChild;