Skip to content

Commit eb9bafa

Browse files
Sankhadeep RoySankhadeep Roy
Sankhadeep Roy
authored and
Sankhadeep Roy
committed
Header footer separartion
1 parent 675cbd5 commit eb9bafa

File tree

8 files changed

+127
-15
lines changed

8 files changed

+127
-15
lines changed

‎Components/Themes/light.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ module.exports = {
3939
return multiply(fontSizeBase, 5.8);
4040
},
4141

42+
footerHeight: 55,
4243
toolbarHeight: 70,
4344
toolbarDefaultBg: "#505052",
4445
toolbarInverseBg: "#222",
@@ -47,31 +48,31 @@ module.exports = {
4748
return this.brandPrimary;
4849
},
4950
get btnPrimaryColor () {
50-
return this.textColor;
51+
return this.inverseTextColor;
5152
},
5253
get btnSuccessBg () {
5354
return this.brandSuccess;
5455
},
5556
get btnSuccessColor () {
56-
return this.textColor;
57+
return this.inverseTextColor;
5758
},
5859
get btnDangerBg () {
5960
return this.brandDanger;
6061
},
6162
get btnDangerColor () {
62-
return this.textColor;
63+
return this.inverseTextColor;
6364
},
6465
get btnInfoBg () {
6566
return this.brandInfo;
6667
},
6768
get btnInfoColor () {
68-
return this.textColor;
69+
return this.inverseTextColor;
6970
},
7071
get btnWarningBg () {
7172
return this. brandWarning;
7273
},
7374
get btnWarningColor () {
74-
return this.textColor;
75+
return this.inverseTextColor;
7576
},
7677

7778

‎Components/Widgets/Button.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@ export default class Button extends NativeBaseComponent {
6060
renderChildren() {
6161
if(typeof this.props.children == undefined || typeof this.props.children == "string") {
6262
return <TouchableOpacity {...this.prepareRootProps()} >
63-
<Text style={this.getTextStyle()}>{this.props.children}</Text>
63+
<Text style={[this.getTextStyle(), this.getInitialStyle().buttonText]}>{this.props.children}</Text>
6464
</TouchableOpacity>
6565
}
6666

6767
else if(Array.isArray(this.props.children)) {
6868
if(this.props.children[0] && (typeof this.props.children[0] == "string" || this.props.children[0].type == undefined))
6969
return <TouchableOpacity {...this.prepareRootProps()} >
70-
<Text style={this.getTextStyle()}>{this.props.children[0]}</Text>
70+
<Text style={[this.getTextStyle(), this.getInitialStyle().buttonText]}>{this.props.children[0]}</Text>
7171
<Text>
7272
{this.props.children[1]}
7373
</Text>
@@ -78,7 +78,7 @@ export default class Button extends NativeBaseComponent {
7878
<Text>
7979
{this.props.children[0]}
8080
</Text>
81-
<Text style={this.getTextStyle()}>{this.props.children[1]}</Text>
81+
<Text style={[this.getTextStyle(), this.getInitialStyle().buttonText]}>{this.props.children[1]}</Text>
8282
</TouchableOpacity>
8383

8484
else

‎Components/Widgets/Container.js‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,56 @@
22
'use strict';
33

44
import React, {View } from 'react-native';
5+
import _ from 'lodash';
6+
import Header from './Header';
7+
import Content from './Content';
8+
import Footer from './Footer';
59
import NativeBaseComponent from '../Base/NativeBaseComponent';
610

711
export default class Container extends NativeBaseComponent {
12+
13+
renderHeader() {
14+
15+
return _.find(this.props.children, function(item) {
16+
if(item && item.type == Header) {
17+
return true;
18+
}
19+
});
20+
}
21+
renderContent() {
22+
return _.find(this.props.children, function(item) {
23+
if(item && item.type == Content) {
24+
return true;
25+
}
26+
});
27+
}
28+
renderFooter() {
29+
return _.find(this.props.children, function(item) {
30+
if(item && item.type == Footer) {
31+
return true;
32+
}
33+
});
34+
}
835
render() {
9-
return(
10-
<View style={{flex:1}}>{this.props.children}</View>
11-
);
36+
return(
37+
<View style={{flex:1}}>
38+
39+
<View>
40+
{this.renderHeader()}
41+
</View>
42+
43+
44+
<View style={{flex:1}}>
45+
{this.renderContent()}
46+
</View>
47+
48+
<View>
49+
{this.renderFooter()}
50+
</View>
51+
52+
</View>
53+
);
54+
1255
}
1356

1457
}

‎Components/Widgets/Footer.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* @flow */
2+
'use strict';
3+
4+
import React, { Text, View, TouchableOpacity, Component, Platform} from 'react-native';
5+
import NativeBaseComponent from '../Base/NativeBaseComponent';
6+
import navbarStyle from './../Styles/navbar.js';
7+
import _ from 'lodash';
8+
import computeProps from '../../Utils/computeProps';
9+
10+
export default class Footer extends NativeBaseComponent {
11+
getInitialStyle() {
12+
return {
13+
navbar: {
14+
backgroundColor: this.getTheme().toolbarDefaultBg,
15+
justifyContent: 'space-between',
16+
flexDirection: 'row',
17+
alignItems: 'center',
18+
padding: 15,
19+
shadowColor: '#000',
20+
shadowOffset: {width: 0, height: 2},
21+
shadowOpacity: 0.1,
22+
shadowRadius: 1.5,
23+
height: this.getTheme().footerHeight
24+
}
25+
}
26+
}
27+
28+
prepareRootProps() {
29+
30+
var defaultProps = {
31+
style: this.getInitialStyle().navbar
32+
};
33+
34+
return computeProps(this.props, defaultProps);
35+
36+
}
37+
38+
render() {
39+
40+
return(
41+
<View {...this.prepareRootProps()}>
42+
{ !Array.isArray(this.props.children) &&
43+
<View >
44+
{this.props.children}
45+
</View>}
46+
47+
{ Array.isArray(this.props.children) &&
48+
<View style={{flex:1}}>
49+
{this.props.children[0]}
50+
</View>}
51+
{ Array.isArray(this.props.children) &&
52+
<View style={{flex:5}}>
53+
{this.props.children[1]}
54+
</View>}
55+
{ Array.isArray(this.props.children) &&
56+
<View style={{flex:1}}>
57+
{this.props.children[2]}
58+
</View>}
59+
60+
</View>
61+
);
62+
}
63+
}
64+

Components/Widgets/Toolbar.js renamed to Components/Widgets/Header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import navbarStyle from './../Styles/navbar.js';
77
import _ from 'lodash';
88
import computeProps from '../../Utils/computeProps';
99

10-
export default class Toolbar extends NativeBaseComponent {
10+
export default class Header extends NativeBaseComponent {
1111
getInitialStyle() {
1212
return {
1313
navbar: {

‎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

‎index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/* @flow */
22
'use strict';
33

4-
import Toolbar from './Components/Widgets/Toolbar';
4+
import Header from './Components/Widgets/Header';
5+
import Footer from './Components/Widgets/Footer';
56
import Title from './Components/Widgets/Title';
67
import Container from './Components/Widgets/Container';
78
import Content from './Components/Widgets/Content';
@@ -19,7 +20,8 @@ import InputGroup from './Components/Widgets/InputGroup';
1920
import Icon from 'react-native-vector-icons/Ionicons';
2021

2122
module.exports = {
22-
Toolbar: Toolbar,
23+
Header: Header,
24+
Footer: Footer,
2325
Title: Title,
2426
Container: Container,
2527
Content: Content,

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
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",
1012
"react-native-checkbox": "~1.0.8"
1113
},
1214
"peerDependencies": {

0 commit comments

Comments
 (0)