Skip to content

Commit fbababa

Browse files
Sankhadeep RoySankhadeep Roy
Sankhadeep Roy
authored and
Sankhadeep Roy
committed
merged
2 parents 835d678 + 1702224 commit fbababa

25 files changed

Lines changed: 306 additions & 626 deletions

Components/Widgets/Button/style.js renamed to Components/Styles/button.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
'use strict';
33

44
var React = require('react-native');
5+
var primary = require('./variable').brandPrimary
6+
var secondary = require('./variable').brandSecondary
57

68
var {
79
StyleSheet,
@@ -14,13 +16,18 @@ module.exports = {
1416
button: {
1517
padding: 10,
1618
borderColor: 'transparent',
17-
alignSelf: 'stretch',
1819
height: 45,
20+
marginTop: 15,
21+
justifyContent: 'space-around',
22+
flexDirection: 'row',
23+
marginLeft: 10,
24+
marginRight: 10,
1925
shadowColor: '#000',
2026
shadowOffset: {width: 1, height: 2},
2127
shadowOpacity: 0.2,
2228
shadowRadius: 3,
23-
alignItems: 'center'
29+
backgroundColor: secondary,
30+
borderRadius: 4
2431
},
2532
buttonText: {
2633
fontSize: 18,

‎Components/Themes/dark.js‎

Lines changed: 8 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,10 @@
11
var Color = require("color")
2-
var multiply = require('multiplier');
3-
4-
var primary = Color("#428bca");
5-
var success = Color("#5cb85c");
6-
var danger = Color("#d9534f");
7-
var info = Color("#5bc0de");
8-
var warning = Color("#f0ad4e");
92

10-
var sidebar = Color("#252932");
11-
var dark = Color("rgba(0,0,0,0.9)");
12-
var light = Color("rgba(255,255,255,0.9)");
3+
var multiply = require('multiplier');
134

14-
var darken = primary.darken(0.2).hexString().toString();
155
var fontSizeBase = 15;
16-
176
var borderRadiusBase = 4;
187

19-
var toolbarHeight = 65;
20-
var toolbarDefaultBg = Color("#f8f8f8");
21-
var toolbarInverseBg = Color("#222");
22-
23-
var btnPrimaryBg = Color("#428bca");
24-
var btnPrimaryColor = Color("#fff");
25-
26-
var btnSuccessBg = Color("#5cb85c");
27-
var btnSuccessColor = Color("#fff");
28-
29-
var btnDangerBg = Color("#d9534f");
30-
var btnDangerColor = Color("#fff");
31-
32-
var btnInfoBg = Color("#5bc0de");
33-
var btnInfoColor = Color("#fff");
34-
35-
var btnWarningBg = Color("#f0ad4e");
36-
var btnWarningColor = Color("#fff");
37-
38-
var inputBg = Color("#fff");
39-
var inputColor = Color("gray");
40-
var inputBorder = Color("#fff")
41-
var inputHeightBase = 40;
42-
var inputGroupMarginBottom = 15;
43-
44-
var paddingBaseVertical = 6;
45-
var paddingBaseHorizontal = 12;
46-
47-
48-
49-
508
module.exports = {
519
brandPrimary : "#428bca",
5210
brandInfo: "#5bc0de",
@@ -73,10 +31,10 @@ module.exports = {
7331
return multiply(fontSizeBase, 1.2);
7432
},
7533

76-
borderRadiusBase: borderRadiusBase,
34+
borderRadiusBase: 4,
7735

7836
get borderRadiusLarge () {
79-
return multiply(borderRadiusBase, 5.8);
37+
return multiply(fontSizeBase, 5.8);
8038
},
8139

8240
toolbarHeight: 65,
@@ -120,11 +78,16 @@ module.exports = {
12078
inputHeightBase: 40,
12179
inputGroupMarginBottom: 10,
12280
inputColorPlaceholder: "#999",
81+
inputPaddingLeft: 5,
82+
get inputPaddingLeftIcon () {
83+
return multiply(inputPaddingLeft, 8);;
84+
},
12385

12486
dropdownBg: "#fff",
12587
dropdownLinkColor: "#414142",
12688

12789
jumbotronPadding: 30,
12890
jumbotronBg: "#C9C9CE"
12991

92+
13093
}

‎Components/Themes/light.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1+
<<<<<<< HEAD
12
var Color = require("color");
3+
=======
4+
var Color = require("color")
5+
>>>>>>> 1702224571f9416624cf195b9bc87ac0e782f553
26

37
var primary = Color("#384850");
48
var secondary = Color("#00c497");
@@ -25,6 +29,7 @@ module.exports = {
2529

2630

2731

32+
<<<<<<< HEAD
2833

2934
//
3035
// Variables
@@ -941,4 +946,6 @@ dlHorizontalOffset: componentOffsetHorizontal,
941946
//** Point at which .dl-horizontal becomes horizontal
942947
dlHorizontalBreakpoint: gridFloatBreakpoint,
943948
//** Horizontal line color.
944-
hrBorder: grayLighter,
949+
hrBorder: grayLighter,
950+
=======
951+
>>>>>>> 1702224571f9416624cf195b9bc87ac0e782f553

‎Components/Widgets/Button.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/* @flow */
2+
'use strict';
3+
4+
import React, { Text, View, TouchableOpacity } from 'react-native';
5+
import NativeBaseComponent from '../Base/NativeBaseComponent';
6+
import button from '../Styles/button';
7+
import _ from 'lodash';
8+
import computeProps from '../../Utils/computeProps';
9+
import Icon from 'react-native-vector-icons/Ionicons';
10+
11+
12+
export default class Button extends NativeBaseComponent {
13+
14+
getInitialStyle() {
15+
return {
16+
button: {
17+
padding: 10,
18+
borderColor: 'transparent',
19+
height: 45,
20+
justifyContent: 'space-around',
21+
flexDirection: 'row',
22+
backgroundColor: this.getTheme().primary,
23+
},
24+
buttonText: {
25+
fontSize: 18,
26+
flex: 1,
27+
color: '#fff'
28+
}
29+
}
30+
}
31+
32+
prepareRootProps() {
33+
34+
var type = { backgroundColor: (this.props.primary) ? this.getTheme().primary :
35+
(this.props.success) ? this.getTheme().success :
36+
(this.props.danger) ? this.getTheme().danger :
37+
(this.props.warning) ? this.getTheme().warning :
38+
(this.props.info) ? this.getTheme().info :
39+
(this.props.backgroundColor) ? this.props.backgroundColor :
40+
(this.props.transparent) ? 'rgba(0,0,0,0)' :
41+
this.getInitialStyle().button.backgroundColor,
42+
borderRadius: (this.props.rounded) ? this.getTheme().borderRadiusLarge : this.getTheme().borderRadiusBase
43+
}
44+
45+
console.log(button.button, type);
46+
47+
var addedProps = _.merge(this.getInitialStyle().button,type);
48+
49+
var defaultProps = {
50+
style: addedProps
51+
}
52+
53+
console.log("button style", computeProps(this.props, defaultProps));
54+
55+
return computeProps(this.props, defaultProps);
56+
57+
}
58+
59+
getTextStyle() {
60+
var mergedStyle = {};
61+
return _.merge(mergedStyle, this.getInitialStyle().buttonText, this.props.textStyle);
62+
}
63+
64+
renderChildren() {
65+
if(typeof this.props.children == undefined || typeof this.props.children == "string") {
66+
console.log(this.props.children);
67+
return <TouchableOpacity {...this.prepareRootProps()} >
68+
<Text style={this.getTextStyle()}>{this.props.children}</Text>
69+
</TouchableOpacity>
70+
}
71+
72+
else if(Array.isArray(this.props.children)) {
73+
console.log(this.props.children[0].type, this.props.children[1].type);
74+
if(this.props.children[0] && this.props.children[0].type == undefined || typeof this.props.children == "string")
75+
return <TouchableOpacity {...this.prepareRootProps()} >
76+
<Text style={this.getTextStyle()}>{this.props.children[0]}</Text>
77+
<View>
78+
{this.props.children[1]}
79+
</View>
80+
</TouchableOpacity>
81+
82+
else if(this.props.children[1] && this.props.children[1].type == undefined || typeof this.props.children == "string")
83+
return <TouchableOpacity {...this.prepareRootProps()} >
84+
<View>
85+
{this.props.children[0]}
86+
</View>
87+
<Text style={this.getTextStyle()}>{this.props.children[1]}</Text>
88+
</TouchableOpacity>
89+
90+
else
91+
return <TouchableOpacity {...this.prepareRootProps()} >
92+
<View>
93+
{this.props.children[0]}
94+
</View>
95+
<View>
96+
{this.props.children[1]}
97+
</View>
98+
</TouchableOpacity>
99+
}
100+
101+
else
102+
return <TouchableOpacity {...this.prepareRootProps()} >
103+
{this.props.children}
104+
</TouchableOpacity>
105+
}
106+
107+
render() {
108+
return(this.renderChildren());
109+
}
110+
111+
}

‎Components/Widgets/Button/index.js‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎Components/Widgets/ButtonGroup.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎Components/Widgets/ButtonRounded.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎Components/Widgets/CircularButton.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)