Skip to content

Commit 13b4e14

Browse files
jkomynojkomyno
committed
Initial clean up. The code is a little more readable now
1 parent bffeccc commit 13b4e14

File tree

1 file changed

+93
-81
lines changed

1 file changed

+93
-81
lines changed

‎index.js

+93-81
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use strict';
22

3-
import React, { Component } from 'react';
3+
import React, { Component, PropTypes } from 'react';
44
import {
55
StyleSheet,
66
Platform,
@@ -22,43 +22,110 @@ const duration_values = {
2222
exit: 195
2323
}
2424

25-
class FAB extends Component {
25+
export default class FAB extends Component {
2626

27-
constructor(props) {
28-
super(props);
29-
this.state = {
30-
translateValue: new Animated.Value(0)
31-
};
27+
static propTypes = {
28+
buttonColor: PropTypes.string,
29+
iconTextColor: PropTypes.string,
30+
onClickAction: PropTypes.func,
31+
iconTextComponent: PropTypes.element,
32+
visible: PropTypes.bool
33+
}
34+
35+
static defaultProps = {
36+
buttonColor: 'red',
37+
iconTextColor: '#FFFFFF',
38+
onClickAction: ()=>{},
39+
iconTextComponent: <Text>+</Text>,
40+
visible: true
41+
};
42+
43+
state = {
44+
translateValue: new Animated.Value(0)
45+
};
46+
47+
componentDidMount() {
48+
const { translateValue } = this.state;
49+
const { visible } = this.props;
50+
51+
if(visible) {
52+
translateValue.setValue(1);
53+
}
54+
else {
55+
translateValue.setValue(0);
56+
}
57+
}
58+
59+
componentWillReceiveProps(nextProps) {
60+
const { translateValue } = this.state;
61+
const { visible } = this.props;
62+
63+
if((nextProps.visible)&&(!visible)) {
64+
Animated.timing(
65+
translateValue,
66+
{
67+
duration: duration_values.entry,
68+
toValue: 1,
69+
easing: sharp_easing_values.entry
70+
}
71+
).start();
72+
}
73+
else if((!nextProps.visible)&&(visible)) {
74+
Animated.timing(
75+
translateValue,
76+
{
77+
duration: duration_values.exit,
78+
toValue: 0,
79+
easing: sharp_easing_values.exit
80+
}
81+
).start();
82+
}
3283
}
3384

3485
render() {
86+
const {
87+
translateValue,
88+
} = this.state;
89+
const {
90+
onClickAction,
91+
buttonColor,
92+
iconTextComponent,
93+
iconTextColor,
94+
} = this.props;
95+
96+
const dimensionInterpolate = translateValue.interpolate({
97+
inputRange: [0, 1],
98+
outputRange: [0, 56],
99+
});
100+
101+
const rotateInterpolate = translateValue.interpolate({
102+
inputRange: [0, 1],
103+
outputRange: ['-90deg', '0deg'],
104+
});
105+
35106
if(Platform.OS==='ios') {
36107
return (
37108
<View style={styles.fab_box}>
38109
<Animated.View
39110
style={[
40111
styles.addButton,
41112
{
42-
height: this.state.translateValue.interpolate({inputRange: [0, 1], outputRange: [0, 56]}),
43-
width: this.state.translateValue.interpolate({inputRange: [0, 1], outputRange: [0, 56]})
113+
height: dimensionInterpolate,
114+
width: dimensionInterpolate
44115
}
45116
]}
46117
>
47-
<TouchableOpacity onPress={()=>{this.props.onClickAction()}} style={[styles.addButtonInnerView, {backgroundColor: this.props.buttonColor}]}>
118+
<TouchableOpacity onPress={()=>{onClickAction()}} style={[styles.addButtonInnerView, {backgroundColor: buttonColor}]}>
48119
<Animated.Text style={{
49120
transform: [
50-
{scaleX: this.state.translateValue},
51-
{scaleY: this.state.translateValue},
52-
{rotate: this.state.translateValue.interpolate({
53-
inputRange: [0, 1],
54-
outputRange: ['-90deg', '0deg']
55-
})}
121+
{scale: translateValue},
122+
{rotate: rotateInterpolate}
56123
],
57124
fontSize: 24
58125
}}>
59-
{React.cloneElement(this.props.iconTextComponent, {style: {
126+
{React.cloneElement(iconTextComponent, {style: {
60127
fontSize: 24,
61-
color: this.props.iconTextColor
128+
color: iconTextColor
62129
}})}
63130
</Animated.Text>
64131
</TouchableOpacity>
@@ -73,27 +140,23 @@ class FAB extends Component {
73140
style={[
74141
styles.addButton,
75142
{
76-
height: this.state.translateValue.interpolate({inputRange: [0, 1], outputRange: [0, 56]}),
77-
width: this.state.translateValue.interpolate({inputRange: [0, 1], outputRange: [0, 56]})
143+
height: dimensionInterpolate,
144+
width: dimensionInterpolate
78145
}
79146
]}
80147
>
81-
<TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackgroundBorderless()} onPress={()=>{this.props.onClickAction()}}>
82-
<View style={[styles.addButtonInnerView, {backgroundColor: this.props.buttonColor}]}>
148+
<TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackgroundBorderless()} onPress={()=>{onClickAction()}}>
149+
<View style={[styles.addButtonInnerView, {backgroundColor: buttonColor}]}>
83150
<Animated.Text style={{
84151
transform: [
85-
{scaleX: this.state.translateValue},
86-
{scaleY: this.state.translateValue},
87-
{rotate: this.state.translateValue.interpolate({
88-
inputRange: [0, 1],
89-
outputRange: ['-90deg', '0deg']
90-
})}
152+
{scaleX: translateValue},
153+
{rotate: rotateInterpolate}
91154
],
92155
fontSize: 24
93156
}}>
94-
{React.cloneElement(this.props.iconTextComponent, {style: {
157+
{React.cloneElement(iconTextComponent, {style: {
95158
fontSize: 24,
96-
color: this.props.iconTextColor
159+
color: iconTextColor
97160
}})}
98161
</Animated.Text>
99162
</View>
@@ -103,49 +166,8 @@ class FAB extends Component {
103166
);
104167
}
105168
}
106-
107-
componentDidMount() {
108-
if(this.props.visible) {
109-
this.state.translateValue.setValue(1);
110-
}
111-
else {
112-
this.state.translateValue.setValue(0);
113-
}
114-
}
115-
116-
componentWillReceiveProps(nextProps) {
117-
if((nextProps.visible)&&(!this.props.visible)) {
118-
Animated.timing(
119-
this.state.translateValue,
120-
{
121-
duration: duration_values.entry,
122-
toValue: 1,
123-
easing: sharp_easing_values.entry
124-
}
125-
).start();
126-
}
127-
else if((!nextProps.visible)&&(this.props.visible)) {
128-
Animated.timing(
129-
this.state.translateValue,
130-
{
131-
duration: duration_values.exit,
132-
toValue: 0,
133-
easing: sharp_easing_values.exit
134-
}
135-
).start();
136-
}
137-
}
138-
139169
}
140170

141-
FAB.defaultProps = {
142-
buttonColor: 'red',
143-
iconTextColor: '#FFFFFF',
144-
onClickAction: ()=>{},
145-
iconTextComponent: <Text>+</Text>,
146-
visible: true
147-
};
148-
149171
const styles = StyleSheet.create({
150172
addButton: {
151173
borderRadius: 50,
@@ -176,13 +198,3 @@ const styles = StyleSheet.create({
176198
justifyContent: 'center'
177199
}
178200
});
179-
180-
export default FAB;
181-
182-
FAB.propTypes = {
183-
buttonColor: React.PropTypes.string,
184-
iconTextColor: React.PropTypes.string,
185-
onClickAction: React.PropTypes.func,
186-
iconTextComponent: React.PropTypes.element,
187-
visible: React.PropTypes.bool
188-
}

0 commit comments

Comments
 (0)