Skip to content

Convert index.js and ./components to ES6 #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 24, 2016
Merged

Convert index.js and ./components to ES6 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
49a6bb1
Convert index.js to es6 and follow eslint-config-airbnb
AnNOtis Jan 24, 2016
ba1ee5f
Fix typo
AnNOtis Jan 24, 2016
a5b2f5b
Fix lint rule "no-shadow" and "no-param-reassign"
AnNOtis Jan 24, 2016
0e2f856
Convert NavBarContainer to ES6
AnNOtis Jan 24, 2016
d3c0307
Convert NavBarContent to ES6
AnNOtis Jan 24, 2016
5a5fad7
Convert NavButton to ES6
AnNOtis Jan 24, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 46 additions & 41 deletions components/NavBarContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,55 @@
'use strict';
import React from 'react-native';

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

var NavBarContent = require('./NavBarContent');

var {
const {
StyleSheet,
View
View,
Component,
} = React;

var NavBarContainer = React.createClass({
class NavBarContainer extends Component {
constructor(props) {
super(props);

this.goBack = this.goBack.bind(this);
this.goForward = this.goForward.bind(this);
this.customAction = this.customAction.bind(this);

getInitialState: function() {
return {
this.state = {
backButtonOpacity: 0,
previousRoute: {} // Keep previousRoute for smooth transitions
previousRoute: {}, // Keep previousRoute for smooth transitions
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

};
},
}

componentWillReceiveProps: function(newProps) {
componentWillReceiveProps(newProps) {
if (this.props && this.props.currentRoute.index !== newProps.currentRoute.index) {
this.setState({
previousRoute: this.props.currentRoute
previousRoute: this.props.currentRoute,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

});
}
},
}

goBack: function() {
goBack() {
this.props.toBack(this.props.navigator);
},
}

goForward: function(route) {
goForward(route) {
this.props.toRoute(route, this.props.navigator);
},
}

customAction: function(opts) {
customAction(opts) {
this.props.customAction(opts);
},
}

// We render both the current and the previous navbar (for animation)
render: function() {
var trans,
navbarStyle,
navbarContent;
render() {
let trans;
let navbarStyle;
let navbarContent;

if (this.props.currentRoute.trans) {
trans = {backgroundColor: 'transparent'};
trans = { backgroundColor: 'transparent' };
} else {
trans = {};
}
Expand All @@ -56,14 +60,15 @@ var NavBarContainer = React.createClass({
navbarStyle = styles.navbarContainer;
}

if(this.props.currentRoute.trans) {
if (this.props.currentRoute.trans) {
navbarContent = (
<NavBarContent
route={this.state.previousRoute}
backButtonComponent={this.props.backButtonComponent}
rightCorner={this.props.rightCorner}
titleStyle={this.props.titleStyle}
willDisappear="true"></NavBarContent>
route={this.state.previousRoute}
backButtonComponent={this.props.backButtonComponent}
rightCorner={this.props.rightCorner}
titleStyle={this.props.titleStyle}
willDisappear="true"
/>
);
} else if (this.props.currentRoute.hideNavigationBar) {
navbarContent = (
Expand All @@ -79,8 +84,8 @@ var NavBarContainer = React.createClass({
leftProps={this.props.leftProps}
rightProps={this.props.rightProps}
titleProps={this.props.titleProps}
customAction={this.customAction}>
</NavBarContent>
customAction={this.customAction}
/>
);
} else {
navbarContent = (
Expand All @@ -96,8 +101,8 @@ var NavBarContainer = React.createClass({
leftProps={this.props.leftProps}
rightProps={this.props.rightProps}
titleProps={this.props.titleProps}
customAction={this.customAction}>
</NavBarContent>
customAction={this.customAction}
/>
);
}

Expand All @@ -107,23 +112,23 @@ var NavBarContainer = React.createClass({
</View>
);
}
});
}

var styles = StyleSheet.create({
const styles = StyleSheet.create({
navbarContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: 64
height: 64,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

},
navbarContainerHidden: {
position: 'absolute',
top: -64,
left: 0,
right: 0,
height: 64
}
height: 64,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

},
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

});

module.exports = NavBarContainer;
export default NavBarContainer;
135 changes: 82 additions & 53 deletions components/NavBarContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
'use strict';
import React from 'react-native';
import NavButton from './NavButton';

var React = require('react-native');
var NavButton = require('./NavButton');

var {
const {
StyleSheet,
Text,
View,
Animated,
Easing
Easing,
Component,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

} = React;

var NavBarContent = React.createClass({
class NavBarContent extends Component {
constructor(props) {
super(props);

this.goBack = this.goBack.bind(this);
this.goForward = this.goForward.bind(this);
this.customAction = this.customAction.bind(this);

getInitialState: function() {
return {
opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0)
this.state = {
opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0),
};
},
}

componentWillReceiveProps: function(newProps) {
componentWillReceiveProps(newProps) {
if (newProps.route !== this.props.route) {
this.state.opacity.setValue(this.props.willDisappear ? 1 : 0);

Expand All @@ -30,43 +34,44 @@ var NavBarContent = React.createClass({
fromValue: this.props.willDisappear ? 1 : 0,
toValue: this.props.willDisappear ? 0 : 1,
duration: 300,
easing: Easing.easeOutQuad
easing: Easing.easeOutQuad,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

}
).start();
}, 0);
}
},
}

goBack: function() {
goBack() {
if (!this.props.willDisappear) {
this.props.goBack();
}
},
}

goForward: function(route) {
goForward(route) {
this.props.goForward(route);
},
}

customAction: function(opts) {
customAction(opts) {
this.props.customAction(opts);
},
}

render() {
var transitionStyle = {
opacity: this.state.opacity,
},
leftCorner,
LeftCorner,
rightCorner,
RightCorner,
titleComponent,
leftCornerContent,
rightCornerContent,
titleContent,
TitleComponent,
trans,
width,
color;
const transitionStyle = {
opacity: this.state.opacity,
};

let leftCorner;
let LeftCorner;
let rightCorner;
let RightCorner;
let titleComponent;
let leftCornerContent;
let rightCornerContent;
let titleContent;
let TitleComponent;
let trans;
let width;
let color;

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

if (this.props.route.leftCorner) {
LeftCorner = this.props.route.leftCorner;
leftCornerContent = <LeftCorner toRoute={this.goForward} customAction={this.customAction} {...this.props.leftProps} {...this.props.route.leftCornerProps} />;
leftCornerContent = (
<LeftCorner
toRoute={this.goForward}
customAction={this.customAction}
{...this.props.leftProps}
{...this.props.route.leftCornerProps}
/>
);
} else if (this.props.route.index > 0) {
leftCornerContent = <NavButton onPress={this.goBack} backButtonComponent={this.props.backButtonComponent} />;
leftCornerContent = (
<NavButton onPress={this.goBack} backButtonComponent={this.props.backButtonComponent} />
);
}

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

if (this.props.route.rightCorner || this.props.rightCorner) {
RightCorner = this.props.route.rightCorner || this.props.rightCorner;
rightCornerContent = <RightCorner toRoute={this.goForward} customAction={this.customAction} {...this.props.rightProps} {...this.props.route.rightCornerProps} />;
rightCornerContent = (
<RightCorner
toRoute={this.goForward}
customAction={this.customAction}
{...this.props.rightProps}
{...this.props.route.rightCornerProps}
/>
);
}

rightCorner = (
Expand All @@ -105,7 +126,6 @@ var NavBarContent = React.createClass({
* Set title message
*/


if (this.props.route.titleComponent) {
TitleComponent = this.props.route.titleComponent;
titleContent = <TitleComponent {...this.props.titleProps} />;
Expand All @@ -118,31 +138,41 @@ var NavBarContent = React.createClass({
}

titleComponent = (
<View style={{flex: 3}}>
<View style={{ flex: 3 }}>
{titleContent}
</View>
);

if(this.props.route.trans === true)
if (this.props.route.trans === true) {
trans = { backgroundColor: 'transparent', borderBottomWidth: 0 };
else
} else {
trans = {};
}

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

return (
<Animated.View style={[styles.navbar, transitionStyle, this.props.route.headerStyle,{borderBottomWidth: width, borderColor: color}, trans]}>
<Animated.View
style={
[
styles.navbar,
transitionStyle,
this.props.route.headerStyle,
{ borderBottomWidth: width, borderColor: color },
trans,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

]
}
>
{leftCorner}
{titleComponent}
{rightCorner}
</Animated.View>
);
}
});

}

var styles = StyleSheet.create({
const styles = StyleSheet.create({
navbar: {
position: 'absolute',
top: 0,
Expand All @@ -152,7 +182,7 @@ var styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
paddingTop: 13
paddingTop: 13,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

},
navbarText: {
color: 'white',
Expand All @@ -169,18 +199,17 @@ var styles = StyleSheet.create({
},

alignLeft: {
alignItems: 'flex-start'
alignItems: 'flex-start',
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

},
alignRight: {
alignItems: 'flex-end'
alignItems: 'flex-end',
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

},
buttonTextLeft: {
marginLeft: 10,
},
buttonTextRight: {
marginRight: 10
}
marginRight: 10,
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

},
Copy link
Contributor

@davidLeonardi davidLeonardi Jan 24, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma, please remove

});


module.exports = NavBarContent;
export default NavBarContent;
Loading