Skip to content

Commit 14ddbd5

Browse files
author
alvaromb
committed
v3.0.2
1 parent dffd4d3 commit 14ddbd5

File tree

5 files changed

+68
-55
lines changed

5 files changed

+68
-55
lines changed

‎Button.js‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
'use strict';
22

3-
const React = require('react');
4-
const {
5-
PropTypes
6-
} = React;
7-
8-
const {
3+
import React, { PropTypes } from 'react';
4+
import {
95
View,
106
TouchableOpacity,
117
Text,
128
StyleSheet,
139
ActivityIndicator,
1410
TouchableNativeFeedback,
1511
Platform
16-
} = require('react-native');
17-
18-
const isEqual = require('lodash.isequal');
12+
} from 'react-native';
13+
import isEqual from 'lodash.isequal';
1914

2015
const Button = React.createClass({
2116
propTypes: {
@@ -26,8 +21,8 @@ const Button = React.createClass({
2621
PropTypes.node,
2722
PropTypes.element
2823
]),
29-
activeOpacity: PropTypes.number,
3024
accessibilityLabel: PropTypes.string,
25+
activeOpacity: PropTypes.number,
3126
allowFontScaling: PropTypes.bool,
3227
isLoading: PropTypes.bool,
3328
isDisabled: PropTypes.bool,
@@ -94,38 +89,37 @@ const Button = React.createClass({
9489
{this._renderInnerText()}
9590
</View>
9691
);
97-
} else {
98-
// Extract Touchable props
99-
let touchableProps = {
100-
accessibilityLabel: this.props.accessibilityLabel,
101-
onPress: this.props.onPress,
102-
onPressIn: this.props.onPressIn,
103-
onPressOut: this.props.onPressOut,
104-
onLongPress: this.props.onLongPress,
105-
activeOpacity: this.props.activeOpacity,
106-
delayLongPress: this.props.delayLongPress,
107-
delayPressIn: this.props.delayPressIn,
108-
delayPressOut: this.props.delayPressOut,
109-
};
110-
if (Button.isAndroid) {
111-
touchableProps = Object.assign(touchableProps, {
112-
background: this.props.background || TouchableNativeFeedback.SelectableBackground()
113-
});
114-
return (
115-
<TouchableNativeFeedback {...touchableProps}>
116-
<Text style={[styles.button, this.props.style]}>
117-
{this._renderInnerText()}
118-
</Text>
119-
</TouchableNativeFeedback>
120-
)
121-
} else {
122-
return (
123-
<TouchableOpacity {...touchableProps}
124-
style={[styles.button, this.props.style]}>
92+
}
93+
// Extract Touchable props
94+
let touchableProps = {
95+
accessibilityLabel: this.props.accessibilityLabel,
96+
onPress: this.props.onPress,
97+
onPressIn: this.props.onPressIn,
98+
onPressOut: this.props.onPressOut,
99+
onLongPress: this.props.onLongPress,
100+
activeOpacity: this.props.activeOpacity,
101+
delayLongPress: this.props.delayLongPress,
102+
delayPressIn: this.props.delayPressIn,
103+
delayPressOut: this.props.delayPressOut,
104+
};
105+
if (Button.isAndroid) {
106+
touchableProps = Object.assign(touchableProps, {
107+
background: this.props.background || TouchableNativeFeedback.SelectableBackground()
108+
});
109+
return (
110+
<TouchableNativeFeedback {...touchableProps}>
111+
<View style={[styles.button, this.props.style]}>
125112
{this._renderInnerText()}
126-
</TouchableOpacity>
127-
);
128-
}
113+
</View>
114+
</TouchableNativeFeedback>
115+
)
116+
} else {
117+
return (
118+
<TouchableOpacity {...touchableProps}
119+
style={[styles.button, this.props.style]}>
120+
{this._renderInnerText()}
121+
</TouchableOpacity>
122+
);
129123
}
130124
}
131125
});
@@ -134,15 +128,18 @@ const styles = StyleSheet.create({
134128
button: {
135129
height: 44,
136130
flexDirection: 'row',
131+
alignItems: 'center',
137132
borderWidth: 1,
138133
borderRadius: 8,
139134
marginBottom: 10,
140135
alignSelf: 'stretch',
141136
justifyContent: 'center',
142137
},
143138
textButton: {
139+
flex: 1,
144140
fontSize: 18,
145-
alignSelf: 'center',
141+
textAlign: 'center',
142+
backgroundColor: 'transparent',
146143
},
147144
spinner: {
148145
alignSelf: 'center',

‎Example/button/Example.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,8 @@ class Example extends React.Component {
8686
}}>
8787
Hello
8888
</Button>
89-
<Button disabledStyle={styles.buttonStyle8}
89+
<Button
90+
disabledStyle={styles.buttonStyle8}
9091
isDisabled={true}
9192
textStyle={styles.textStyle8}>
9293
Disabled
@@ -166,6 +167,7 @@ const styles = StyleSheet.create({
166167
borderRadius: 22,
167168
},
168169
textStyle8: {
170+
width: 200,
169171
fontFamily: 'Avenir Next',
170172
fontWeight: '500',
171173
color: '#333',

‎Example/button/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"start": "node_modules/react-native/packager/packager.sh"
77
},
88
"dependencies": {
9-
"apsl-react-native-button": "3.0.0",
10-
"react": "^15.2.1",
11-
"react-native": "0.29.1"
9+
"apsl-react-native-button": "3.0.1",
10+
"react": "^15.3.1",
11+
"react-native": "0.37.0"
1212
}
1313
}

‎__tests__/__snapshots__/Button.test.js.snap‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ exports[`Button Renders 1`] = `
1414
onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
1515
style={
1616
Object {
17+
"alignItems": "center",
1718
"alignSelf": "stretch",
1819
"borderRadius": 8,
1920
"borderWidth": 1,
@@ -32,8 +33,10 @@ exports[`Button Renders 1`] = `
3233
style={
3334
Array [
3435
Object {
35-
"alignSelf": "center",
36-
"fontSize": 18
36+
"backgroundColor": "transparent",
37+
"flex": 1,
38+
"fontSize": 18,
39+
"textAlign": "center"
3740
},
3841
undefined
3942
]
@@ -48,6 +51,7 @@ exports[`Button Renders disabled 1`] = `
4851
style={
4952
Array [
5053
Object {
54+
"alignItems": "center",
5155
"alignSelf": "stretch",
5256
"borderRadius": 8,
5357
"borderWidth": 1,
@@ -69,8 +73,10 @@ exports[`Button Renders disabled 1`] = `
6973
style={
7074
Array [
7175
Object {
72-
"alignSelf": "center",
73-
"fontSize": 18
76+
"backgroundColor": "transparent",
77+
"flex": 1,
78+
"fontSize": 18,
79+
"textAlign": "center"
7480
},
7581
undefined
7682
]
@@ -85,6 +91,7 @@ exports[`Button Renders loading 1`] = `
8591
style={
8692
Array [
8793
Object {
94+
"alignItems": "center",
8895
"alignSelf": "stretch",
8996
"borderRadius": 8,
9097
"borderWidth": 1,
@@ -128,6 +135,7 @@ exports[`Button Renders with a inner View 1`] = `
128135
onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
129136
style={
130137
Object {
138+
"alignItems": "center",
131139
"alignSelf": "stretch",
132140
"borderRadius": 8,
133141
"borderWidth": 1,
@@ -159,6 +167,7 @@ exports[`Button Should contain children 1`] = `
159167
onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
160168
style={
161169
Object {
170+
"alignItems": "center",
162171
"alignSelf": "stretch",
163172
"borderRadius": 8,
164173
"borderWidth": 1,
@@ -177,8 +186,10 @@ exports[`Button Should contain children 1`] = `
177186
style={
178187
Array [
179188
Object {
180-
"alignSelf": "center",
181-
"fontSize": 18
189+
"backgroundColor": "transparent",
190+
"flex": 1,
191+
"fontSize": 18,
192+
"textAlign": "center"
182193
},
183194
undefined
184195
]
@@ -204,6 +215,7 @@ exports[`Button Should react to the onPress event 1`] = `
204215
onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
205216
style={
206217
Object {
218+
"alignItems": "center",
207219
"alignSelf": "stretch",
208220
"borderRadius": 8,
209221
"borderWidth": 1,
@@ -222,8 +234,10 @@ exports[`Button Should react to the onPress event 1`] = `
222234
style={
223235
Array [
224236
Object {
225-
"alignSelf": "center",
226-
"fontSize": 18
237+
"backgroundColor": "transparent",
238+
"flex": 1,
239+
"fontSize": 18,
240+
"textAlign": "center"
227241
},
228242
undefined
229243
]

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "apsl-react-native-button",
3-
"version": "3.0.1",
3+
"version": "3.0.2",
44
"description": "React Native button component with rounded corners.",
55
"main": "Button.js",
66
"scripts": {

0 commit comments

Comments
 (0)