Skip to content

Commit 24c7ea2

Browse files
author
Sankhadeep
committed
forms fixed and variables for checkbox added
1 parent 594625f commit 24c7ea2

File tree

10 files changed

+101
-49
lines changed

10 files changed

+101
-49
lines changed

‎Components/Themes/light.js

+15-8
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ export default {
1010
brandWarning: "#f0ad4e",
1111
brandSidebar: "#252932",
1212

13-
fontFamily: (Platform.OS === 'ios' ) ? 'HelveticaNeue' : 'Roboto-Light',
13+
fontFamily: (Platform.OS === 'ios' ) ? 'HelveticaNeue' : 'Roboto',
14+
btnFontFamily: (Platform.OS === 'ios' ) ? 'HelveticaNeue' : 'Roboto_medium',
1415
iconFamily: 'Ionicons',
1516

1617
inverseTextColor: "#fff",
@@ -22,6 +23,9 @@ export default {
2223
titleFontSize: (Platform.OS === 'ios' ) ? 17 : 19,
2324
subTitleFontSize: (Platform.OS === 'ios' ) ? 12 : 14,
2425

26+
inputFontSize: 15,
27+
inputLineHeight: 24,
28+
2529
get fontSizeH1 () {
2630
return this.fontSizeBase*1.8;
2731
},
@@ -65,7 +69,10 @@ export default {
6569
checkboxBgColor: "#039BE5",
6670
checkboxTickColor: "#fff",
6771

72+
checkboxSize: 23,
73+
6874
radioColor: "#7e7e7e",
75+
radioBtnSize: (Platform.OS === 'ios') ? 25 : 23,
6976

7077
tabBgColor: "#F8F8F8",
7178
tabTextColor: "#fff",
@@ -116,7 +123,7 @@ export default {
116123
return this.textColor;
117124
},
118125
get inputColorPlaceholder () {
119-
return 'rgba(0, 0, 0, 0.7)';
126+
return '#575757';
120127
},
121128
inputBorderColor: "#D9D5DC",
122129
inputHeightBase: 40,
@@ -126,7 +133,7 @@ export default {
126133
return this.inputPaddingLeft* 8;
127134
},
128135

129-
btnLineHeight: (Platform.OS==='ios') ? 20 : 23,
136+
btnLineHeight: 19,
130137

131138
dropdownBg: "#000",
132139
dropdownLinkColor: "#414142",
@@ -137,20 +144,20 @@ export default {
137144
contentPadding: 10,
138145

139146
listBorderColor: "#ddd",
140-
listDividerBg: "#F4EFF6",
141-
listItemPadding: 10,
147+
listDividerBg: "#ddd",
148+
listItemPadding: 9,
142149
listNoteColor: "#808080",
143150
listNoteSize: 13,
144151

145-
iconFontSize: (Platform.OS === 'ios' ) ? 32 : 30,
152+
iconFontSize: (Platform.OS === 'ios' ) ? 30 : 28,
146153

147154
badgeColor: "#fff",
148155
badgeBg: "#ED1727",
149156

150-
lineHeight: (Platform.OS === 'ios' ) ? 21 : 24,
157+
lineHeight: (Platform.OS === 'ios' ) ? 20 : 24,
151158
iconLineHeight: (Platform.OS === 'ios' ) ? 37 : 30,
152159

153-
toolbarIconSize: (Platform.OS === 'ios' ) ? 18 : 22,
160+
toolbarIconSize: (Platform.OS === 'ios' ) ? 20 : 22,
154161

155162
toolbarInputColor: "#CECDD2",
156163

‎Components/Widgets/Button.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default class Button extends NativeBaseComponent {
7070

7171
var mergedStyle = {};
7272
var btnType = {
73-
fontWeight: (Platform.OS==='ios') ? '400' : '500',
73+
fontFamily: this.getTheme().btnFontFamily,
7474
marginLeft: (this.iconPresent() && !this.props.iconRight) ? this.getTheme().iconMargin : 0,
7575
marginRight: (this.iconPresent() && this.props.iconRight) ? this.getTheme().iconMargin : 0,
7676
color:
@@ -86,7 +86,7 @@ export default class Button extends NativeBaseComponent {
8686

8787
fontSize: (this.props.large) ? this.getTheme().btnTextSizeLarge : (this.props.small) ? this.getTheme().btnTextSizeSmall : this.getTheme().btnTextSize,
8888

89-
lineHeight: (this.props.large) ? 29 : (this.props.small) ? 16 : this.getTheme().btnLineHeight-2
89+
lineHeight: (this.props.large) ? 29 : (this.props.small) ? 16 : this.getTheme().btnLineHeight
9090
}
9191

9292
return _.merge(mergedStyle, btnType, this.props.textStyle);
@@ -106,8 +106,8 @@ export default class Button extends NativeBaseComponent {
106106
(this.props.transparent) ? this.getContextForegroundColor() :
107107
this.getTheme().inverseTextColor,
108108

109-
fontSize: (this.props.large) ? this.getTheme().iconSizeLarge : (this.props.small) ? this.getTheme().iconSizeSmall : this.getTheme().iconFontSize-5,
110-
lineHeight: (this.props.large) ? 52: (this.props.small) ? 22 : this.getTheme().iconLineHeight-7
109+
fontSize: (this.props.large) ? this.getTheme().iconSizeLarge : (this.props.small) ? this.getTheme().iconSizeSmall : (this.props.inputButton) ? this.getTheme().toolbarIconSize : this.getTheme().iconFontSize-5,
110+
lineHeight: (this.props.large) ? 52: (this.props.small || this.props.inputButton) ? 22 : this.getTheme().iconLineHeight-9
111111
}
112112

113113
var defaultProps = {

‎Components/Widgets/Checkbox.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export default class CheckBox extends NativeBaseComponent {
1313
checkbox: {
1414
borderRadius: (Platform.OS === 'ios') ? 13 : 2,
1515
overflow: 'hidden',
16-
width: 26,
17-
height: 26,
16+
width: this.getTheme().checkboxSize,
17+
height: this.getTheme().checkboxSize,
1818
borderWidth: (Platform.OS === 'ios') ? 1 : 2,
1919
paddingLeft: (Platform.OS === 'ios') ? 5 : 2,
2020
paddingBottom: (Platform.OS === 'ios') ? 0 : 5,
@@ -27,7 +27,7 @@ export default class CheckBox extends NativeBaseComponent {
2727
render() {
2828
return(
2929
<View style={this.getInitialStyle().checkbox}>
30-
<Icon name={(Platform.OS === 'ios') ? "ios-checkmark-outline" : "md-checkmark"} style={{color: this.props.checked ? this.getTheme().checkboxTickColor : "transparent", lineHeight: (Platform.OS === 'ios') ? 28 : 18, marginTop: (Platform.OS==='ios') ? undefined : 1, fontSize: (Platform.OS === 'ios') ? undefined : 22}} />
30+
<Icon name={(Platform.OS === 'ios') ? "ios-checkmark-outline" : "md-checkmark"} style={{color: this.props.checked ? this.getTheme().checkboxTickColor : "transparent", lineHeight: (Platform.OS === 'ios') ? this.getTheme().checkboxSize/0.93 : this.getTheme().checkboxSize-5, marginTop: (Platform.OS==='ios') ? undefined : 1, fontSize: (Platform.OS === 'ios') ? this.getTheme().checkboxSize/0.8 : this.getTheme().checkboxSize/1.2}} />
3131
</View>
3232
);
3333
}

‎Components/Widgets/Header.js

+11-8
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default class Header extends NativeBaseComponent {
2727
shadowOpacity: 0.1,
2828
shadowRadius: 1.5,
2929
height: this.getTheme().toolbarHeight,
30-
elevation: 2
30+
elevation: 3
3131
},
3232
iosToolbarSearch: {
3333
backgroundColor: this.getTheme().toolbarInputColor,
@@ -42,6 +42,9 @@ export default class Header extends NativeBaseComponent {
4242
borderColor: 'transparent',
4343
elevation: 2,
4444
flex:1
45+
},
46+
toolbarButton: {
47+
paddingHorizontal: 15
4548
}
4649
}
4750
}
@@ -95,41 +98,41 @@ export default class Header extends NativeBaseComponent {
9598

9699
if (this.props.searchBar) {
97100
if (Platform.OS === 'ios') {
98-
newChildren.push(<View key='search' style={{flex: 1, alignSelf: 'stretch', alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -7}}>
101+
newChildren.push(<View key='search' style={{flex: 1, alignSelf: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -7}}>
99102
{React.cloneElement(input[0],{style: this.getInitialStyle().iosToolbarSearch, toolbar : true, key : 'inp'})}
100103
</View>)
101104
newChildren.push(<View key='searchBtn' style={{alignItems: 'center', justifyContent: 'center', flexDirection: 'row', marginRight: -14}}>
102-
{React.cloneElement(buttons[0], {color: this.getTheme().iosToolbarBtnColor})}
105+
{React.cloneElement(buttons[0], {color: this.getTheme().iosToolbarBtnColor, style: this.getInitialStyle().toolbarButton})}
103106
</View>)
104107
} else {
105-
newChildren.push(<View key='search' style={{flex: 1,alignItems: 'center', paddingBottom: 4, justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -8, marginRight: -8}}>
108+
newChildren.push(<View key='search' style={{flex: 1,alignSelf: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -8, marginRight: -8}}>
106109
{React.cloneElement(input[0],{style: this.getInitialStyle().androidToolbarSearch, atoolbar : true})}
107110
</View>)
108111
}
109112
}
110113
else {
111114
if (Platform.OS === 'ios') {
112115
newChildren.push(<View key='btn1' style={{alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -14}}>
113-
{React.cloneElement(buttons[0], {color: this.getTheme().iosToolbarBtnColor})}
116+
{React.cloneElement(buttons[0], {color: this.getTheme().iosToolbarBtnColor, style: this.getInitialStyle().toolbarButton})}
114117
</View>)
115118
newChildren.push(<View key='title' style={{flex: 3, alignSelf: 'center', justifyContent: 'space-between'}}>
116119
{[title[0],subtitle[0]]}
117120
</View>)
118121
for (let i = 1; i < buttons.length; i++) {
119122
newChildren.push(<View key={'btn' + (i+1)} style={{alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginRight: -14}}>
120-
{React.cloneElement(buttons[i], {color: this.getTheme().iosToolbarBtnColor})}
123+
{React.cloneElement(buttons[i], {color: this.getTheme().iosToolbarBtnColor, style: this.getInitialStyle().toolbarButton})}
121124
</View>)
122125
}
123126
} else {
124127
newChildren.push(<View key='btn1' style={{alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -10, marginRight: 12}}>
125-
{buttons[0]}
128+
{React.cloneElement(buttons[0], {style: this.getInitialStyle().toolbarButton})}
126129
</View>)
127130
newChildren.push(<View key='title' style={{flex: 3, alignSelf: 'stretch', justifyContent: 'center'}}>
128131
{[title[0]]}
129132
</View>)
130133
for (let i = 1; i < buttons.length; i++) {
131134
newChildren.push(<View key={'btn' + (i+1)} style={{alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginRight: -7}}>
132-
{buttons[i]}
135+
{React.cloneElement(buttons[i], {style: this.getInitialStyle().toolbarButton})}
133136
</View>)
134137

135138
}

‎Components/Widgets/Input.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export default class Input extends NativeBaseComponent {
1212
height: this.getTheme().inputHeightBase,
1313
color: this.getTheme().inputColor,
1414
paddingLeft: 5,
15-
paddingRight: 5
15+
paddingRight: 5,
16+
fontSize: this.getTheme().inputFontSize,
17+
lineHeight: this.getTheme().inputLineHeight
1618
}
1719
}
1820
}
@@ -21,14 +23,14 @@ export default class Input extends NativeBaseComponent {
2123
var defaultProps = {
2224
style: this.getInitialStyle().input
2325
}
24-
26+
2527
return computeProps(this.props, defaultProps);
2628
}
2729
render() {
2830

2931
return (
3032
<View style={{ flex: 1}}>
31-
<TextInput {...this.prepareRootProps()} placeholderTextColor={ this.props.placeholderTextColor ? this.props.placeholderTextColor : this.getContextForegroundColor() ? this.getContextForegroundColor() : this.getTheme().inputColorPlaceholder } underlineColorAndroid='rgba(0,0,0,0)' />
33+
<TextInput {...this.prepareRootProps()} placeholderTextColor={ this.props.placeholderTextColor ? this.props.placeholderTextColor : this.getTheme().inputColorPlaceholder } underlineColorAndroid='rgba(0,0,0,0)' />
3234
</View>
3335
);
3436
}

‎Components/Widgets/InputGroup.js

+50-12
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React from 'react';
55
import {View} from 'react-native';
66
import NativeBaseComponent from '../Base/NativeBaseComponent';
77
import Icon from './Icon';
8+
import Button from './Button';
89
import computeProps from '../../Utils/computeProps';
910
import Input from './Input';
1011
import _ from 'lodash';
@@ -14,20 +15,19 @@ export default class InputGroup extends NativeBaseComponent {
1415
getInitialStyle() {
1516
return {
1617
textInput: {
17-
height: this.getTheme().inputHeightBase,
1818
backgroundColor: 'transparent',
1919
flexDirection: 'row',
2020
borderColor: this.getTheme().inputBorderColor,
21-
paddingRight: 5
21+
paddingRight: 5,
22+
alignItems: 'center'
2223
},
2324
outerBorder: {
2425
position:'relative',
2526
borderColor: 'white',
2627
borderWidth: this.getTheme().borderWidth,
2728
borderTopWidth: 0,
2829
borderRightWidth: 0,
29-
borderLeftWidth: 0,
30-
marginTop: 5
30+
borderLeftWidth: 0
3131
},
3232
darkborder: {
3333
borderColor: '#000'
@@ -40,21 +40,18 @@ export default class InputGroup extends NativeBaseComponent {
4040
borderWidth: this.getTheme().borderWidth,
4141
borderTopWidth: 0,
4242
borderRightWidth: 0,
43-
borderLeftWidth: 0,
44-
marginTop: 5
43+
borderLeftWidth: 0
4544
},
4645

4746
bordered: {
4847
position:'relative',
49-
borderWidth: this.getTheme().borderWidth,
50-
marginTop: 5
48+
borderWidth: this.getTheme().borderWidth
5149
},
5250

5351
rounded: {
5452
position:'relative',
5553
borderWidth: this.getTheme().borderWidth,
56-
borderRadius: 30,
57-
marginTop: 5
54+
borderRadius: 30
5855
}
5956
}
6057
}
@@ -83,10 +80,9 @@ export default class InputGroup extends NativeBaseComponent {
8380
getIconProps(icon) {
8481

8582
var defaultStyle = {
86-
color: this.getContextForegroundColor(),
8783
fontSize: (this.props.toolbar || this.props.atoolbar) ? this.getTheme().toolbarIconSize : 27,
8884
alignSelf: 'center',
89-
lineHeight: (this.props.toolbar || this.props.atoolbar) ? 22 : undefined,
85+
lineHeight: (this.props.toolbar || this.props.atoolbar) ? 24 : undefined,
9086
paddingRight: 5,
9187
marginLeft: (this.props.toolbar || this.props.atoolbar) ? 5 : undefined
9288
}
@@ -98,6 +94,23 @@ export default class InputGroup extends NativeBaseComponent {
9894

9995
return computeProps(icon.props, defaultProps);
10096
}
97+
getButtonProps(button) {
98+
99+
var defaultStyle = {
100+
alignSelf: 'center',
101+
paddingRight: 5,
102+
marginLeft: (this.props.toolbar || this.props.atoolbar) ? 5 : undefined,
103+
height: 30
104+
}
105+
106+
var defaultProps = {
107+
style: defaultStyle,
108+
key: 'button',
109+
inputButton: true
110+
}
111+
112+
return computeProps(button.props, defaultProps);
113+
}
101114

102115

103116
renderChildren() {
@@ -113,6 +126,14 @@ export default class InputGroup extends NativeBaseComponent {
113126
}
114127
});
115128

129+
var buttonElement = [];
130+
131+
buttonElement = _.remove(childrenArray, function(item) {
132+
if(item.type == Button) {
133+
return true;
134+
}
135+
});
136+
116137
var inp = _.find(childrenArray, function(item) {
117138
if(item && item.type == Input) {
118139
return true;
@@ -130,6 +151,23 @@ export default class InputGroup extends NativeBaseComponent {
130151
newChildren.push(<Input key='inp' {...inputProps} style={{height: this.props.toolbar ? 30 : undefined, fontSize: this.props.toolbar ? 15 : undefined}}/>);
131152
newChildren.push(React.cloneElement(iconElement[0],this.getIconProps(iconElement[0])));
132153
}
154+
else if(buttonElement.length>0) {
155+
newChildren.push(React.cloneElement(
156+
iconElement[0],
157+
{
158+
...this.getIconProps(iconElement[0]),
159+
key: 'icon0'
160+
}
161+
));
162+
newChildren.push(<Input key='inp' {...inputProps} style={{height: this.props.toolbar ? 30 : undefined, fontSize: this.props.toolbar ? 15 : undefined}}/>);
163+
newChildren.push(React.cloneElement(
164+
buttonElement[0],
165+
{
166+
...this.getButtonProps(buttonElement[0]),
167+
key: 'button1'
168+
}
169+
));
170+
}
133171
else {
134172
if (iconElement.length > 1) {
135173
newChildren.push(React.cloneElement(

‎Components/Widgets/ListItem.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,14 @@ export default class ListItemNB extends NativeBaseComponent {
2323
return {
2424
listItem: {
2525
borderBottomWidth: this.getTheme().borderWidth,
26+
marginLeft: 15,
2627
padding: this.inputPresent() ? 0 : this.getTheme().listItemPadding,
28+
paddingLeft: 2,
2729
//borderRadius: 1,
2830
justifyContent: ((this.props.iconRight && !this.props.iconLeft) || (this.props.iconRight && this.props.iconLeft)) ? 'space-between' : 'flex-start',
2931
flexDirection: this.stackedPresent() ? 'column' : 'row',
3032
alignItems: 'center',
31-
borderColor: this.inputPresent() ? 'transparent' : this.getTheme().listBorderColor
33+
borderColor: (this.inputPresent() && !this.inlinePresent() ) ? 'transparent' : this.getTheme().listBorderColor
3234
},
3335
listItemDivider: {
3436
borderBottomWidth: this.getTheme().borderWidth,
@@ -444,21 +446,21 @@ export default class ListItemNB extends NativeBaseComponent {
444446
}
445447
else if (this.inlinePresent()) {
446448

447-
newChildren.push(<View key='listItem0' style={{flexDirection: 'row', justifyContent: 'center', flex: 1, borderBottomWidth: 1, borderColor: this.getTheme().listBorderColor, alignItems: 'center', height: this.getTheme().inputHeightBase+5 }} >
448-
<Text style={{color: this.getContextForegroundColor() ? this.getContextForegroundColor() : this.getTheme().inputColorPlaceholder }}>{this.props.children.props.children.props.label}</Text>
449+
newChildren.push(<View key='listItem0' style={{flexDirection: 'row', justifyContent: 'center', flex: 1, borderColor: this.getTheme().listBorderColor, alignItems: 'center', height: this.getTheme().inputHeightBase }} >
450+
<Text style={{color: this.getTheme().inputColorPlaceholder }}>{this.props.children.props.children.props.label}</Text>
449451
</View>);
450-
newChildren.push(<View key='listItem1' style={{flexDirection: 'column', alignSelf: 'center', flex: 2 }} >
452+
newChildren.push(<View key='listItem1' style={{flexDirection: 'column', alignSelf: 'center', flex: 2.2 }} >
451453
{childrenArray.map((child, i) => {
452-
return React.cloneElement(child, {...this.getChildProps(child), key: i});
454+
return React.cloneElement(child, {...this.getChildProps(child), key: i, style:{borderWidth: 0}});
453455
})}
454456
</View>);
455457
}
456458
else if (this.stackedPresent()) {
457459

458-
newChildren.push(<View key='listItem0' style={{flexDirection: 'row', justifyContent: 'flex-start', flex: 1, alignSelf: 'stretch', alignItems: 'center', height: this.getTheme().inputHeightBase, paddingLeft: 10 }} >
459-
<Text style={{color: this.getContextForegroundColor() ? this.getContextForegroundColor() : this.getTheme().inputColorPlaceholder, textAlign: 'left', fontSize: 17 }}>{this.props.children.props.children.props.label}</Text>
460+
newChildren.push(<View key='listItem0' style={{flexDirection: 'row', justifyContent: 'flex-start', alignSelf: 'stretch', alignItems: 'center', height: this.getTheme().inputHeightBase, paddingLeft: 10 }} >
461+
<Text style={{color: this.getTheme().inputColorPlaceholder, textAlign: 'left', fontSize: 15 }}>{this.props.children.props.children.props.label}</Text>
460462
</View>);
461-
newChildren.push(<View key='listItem1' style={{flexDirection: 'row', alignSelf: 'stretch', flex: 2 , padding: 0}} >
463+
newChildren.push(<View key='listItem1' style={{flexDirection: 'row', alignSelf: 'stretch', flex: 1 , padding: 0}} >
462464
{childrenArray.map((child, i) => {
463465
return React.cloneElement(child, {...this.getChildProps(child), key: i, style:{flex:1}});
464466
})}

0 commit comments

Comments
 (0)