Skip to content

Commit

Permalink
Cleaning Up, Refactoring, RightButton creator
Browse files Browse the repository at this point in the history
  • Loading branch information
sallar committed Jun 19, 2015
1 parent 9d34b2a commit 3fa456b
Show file tree
Hide file tree
Showing 9 changed files with 271 additions and 280 deletions.
44 changes: 22 additions & 22 deletions iOS/main.jsbundle

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions utils/Styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ var variables = {
};

module.exports = {
Variables : variables,
Stylesheet : require('./styles/Base')(variables),
NavigatorStyle : require('./styles/Navigator')(variables),
ListStyles : require('./styles/List')(variables),
VenuesStyles : require('./styles/Venues')(variables),
VenueStyles : require('./styles/Venue')(variables),
AboutStyles : require('./styles/About')(variables),
LoadingStyles : require('./styles/Other').Loading,
IndicatorStyles: require('./styles/Other').Indicator
Variables : variables,
Stylesheet : require('./styles/Base')(variables),
NavigatorStyles : require('./styles/Navigator')(variables),
ListStyles : require('./styles/List')(variables),
VenuesStyles : require('./styles/Venues')(variables),
VenueStyles : require('./styles/Venue')(variables),
AboutStyles : require('./styles/About')(variables),
LoadingStyles : require('./styles/Other').Loading,
IndicatorStyles : require('./styles/Other').Indicator
};
4 changes: 2 additions & 2 deletions utils/styles/Navigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ module.exports = ((variables) => {
container: {
flex: 1,
},
header: {
backgroundColor: variables.brandColor
navBar: {
backgroundColor: variables.brandColor,
},
scene: {
backgroundColor: '#F5F7FA',
Expand Down
6 changes: 3 additions & 3 deletions views/BackButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
'use strict';

var React = require('react-native'),
{Stylesheet, NavigatorStyle} = require('../utils/Styles');
{Stylesheet, NavigatorStyles} = require('../utils/Styles');

var {
Component,
Expand All @@ -21,8 +21,8 @@ module.exports = React.createClass({
return(
<Text style={
[Stylesheet.text,
NavigatorStyle.navbarText,
NavigatorStyle.backButtonText]
NavigatorStyles.navbarText,
NavigatorStyles.backButtonText]
}>Back</Text>
);
}
Expand Down
106 changes: 23 additions & 83 deletions views/Navigator.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
* @author Sallar Kaboli <[email protected]>
* @date 19.06.2015
*/
'use strict';


var React = require('react-native');
var {
PixelRatio,
Navigator,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
TouchableOpacity,
View,
Image,
} = React;
PixelRatio,
Navigator,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
TouchableOpacity,
View,
Image
} = React;

var cssVar = require('cssVar');
var MapView = require('./Map');
var Icon = require('MaterialIcons');
var {Variables, NavigatorStyle} = require('../utils/Styles');
var {Variables, NavigatorStyles} = require('../utils/Styles');

var NavigationBarRouteMapper = {

Expand All @@ -43,8 +31,8 @@ var NavigationBarRouteMapper = {
return (
<TouchableOpacity
onPress={() => navigator.pop()}>
<View style={NavigatorStyle.navBarLeftButton}>
<Text style={[NavigatorStyle.navBarText, NavigatorStyle.navBarButtonText]}>
<View style={NavigatorStyles.navBarLeftButton}>
<Text style={[NavigatorStyles.navBarText, NavigatorStyles.navBarButtonText]}>
{'Back' || previousRoute.title}
</Text>
</View>
Expand All @@ -53,19 +41,8 @@ var NavigationBarRouteMapper = {
},

RightButton: function(route, navigator, index, navState) {
if(typeof route.data === 'object' && route.title !== 'Map') {
return (
<TouchableOpacity
onPress={() => navigator.push({
title: 'Map',
component: MapView,
data: route.data.venue
})}>
<View style={NavigatorStyle.navBarRightButton}>
<Icon name="map" size={24} style={[NavigatorStyle.navBarText, NavigatorStyle.navBarButtonText]} />
</View>
</TouchableOpacity>
);
if(typeof route.rightButton !== void 0) {
return route.rightButton;
}
else {
return (<View />);
Expand All @@ -75,30 +52,24 @@ var NavigationBarRouteMapper = {
Title: function(route, navigator, index, navState) {
if(typeof route.imageTitle !== "undefined") {
return (
<Image source={require('image!logo')} style={NavigatorStyle.navbarLogo} />
<Image source={require('image!logo')} style={NavigatorStyles.navbarLogo} />
);
}
return (
<Text style={[NavigatorStyle.navBarText, NavigatorStyle.navBarTitleText]}>
<Text style={[NavigatorStyles.navBarText, NavigatorStyles.navBarTitleText]}>
{route.title}
</Text>
);
},

};

function newRandomRoute() {
return {
title: '#' + Math.ceil(Math.random() * 1000),
};
}

var NavigationBarSample = React.createClass({
var NavigationBarView = React.createClass({

renderScene: function(route, navigator) {
var Component = route.component;
return (
<View style={NavigatorStyle.scene}>
<View style={NavigatorStyles.scene}>
<Component nav={navigator} data={route.data || {}} />
</View>
)
Expand All @@ -108,7 +79,6 @@ var NavigationBarSample = React.createClass({
return (
<Navigator
debugOverlay={false}
style={styles.appContainer}
initialRoute={{
title: this.props.title,
imageTitle: true,
Expand All @@ -118,7 +88,7 @@ var NavigationBarSample = React.createClass({
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
style={NavigatorStyles.navBar}
/>
}
/>
Expand All @@ -127,34 +97,4 @@ var NavigationBarSample = React.createClass({

});

var styles = StyleSheet.create({
messageText: {
fontSize: 17,
fontWeight: '500',
padding: 15,
marginTop: 50,
marginLeft: 15,
},
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomColor: '#CDCDCD',
},
buttonText: {
fontSize: 17,
fontWeight: '500',
},
navBar: {
backgroundColor: Variables.brandColor,
},


scene: {
flex: 1,
paddingTop: 20,
backgroundColor: '#EAEAEA',
},
});

module.exports = NavigationBarSample;
module.exports = NavigationBarView;
39 changes: 39 additions & 0 deletions views/RightButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* @author Sallar Kaboli <[email protected]>
* @date 19.06.2015
*/
'use strict';

var React = require('react-native'),
Icon = require('MaterialIcons'),
{Stylesheet, NavigatorStyles} = require('../utils/Styles');

var {
Component,
View,
TouchableOpacity
} = React;

/**
* Right Button
*/
var RightButton = React.createClass({
render() {
return (
<TouchableOpacity
onPress={this.props.onPress}>
<View style={NavigatorStyles.navBarRightButton}>
<Icon name={this.props.icon} size={24} style={[NavigatorStyles.navBarText, NavigatorStyles.navBarButtonText]} />
</View>
</TouchableOpacity>
)
}
});

module.exports = function(data) {
return <RightButton icon={data.icon} onPress={() => data.navigator.push({
title: data.title,
component: data.component,
data: data.data
})} />;
};
6 changes: 3 additions & 3 deletions views/Title.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
'use strict';

var React = require('react-native'),
{Stylesheet, NavigatorStyle} = require('../utils/Styles');
{Stylesheet, NavigatorStyles} = require('../utils/Styles');

var {
Component,
Expand All @@ -20,11 +20,11 @@ module.exports = React.createClass({
render() {
if( this.props.text == 'Venues' ) {
return(
<Image source={require('image!logo')} style={NavigatorStyle.navbarLogo} />
<Image source={require('image!logo')} style={NavigatorStyles.navbarLogo} />
);
}
return(
<Text style={[Stylesheet.text, NavigatorStyle.navbarText]}>{this.props.text}</Text>
<Text style={[Stylesheet.text, NavigatorStyles.navbarText]}>{this.props.text}</Text>
);
}
});
Loading

0 comments on commit 3fa456b

Please sign in to comment.