forked from oblador/react-native-progress
-
Notifications
You must be signed in to change notification settings - Fork 0
/
withAnimation.js
112 lines (101 loc) · 3.06 KB
/
withAnimation.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
Animated,
Easing,
} from 'react-native';
export default function withAnimation(WrappedComponent, indeterminateProgress) {
const wrappedComponentName = WrappedComponent.displayName
|| WrappedComponent.name
|| 'Component';
return class AnimatedComponent extends Component {
static displayName = `withAnimation(${wrappedComponentName})`;
static propTypes = {
animated: PropTypes.bool,
direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']),
indeterminate: PropTypes.bool,
progress: PropTypes.number.isRequired,
};
static defaultProps = {
animated: true,
indeterminate: false,
progress: 0,
};
constructor(props) {
super(props);
this.progressValue = Math.min(Math.max(props.progress, 0), 1);
this.rotationValue = 0;
this.state = {
progress: new Animated.Value(this.progressValue),
rotation: new Animated.Value(this.rotationValue),
};
}
componentDidMount() {
this.state.progress.addListener((event) => { this.progressValue = event.value; });
this.state.rotation.addListener((event) => { this.rotationValue = event.value; });
if (this.props.indeterminate) {
this.spin();
if (indeterminateProgress) {
Animated.spring(this.state.progress, {
toValue: indeterminateProgress,
}).start();
}
}
}
componentWillUnmount() {
this.state.progress.removeAllListeners();
this.state.rotation.removeAllListeners();
}
componentWillReceiveProps(props) {
if (props.indeterminate !== this.props.indeterminate) {
if (props.indeterminate) {
this.spin();
} else {
Animated.spring(this.state.rotation, {
toValue: (this.rotationValue > 0.5 ? 1 : 0),
}).start((endState) => {
if (endState.finished) {
this.state.rotation.setValue(0);
}
});
}
}
const progress = (props.indeterminate
? indeterminateProgress || 0
: Math.min(Math.max(props.progress, 0), 1)
);
if (progress !== this.progressValue) {
if (props.animated) {
Animated.spring(this.state.progress, {
toValue: progress,
bounciness: 0,
}).start();
} else {
this.state.progress.setValue(progress);
}
}
}
spin() {
this.state.rotation.setValue(0);
Animated.timing(this.state.rotation, {
toValue: this.props.direction === 'counter-clockwise' ? -1 : 1,
duration: 1000,
easing: Easing.linear,
isInteraction: false,
}).start((endState) => {
if (endState.finished) {
this.spin();
}
});
}
render() {
return (
<WrappedComponent
{...this.props}
progress={this.props.animated ? this.state.progress : this.props.progress}
rotation={this.state.rotation}
/>
);
}
};
}