/
AwesomeButton.js
84 lines (74 loc) · 2.02 KB
/
AwesomeButton.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
import React, { Component, PropTypes } from 'react';
import { Animated, View } from 'react-native';
import ButtonView from './ButtonView';
class AwesomeButton extends Component {
static propTypes = {
states: PropTypes.object.isRequired,
buttonState: PropTypes.string,
transitionDuration: PropTypes.number
}
constructor(props) {
super(props);
this.state = {
viewState: this.props.states[this.props.buttonState] ||
this.props.states[Object.keys(this.props.states)[0]],
backgroundColor: new Animated.Value(0.0)
};
}
componentWillReceiveProps(newProps) {
if (newProps.buttonState) {
this.setState({
viewState: newProps.states[newProps.buttonState],
prevBackgroundColor: this.state.viewState.backgroundStyle.backgroundColor
});
}
}
componentDidUpdate() {
this.state.backgroundColor.setValue(0);
this.startAnimation();
}
startAnimation() {
Animated.timing(this.state.backgroundColor,
{
toValue: 1.0,
duration: this.props.transitionDuration
}
).start();
}
render() {
const {
backgroundStyle,
labelStyle,
text,
spinner,
onPress,
icon,
iconAlignment
} = this.state.viewState;
const backgroundColor = this.state.backgroundColor.interpolate({
inputRange: [0, 1],
outputRange: this.state.prevBackgroundColor ?
[this.state.prevBackgroundColor, backgroundStyle.backgroundColor]
: [backgroundStyle.backgroundColor, backgroundStyle.backgroundColor]
});
return (
<View>
<ButtonView
backgroundStyle={[backgroundStyle, { backgroundColor }]}
labelStyle={labelStyle}
text={text}
spinner={spinner}
onPress={onPress}
disabled={onPress ? false : true}
icon={icon}
iconAlignment={iconAlignment}
/>
</View>
);
}
}
AwesomeButton.defaultProps = {
buttonState: 'default',
transitionDuration: 200
};
export default AwesomeButton;