Skip to content

Commit 63b8dde

Browse files
davidLeonardidavidLeonardi
committed
Merge pull request #9 from AnNOtis/convert-to-es6
Convert index.js and ./components to ES6
2 parents 7131b6a + 5a5fad7 commit 63b8dde

File tree

4 files changed

+222
-178
lines changed

4 files changed

+222
-178
lines changed

‎components/NavBarContainer.js‎

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,55 @@
1-
'use strict';
1+
import React from 'react-native';
22

3-
var React = require('react-native');
3+
import NavBarContent from './NavBarContent';
44

5-
var NavBarContent = require('./NavBarContent');
6-
7-
var {
5+
const {
86
StyleSheet,
9-
View
7+
View,
8+
Component,
109
} = React;
1110

12-
var NavBarContainer = React.createClass({
11+
class NavBarContainer extends Component {
12+
constructor(props) {
13+
super(props);
14+
15+
this.goBack = this.goBack.bind(this);
16+
this.goForward = this.goForward.bind(this);
17+
this.customAction = this.customAction.bind(this);
1318

14-
getInitialState: function() {
15-
return {
19+
this.state = {
1620
backButtonOpacity: 0,
17-
previousRoute: {} // Keep previousRoute for smooth transitions
21+
previousRoute: {}, // Keep previousRoute for smooth transitions
1822
};
19-
},
23+
}
2024

21-
componentWillReceiveProps: function(newProps) {
25+
componentWillReceiveProps(newProps) {
2226
if (this.props && this.props.currentRoute.index !== newProps.currentRoute.index) {
2327
this.setState({
24-
previousRoute: this.props.currentRoute
28+
previousRoute: this.props.currentRoute,
2529
});
2630
}
27-
},
31+
}
2832

29-
goBack: function() {
33+
goBack() {
3034
this.props.toBack(this.props.navigator);
31-
},
35+
}
3236

33-
goForward: function(route) {
37+
goForward(route) {
3438
this.props.toRoute(route, this.props.navigator);
35-
},
39+
}
3640

37-
customAction: function(opts) {
41+
customAction(opts) {
3842
this.props.customAction(opts);
39-
},
43+
}
4044

4145
// We render both the current and the previous navbar (for animation)
42-
render: function() {
43-
var trans,
44-
navbarStyle,
45-
navbarContent;
46+
render() {
47+
let trans;
48+
let navbarStyle;
49+
let navbarContent;
4650

4751
if (this.props.currentRoute.trans) {
48-
trans = {backgroundColor: 'transparent'};
52+
trans = { backgroundColor: 'transparent' };
4953
} else {
5054
trans = {};
5155
}
@@ -56,14 +60,15 @@ var NavBarContainer = React.createClass({
5660
navbarStyle = styles.navbarContainer;
5761
}
5862

59-
if(this.props.currentRoute.trans) {
63+
if (this.props.currentRoute.trans) {
6064
navbarContent = (
6165
<NavBarContent
62-
route={this.state.previousRoute}
63-
backButtonComponent={this.props.backButtonComponent}
64-
rightCorner={this.props.rightCorner}
65-
titleStyle={this.props.titleStyle}
66-
willDisappear="true"></NavBarContent>
66+
route={this.state.previousRoute}
67+
backButtonComponent={this.props.backButtonComponent}
68+
rightCorner={this.props.rightCorner}
69+
titleStyle={this.props.titleStyle}
70+
willDisappear="true"
71+
/>
6772
);
6873
} else if (this.props.currentRoute.hideNavigationBar) {
6974
navbarContent = (
@@ -79,8 +84,8 @@ var NavBarContainer = React.createClass({
7984
leftProps={this.props.leftProps}
8085
rightProps={this.props.rightProps}
8186
titleProps={this.props.titleProps}
82-
customAction={this.customAction}>
83-
</NavBarContent>
87+
customAction={this.customAction}
88+
/>
8489
);
8590
} else {
8691
navbarContent = (
@@ -96,8 +101,8 @@ var NavBarContainer = React.createClass({
96101
leftProps={this.props.leftProps}
97102
rightProps={this.props.rightProps}
98103
titleProps={this.props.titleProps}
99-
customAction={this.customAction}>
100-
</NavBarContent>
104+
customAction={this.customAction}
105+
/>
101106
);
102107
}
103108

@@ -107,23 +112,23 @@ var NavBarContainer = React.createClass({
107112
</View>
108113
);
109114
}
110-
});
115+
}
111116

112-
var styles = StyleSheet.create({
117+
const styles = StyleSheet.create({
113118
navbarContainer: {
114119
position: 'absolute',
115120
top: 0,
116121
left: 0,
117122
right: 0,
118-
height: 64
123+
height: 64,
119124
},
120125
navbarContainerHidden: {
121126
position: 'absolute',
122127
top: -64,
123128
left: 0,
124129
right: 0,
125-
height: 64
126-
}
130+
height: 64,
131+
},
127132
});
128133

129-
module.exports = NavBarContainer;
134+
export default NavBarContainer;

‎components/NavBarContent.js‎

Lines changed: 82 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
1-
'use strict';
1+
import React from 'react-native';
2+
import NavButton from './NavButton';
23

3-
var React = require('react-native');
4-
var NavButton = require('./NavButton');
5-
6-
var {
4+
const {
75
StyleSheet,
86
Text,
97
View,
108
Animated,
11-
Easing
9+
Easing,
10+
Component,
1211
} = React;
1312

14-
var NavBarContent = React.createClass({
13+
class NavBarContent extends Component {
14+
constructor(props) {
15+
super(props);
16+
17+
this.goBack = this.goBack.bind(this);
18+
this.goForward = this.goForward.bind(this);
19+
this.customAction = this.customAction.bind(this);
1520

16-
getInitialState: function() {
17-
return {
18-
opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0)
21+
this.state = {
22+
opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0),
1923
};
20-
},
24+
}
2125

22-
componentWillReceiveProps: function(newProps) {
26+
componentWillReceiveProps(newProps) {
2327
if (newProps.route !== this.props.route) {
2428
this.state.opacity.setValue(this.props.willDisappear ? 1 : 0);
2529

@@ -30,43 +34,44 @@ var NavBarContent = React.createClass({
3034
fromValue: this.props.willDisappear ? 1 : 0,
3135
toValue: this.props.willDisappear ? 0 : 1,
3236
duration: 300,
33-
easing: Easing.easeOutQuad
37+
easing: Easing.easeOutQuad,
3438
}
3539
).start();
3640
}, 0);
3741
}
38-
},
42+
}
3943

40-
goBack: function() {
44+
goBack() {
4145
if (!this.props.willDisappear) {
4246
this.props.goBack();
4347
}
44-
},
48+
}
4549

46-
goForward: function(route) {
50+
goForward(route) {
4751
this.props.goForward(route);
48-
},
52+
}
4953

50-
customAction: function(opts) {
54+
customAction(opts) {
5155
this.props.customAction(opts);
52-
},
56+
}
5357

5458
render() {
55-
var transitionStyle = {
56-
opacity: this.state.opacity,
57-
},
58-
leftCorner,
59-
LeftCorner,
60-
rightCorner,
61-
RightCorner,
62-
titleComponent,
63-
leftCornerContent,
64-
rightCornerContent,
65-
titleContent,
66-
TitleComponent,
67-
trans,
68-
width,
69-
color;
59+
const transitionStyle = {
60+
opacity: this.state.opacity,
61+
};
62+
63+
let leftCorner;
64+
let LeftCorner;
65+
let rightCorner;
66+
let RightCorner;
67+
let titleComponent;
68+
let leftCornerContent;
69+
let rightCornerContent;
70+
let titleContent;
71+
let TitleComponent;
72+
let trans;
73+
let width;
74+
let color;
7075

7176
/**
7277
* Set leftCorner
@@ -75,9 +80,18 @@ var NavBarContent = React.createClass({
7580

7681
if (this.props.route.leftCorner) {
7782
LeftCorner = this.props.route.leftCorner;
78-
leftCornerContent = <LeftCorner toRoute={this.goForward} customAction={this.customAction} {...this.props.leftProps} {...this.props.route.leftCornerProps} />;
83+
leftCornerContent = (
84+
<LeftCorner
85+
toRoute={this.goForward}
86+
customAction={this.customAction}
87+
{...this.props.leftProps}
88+
{...this.props.route.leftCornerProps}
89+
/>
90+
);
7991
} else if (this.props.route.index > 0) {
80-
leftCornerContent = <NavButton onPress={this.goBack} backButtonComponent={this.props.backButtonComponent} />;
92+
leftCornerContent = (
93+
<NavButton onPress={this.goBack} backButtonComponent={this.props.backButtonComponent} />
94+
);
8195
}
8296

8397
leftCorner = (
@@ -92,7 +106,14 @@ var NavBarContent = React.createClass({
92106

93107
if (this.props.route.rightCorner || this.props.rightCorner) {
94108
RightCorner = this.props.route.rightCorner || this.props.rightCorner;
95-
rightCornerContent = <RightCorner toRoute={this.goForward} customAction={this.customAction} {...this.props.rightProps} {...this.props.route.rightCornerProps} />;
109+
rightCornerContent = (
110+
<RightCorner
111+
toRoute={this.goForward}
112+
customAction={this.customAction}
113+
{...this.props.rightProps}
114+
{...this.props.route.rightCornerProps}
115+
/>
116+
);
96117
}
97118

98119
rightCorner = (
@@ -105,7 +126,6 @@ var NavBarContent = React.createClass({
105126
* Set title message
106127
*/
107128

108-
109129
if (this.props.route.titleComponent) {
110130
TitleComponent = this.props.route.titleComponent;
111131
titleContent = <TitleComponent {...this.props.titleProps} />;
@@ -118,31 +138,41 @@ var NavBarContent = React.createClass({
118138
}
119139

120140
titleComponent = (
121-
<View style={{flex: 3}}>
141+
<View style={{ flex: 3 }}>
122142
{titleContent}
123143
</View>
124144
);
125145

126-
if(this.props.route.trans === true)
146+
if (this.props.route.trans === true) {
127147
trans = { backgroundColor: 'transparent', borderBottomWidth: 0 };
128-
else
148+
} else {
129149
trans = {};
150+
}
130151

131152
width = this.props.borderBottomWidth ? this.props.borderBottomWidth : 0;
132153
color = this.props.borderColor ? this.props.borderColor : null;
133154

134155
return (
135-
<Animated.View style={[styles.navbar, transitionStyle, this.props.route.headerStyle,{borderBottomWidth: width, borderColor: color}, trans]}>
156+
<Animated.View
157+
style={
158+
[
159+
styles.navbar,
160+
transitionStyle,
161+
this.props.route.headerStyle,
162+
{ borderBottomWidth: width, borderColor: color },
163+
trans,
164+
]
165+
}
166+
>
136167
{leftCorner}
137168
{titleComponent}
138169
{rightCorner}
139170
</Animated.View>
140171
);
141172
}
142-
});
143-
173+
}
144174

145-
var styles = StyleSheet.create({
175+
const styles = StyleSheet.create({
146176
navbar: {
147177
position: 'absolute',
148178
top: 0,
@@ -152,7 +182,7 @@ var styles = StyleSheet.create({
152182
justifyContent: 'center',
153183
alignItems: 'center',
154184
flexDirection: 'row',
155-
paddingTop: 13
185+
paddingTop: 13,
156186
},
157187
navbarText: {
158188
color: 'white',
@@ -169,18 +199,17 @@ var styles = StyleSheet.create({
169199
},
170200

171201
alignLeft: {
172-
alignItems: 'flex-start'
202+
alignItems: 'flex-start',
173203
},
174204
alignRight: {
175-
alignItems: 'flex-end'
205+
alignItems: 'flex-end',
176206
},
177207
buttonTextLeft: {
178208
marginLeft: 10,
179209
},
180210
buttonTextRight: {
181-
marginRight: 10
182-
}
211+
marginRight: 10,
212+
},
183213
});
184214

185-
186-
module.exports = NavBarContent;
215+
export default NavBarContent;

0 commit comments

Comments
 (0)