Skip to content

Commit b97aafb

Browse files
Sankhadeep RoySankhadeep Roy
Sankhadeep Roy
authored and
Sankhadeep Roy
committed
Button
1 parent 84e5477 commit b97aafb

5 files changed

Lines changed: 41 additions & 21 deletions

File tree

‎Components/Themes/light.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,17 @@ module.exports = {
3232
get btnTextSize () {
3333
return multiply(fontSizeBase, 1.2);
3434
},
35+
get btnTextSizeLarge () {
36+
return multiply(fontSizeBase, 1.5);
37+
},
38+
get btnTextSizeSmall () {
39+
return multiply(fontSizeBase, .8);
40+
},
3541

3642
borderRadiusBase: borderRadiusBase,
3743

3844
get borderRadiusLarge () {
39-
return multiply(fontSizeBase, 5.8);
45+
return multiply(fontSizeBase, 3.8);
4046
},
4147

4248
footerHeight: 55,

‎Components/Widgets/Button.js‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,34 @@ export default class Button extends NativeBaseComponent {
1515
return {
1616
button: {
1717
padding: 10,
18-
flex: 1,
19-
borderColor: 'transparent',
20-
height: 45,
2118
justifyContent: 'space-around',
2219
flexDirection: 'row',
2320
marginBottom: 10,
21+
alignSelf: 'flex-start',
2422
backgroundColor: this.getTheme().btnPrimaryBg,
25-
},
26-
buttonText: {
27-
fontSize: this.getTheme().btnTextSize,
28-
color: this.getTheme().btnPrimaryColor
2923
}
3024
}
3125
}
3226
prepareRootProps() {
3327

34-
var type = { backgroundColor: (this.props.primary) ? this.getTheme().primary :
28+
var type = { backgroundColor: (this.props.primary) ? this.getTheme().btnPrimaryBg :
29+
((this.props.transparent) || (this.props.bordered)) ? 'rgba(0,0,0,0)' :
3530
(this.props.success) ? this.getTheme().btnSuccessBg :
3631
(this.props.danger) ? this.getTheme().btnDangerBg :
3732
(this.props.warning) ? this.getTheme().btnWarningBg :
3833
(this.props.info) ? this.getTheme().btnInfoBg :
3934
(this.props.backgroundColor) ? this.props.backgroundColor :
40-
(this.props.transparent) ? 'rgba(0,0,0,0)' :
4135
this.getInitialStyle().button.backgroundColor,
42-
borderRadius: (this.props.rounded) ? this.getTheme().borderRadiusLarge : this.getTheme().borderRadiusBase
36+
borderRadius: (this.props.rounded) ? this.getTheme().borderRadiusLarge : this.getTheme().borderRadiusBase,
37+
borderWidth: (this.props.bordered) ? 1 : 0,
38+
borderColor: (this.props.primary) ? this.getTheme().primary :
39+
(this.props.success) ? this.getTheme().btnSuccessBg :
40+
(this.props.danger) ? this.getTheme().btnDangerBg :
41+
(this.props.warning) ? this.getTheme().btnWarningBg :
42+
(this.props.info) ? this.getTheme().btnInfoBg :
43+
this.getInitialStyle().button.backgroundColor,
44+
height: (this.props.large) ? 60 : (this.props.small) ? 35 : 45,
45+
alignSelf: (this.props.block) ? 'stretch' : 'flex-start',
4346
}
4447

4548
var addedProps = _.merge(this.getInitialStyle().button,type);
@@ -54,20 +57,33 @@ export default class Button extends NativeBaseComponent {
5457

5558
getTextStyle() {
5659
var mergedStyle = {};
57-
return _.merge(mergedStyle, this.getInitialStyle().buttonText, this.props.textStyle);
60+
61+
var btnType = {
62+
color: ((this.props.bordered) && (this.props.primary)) ? this.getTheme().btnPrimaryBg :
63+
((this.props.bordered) && (this.props.success)) ? this.getTheme().btnSuccessBg :
64+
((this.props.bordered) && (this.props.danger)) ? this.getTheme().btnDangerBg :
65+
((this.props.bordered) && (this.props.warning)) ? this.getTheme().btnWarningBg :
66+
((this.props.bordered) && (this.props.info)) ? this.getTheme().btnInfoBg :
67+
this.getTheme().inverseTextColor,
68+
fontSize: (this.props.large) ? this.getTheme().btnTextSizeLarge : (this.props.small) ? this.getTheme().btnTextSizeSmall : this.getTheme().btnTextSize,
69+
lineHeight: (this.props.large) ? 32 : (this.props.small) ? 15 : 22
70+
}
71+
72+
var addedBtnProps = _.merge(this.getInitialStyle().buttonText,btnType);
73+
return _.merge(mergedStyle, addedBtnProps, this.props.textStyle);
5874
}
5975

6076
renderChildren() {
6177
if(typeof this.props.children == undefined || typeof this.props.children == "string") {
6278
return <TouchableOpacity {...this.prepareRootProps()} >
63-
<Text style={[this.getTextStyle(), this.getInitialStyle().buttonText]}>{this.props.children}</Text>
79+
<Text style={this.getTextStyle()}>{this.props.children}</Text>
6480
</TouchableOpacity>
6581
}
6682

6783
else if(Array.isArray(this.props.children)) {
6884
if(this.props.children[0] && (typeof this.props.children[0] == "string" || this.props.children[0].type == undefined))
69-
return <TouchableOpacity {...this.prepareRootProps()} >
70-
<Text style={[this.getTextStyle(), this.getInitialStyle().buttonText]}>{this.props.children[0]}</Text>
85+
return <TouchableOpacity {...this.prepareRootProps()} >
86+
<Text style={this.getTextStyle()}>{this.props.children[0]}</Text>
7187
<Text>
7288
{this.props.children[1]}
7389
</Text>

‎Components/Widgets/Header.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,15 @@ export default class Header extends NativeBaseComponent {
5252
</View>}
5353

5454
{ Array.isArray(this.props.children) &&
55-
<View style={{flex:1}}>
55+
<View style={{flex: 1,alignSelf: 'flex-start'}}>
5656
{this.props.children[0]}
5757
</View>}
5858
{ Array.isArray(this.props.children) &&
59-
<View style={{flex:5}}>
59+
<View style={{flex: 1, alignSelf: 'center'}}>
6060
{this.props.children[1]}
6161
</View>}
6262
{ Array.isArray(this.props.children) &&
63-
<View style={{flex:1}}>
63+
<View style={{flex:1, alignSelf: 'flex-end'}}>
6464
{this.props.children[2]}
6565
</View>}
6666

‎Utils/computeProps.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var React = require('react-native');
22

3-
var StyleSheetRegistry = require('react-native/Libraries/ReactNative/ReactNativePropRegistry');
3+
var StyleSheetRegistry = require('react-native/Libraries/StyleSheet/StyleSheetRegistry');
44

55
module.exports = function(incomingProps, defaultProps) {
66

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
"color": "~0.11.1",
88
"lodash": "~4.11.1",
99
"multiplier": "~0.1.0",
10-
"react": "^0.14.8",
11-
"react-native": "^0.24.1",
1210
"react-native-checkbox": "~1.0.8"
1311
},
1412
"peerDependencies": {

0 commit comments

Comments
 (0)