Skip to content

Commit f883ea3

Browse files
HimanshuHimanshu
Himanshu
authored and
Himanshu
committed
merged
2 parents 08104a4 + 4e75fb2 commit f883ea3

File tree

10 files changed

+262
-41
lines changed

10 files changed

+262
-41
lines changed

‎Components/Themes/light.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@ module.exports = {
1313
inverseTextColor: "#fff",
1414
textColor: "#000",
1515

16+
subtitleColor: "#8e8e93",
17+
1618
fontSizeBase: 15,
17-
titleFontSize: 17,
19+
titleFontSize: (Platform.OS === 'ios' ) ? 17 : 19,
20+
subTitleFontSize: (Platform.OS === 'ios' ) ? 12 : 14,
1821

1922
get fontSizeH1 () {
2023
return this.fontSizeBase*1.8;
@@ -48,11 +51,13 @@ module.exports = {
4851
},
4952

5053
footerHeight: 55,
51-
toolbarHeight: (Platform.OS === 'ios' ) ? 70 : 55,
52-
toolbarDefaultBg: "#00c497",
54+
toolbarHeight: (Platform.OS === 'ios' ) ? 64 : 56,
55+
toolbarDefaultBg: (Platform.OS === 'ios' ) ? "#F8F8F8" : "#039BE5",
5356
toolbarInverseBg: "#222",
5457

55-
tabBgColor: "#00c497",
58+
iosToolbarBtnColor: "#007aff",
59+
60+
tabBgColor: "#F8F8F8",
5661
tabTextColor: "#fff",
5762

5863
btnDisabledBg: '#b5b5b5',
@@ -125,12 +130,17 @@ module.exports = {
125130
listItemPadding: 15,
126131
listNoteColor: "#58575C",
127132

128-
iconFontSize: 32,
133+
iconFontSize: (Platform.OS === 'ios' ) ? 32 : 30,
129134

130135
badgeColor: "#fff",
131136
badgeBg: "#ED1727",
132137

133138
lineHeight: 21,
139+
iconLineHeight: (Platform.OS === 'ios' ) ? 37 : 30,
140+
141+
toolbarIconSize: (Platform.OS === 'ios' ) ? 18 : 22,
142+
143+
toolbarInputColor: "#CECDD2",
134144

135145
defaultSpinnerColor: "#45D56E",
136146
inverseSpinnerColor: "#1A191B",

‎Components/Widgets/Button.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export default class Button extends NativeBaseComponent {
7979
((this.props.bordered) && (this.props.warning)) ? this.getTheme().btnWarningBg :
8080
((this.props.bordered) && (this.props.info)) ? this.getTheme().btnInfoBg :
8181
((this.props.bordered)) ? this.getTheme().btnPrimaryBg :
82+
(this.props.color) ? this.props.color :
8283
(this.props.transparent) ? this.getContextForegroundColor() :
8384
this.getTheme().inverseTextColor,
8485

@@ -100,11 +101,12 @@ export default class Button extends NativeBaseComponent {
100101
((this.props.bordered) && (this.props.warning)) ? this.getTheme().btnWarningBg :
101102
((this.props.bordered) && (this.props.info)) ? this.getTheme().btnInfoBg :
102103
(this.props.bordered) ? this.getTheme().btnPrimaryBg :
104+
(this.props.color) ? this.props.color :
103105
(this.props.transparent) ? this.getContextForegroundColor() :
104106
this.getTheme().inverseTextColor,
105107

106108
fontSize: (this.props.large) ? this.getTheme().iconSizeLarge : (this.props.small) ? this.getTheme().iconSizeSmall : this.getTheme().iconFontSize,
107-
lineHeight: (this.props.large) ? 48: (this.props.small) ? 22 : 32
109+
lineHeight: (this.props.large) ? 52: (this.props.small) ? 22 : this.getTheme().iconLineHeight
108110
}
109111

110112
var defaultProps = {

‎Components/Widgets/Checkbox.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* @flow */
2+
'use strict';
3+
4+
import React from 'react';
5+
import {View, Platform} from 'react-native';
6+
import NativeBaseComponent from '../Base/NativeBaseComponent';
7+
import Icon from "./Icon";
8+
9+
export default class CheckBox extends NativeBaseComponent {
10+
11+
getInitialStyle() {
12+
return {
13+
checkbox: {
14+
borderRadius: (Platform.OS === 'ios') ? 13 : 2,
15+
overflow: 'hidden',
16+
width: 26,
17+
height: 26,
18+
borderWidth: (Platform.OS === 'ios') ? 1 : 2,
19+
paddingLeft: (Platform.OS === 'ios') ? 5 : 1,
20+
paddingBottom: (Platform.OS === 'ios') ? 0 : 5,
21+
borderColor: this.getTheme().checkboxBgColor,
22+
backgroundColor: this.props.checked ? this.getTheme().checkboxBgColor : 'transparent'
23+
}
24+
}
25+
}
26+
27+
render() {
28+
return(
29+
<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 : 20, fontSize: (Platform.OS === 'ios') ? undefined : 26, marginTop: (Platform.OS === 'ios') ? 0 : -2}} />
31+
</View>
32+
);
33+
}
34+
}

‎Components/Widgets/Header.js‎

Lines changed: 105 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import React from 'react';
55
import {View, Platform} from 'react-native';
66
import NativeBaseComponent from '../Base/NativeBaseComponent';
77
import computeProps from '../../Utils/computeProps';
8+
import Button from "./Button";
9+
import Title from "./Title";
10+
import InputGroup from "./InputGroup";
11+
import Subtitle from "./Subtitle";
12+
import _ from 'lodash';
813

914
export default class Header extends NativeBaseComponent {
1015

@@ -16,18 +21,25 @@ export default class Header extends NativeBaseComponent {
1621
flexDirection: 'row',
1722
alignItems: 'center',
1823
padding: 15,
19-
paddingTop: (Platform.OS === 'ios' ) ? 25 : 15,
24+
paddingTop: (Platform.OS === 'ios' ) ? 30 : 15,
2025
shadowColor: '#000',
2126
shadowOffset: {width: 0, height: 2},
2227
shadowOpacity: 0.1,
2328
shadowRadius: 1.5,
24-
height: this.getTheme().toolbarHeight
29+
height: this.getTheme().toolbarHeight,
30+
elevation: 2
2531
},
26-
title : {
27-
color: '#fff',
28-
fontSize: 20,
29-
fontWeight: "500",
30-
alignSelf: 'center'
32+
iosToolbarSearch: {
33+
backgroundColor: this.getTheme().toolbarInputColor,
34+
borderRadius: this.props.rounded ? 25 : 2,
35+
height: 30,
36+
borderColor: 'transparent'
37+
},
38+
androidToolbarSearch: {
39+
backgroundColor: "#fff",
40+
borderRadius: 2,
41+
borderColor: 'transparent',
42+
elevation: 2
3143
}
3244
}
3345
}
@@ -41,30 +53,95 @@ export default class Header extends NativeBaseComponent {
4153
return computeProps(this.props, defaultProps);
4254

4355
}
56+
renderChildren() {
57+
if(!Array.isArray(this.props.children)) {
58+
return this.props.children;
59+
}
60+
61+
else if (Array.isArray(this.props.children)) {
62+
var newChildren = [];
63+
var childrenArray = React.Children.toArray(this.props.children);
64+
65+
var buttons = [];
66+
buttons = _.remove(childrenArray, function(item) {
67+
if(item.type == Button) {
68+
return true;
69+
}
70+
});
71+
72+
var title = [];
73+
title = _.remove(childrenArray, function(item) {
74+
if(item.type == Title) {
75+
return true;
76+
}
77+
});
78+
79+
var subtitle = [];
80+
subtitle = _.remove(childrenArray, function(item) {
81+
if(item.type == Subtitle) {
82+
return true;
83+
}
84+
});
85+
86+
var input = [];
87+
input = _.remove(childrenArray, function(item) {
88+
if(item.type == InputGroup) {
89+
return true;
90+
}
91+
});
4492

45-
render() {
4693

94+
if (this.props.searchBar) {
95+
if (Platform.OS === 'ios') {
96+
newChildren.push(<View style={{flex: 4,alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -7}}>
97+
{React.cloneElement(input[0],{style: this.getInitialStyle().iosToolbarSearch, toolbar : true})}
98+
</View>)
99+
newChildren.push(<View style={{flex:1,alignItems: 'center', justifyContent: 'flex-end', flexDirection: 'row', marginRight: -24, marginLeft: 10}}>
100+
{React.cloneElement(buttons[0], {color: this.getTheme().iosToolbarBtnColor})}
101+
</View>)
102+
} else {
103+
newChildren.push(<View style={{flex: 1,alignItems: 'center', paddingBottom: 4, justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -8, marginRight: -8}}>
104+
{React.cloneElement(input[0],{style: this.getInitialStyle().androidToolbarSearch, atoolbar : true})}
105+
</View>)
106+
}
107+
}
108+
else {
109+
if (Platform.OS === 'ios') {
110+
newChildren.push(<View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -14}}>
111+
{React.cloneElement(buttons[0], {color: this.getTheme().iosToolbarBtnColor})}
112+
</View>)
113+
newChildren.push(<View style={{flex: 3, alignSelf: 'center', justifyContent: 'space-between'}}>
114+
{[title[0],subtitle[0]]}
115+
</View>)
116+
for (let i = 1; i < buttons.length; i++) {
117+
newChildren.push(<View style={{alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginRight: -14}}>
118+
{React.cloneElement(buttons[i], {color: this.getTheme().iosToolbarBtnColor})}
119+
</View>)
120+
}
121+
} else {
122+
newChildren.push(<View style={{alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -10, marginRight: 12}}>
123+
{buttons[0]}
124+
</View>)
125+
newChildren.push(<View style={{flex: 3, alignSelf: 'stretch'}}>
126+
{[title[0]]}
127+
</View>)
128+
for (let i = 1; i < buttons.length; i++) {
129+
newChildren.push(<View style={{alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginRight: -7}}>
130+
{buttons[i]}
131+
</View>)
132+
133+
}
134+
}
135+
136+
}
137+
return newChildren;
138+
}
139+
}
140+
141+
render() {
47142
return(
48-
<View {...this.prepareRootProps()}>
49-
{ !Array.isArray(this.props.children) &&
50-
<View >
51-
{this.props.children}
52-
</View>}
53-
54-
{ Array.isArray(this.props.children) &&
55-
<View style={{flex: 1,alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', marginLeft: -14}}>
56-
{this.props.children[0]}
57-
</View>}
58-
59-
{ Array.isArray(this.props.children) &&
60-
<View style={{flex: 3, alignSelf: 'center'}}>
61-
{this.props.children[1]}
62-
</View>}
63-
64-
{ Array.isArray(this.props.children) &&
65-
<View style={{flex:1,alignItems: 'center', justifyContent: 'flex-end', flexDirection: 'row', marginRight: -14}}>
66-
{this.props.children[2]}
67-
</View>}
143+
<View {...this.prepareRootProps()} >
144+
{this.renderChildren()}
68145
</View>
69146
);
70147
}

‎Components/Widgets/Icon.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default class IconNB extends NativeBaseComponent {
1111
getInitialStyle() {
1212
return {
1313
icon: {
14-
fontSize: 34,
14+
fontSize: this.getTheme().iconFontSize,
1515
color: this.getContextForegroundColor()
1616
}
1717
}

‎Components/Widgets/ListItem.js‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import View from './View';
1111
import Button from './Button';
1212
import Badge from './Badge';
1313
import Thumbnail from './Thumbnail';
14+
import CheckBox from './Checkbox';
15+
import Radio from './Radio';
1416
import InputGroup from './InputGroup';
1517
import _ from 'lodash';
1618

@@ -110,6 +112,26 @@ export default class ListItemNB extends NativeBaseComponent {
110112
return thumbnailComponentPresent;
111113
}
112114

115+
checkBoxPresent() {
116+
var checkBoxComponentPresent = false;
117+
React.Children.forEach(this.props.children, function (child) {
118+
if(child.type == CheckBox)
119+
checkBoxComponentPresent = true;
120+
})
121+
122+
return checkBoxComponentPresent;
123+
}
124+
125+
radioPresent() {
126+
var radioComponentPresent = false;
127+
React.Children.forEach(this.props.children, function (child) {
128+
if(child.type == Radio)
129+
radioComponentPresent = true;
130+
})
131+
132+
return radioComponentPresent;
133+
}
134+
113135
iconPresent() {
114136
var iconComponentPresent = false;
115137
React.Children.forEach(this.props.children, function (child) {
@@ -164,7 +186,7 @@ export default class ListItemNB extends NativeBaseComponent {
164186
}
165187
}
166188
else if(child.type == InputGroup) {
167-
189+
168190
defaultProps = {
169191
style: {
170192
borderColor: this.getTheme().listBorderColor
@@ -211,7 +233,6 @@ export default class ListItemNB extends NativeBaseComponent {
211233
foregroundColor: this.getContextForegroundColor()
212234
}
213235
}
214-
215236
return computeProps(child.props, defaultProps);
216237
}
217238

@@ -227,7 +248,6 @@ export default class ListItemNB extends NativeBaseComponent {
227248
defaultProps = {
228249
style: this.getInitialStyle().listItem
229250
};
230-
231251
return computeProps(this.props, defaultProps);
232252
}
233253

@@ -297,7 +317,7 @@ export default class ListItemNB extends NativeBaseComponent {
297317
}
298318

299319
renderChildren() {
300-
320+
301321
var newChildren = [];
302322
if(!Array.isArray(this.props.children) && !this.inlinePresent() && !this.stackedPresent() && !this.insetPresent()) {
303323
newChildren.push(
@@ -386,6 +406,34 @@ export default class ListItemNB extends NativeBaseComponent {
386406
})}
387407
</View>);
388408
}
409+
else if (this.checkBoxPresent()) {
410+
411+
iconElement = _.remove(childrenArray, function(item) {
412+
if(item.type == CheckBox) {
413+
return true;
414+
}
415+
});
416+
newChildren.push(React.cloneElement(iconElement[0], this.getChildProps(iconElement[0])));
417+
newChildren.push(<View style={{flexDirection: 'column', paddingLeft: 15, alignSelf: (this.squareThumbs()) ? 'flex-start' : 'center', flex: 1 }} >
418+
{childrenArray.map((child) => {
419+
return React.cloneElement(child, this.getChildProps(child));
420+
})}
421+
</View>);
422+
}
423+
else if (this.radioPresent()) {
424+
425+
iconElement = _.remove(childrenArray, function(item) {
426+
if(item.type == Radio) {
427+
return true;
428+
}
429+
});
430+
newChildren.push(<View style={{flexDirection: 'column', paddingLeft: 15, alignSelf: (this.squareThumbs()) ? 'flex-start' : 'center', flex: 1 }} >
431+
{childrenArray.map((child) => {
432+
return React.cloneElement(child, this.getChildProps(child));
433+
})}
434+
</View>);
435+
newChildren.push(React.cloneElement(iconElement[0], this.getChildProps(iconElement[0])));
436+
}
389437
else if (this.inputPresent() && !this.inlinePresent() && !this.stackedPresent() && !this.insetPresent()) {
390438

391439

0 commit comments

Comments
 (0)