Skip to content

Commit 3c291f0

Browse files
bleonardbleonard
authored
Merge pull request taskrabbit#37 from taskrabbit/navigation
Use NavigatorExperimental
2 parents 5f918a8 + 23b0c3e commit 3c291f0

17 files changed

+200
-165
lines changed

‎App/Actions/AppActions.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,6 @@ var AppActions = {
6565
navItem.targetPath = currentRoute.routePath;
6666
this.launchRelativeItem(currentRoute, navItem);
6767
},
68-
69-
goBack: function(navigator) {
70-
var current = navigator.getCurrentRoutes();
71-
var previous = current[0];
72-
if (current.length > 2) {
73-
previous = current[current.length-2];
74-
}
75-
AppActions.launchRoutePath(previous.routePath);
76-
}
7768

7869
};
7970

‎App/Components/AutoScaleText.js

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ class AutoScaleText extends React.Component {
1212
static propTypes = {
1313
...Text.propTypes,
1414
maxFontSize: React.PropTypes.number.isRequired,
15-
maxHeight: React.PropTypes.number.isRequired,
15+
//maxHeight: React.PropTypes.number.isRequired,
1616
color: React.PropTypes.string,
17-
style: React.PropTypes.oneOfType([
18-
Text.propTypes.style,
19-
React.PropTypes.shape({
20-
width: React.PropTypes.number,
21-
}),
22-
]).isRequired,
17+
//style: React.PropTypes.oneOfType([
18+
// React.PropTypes.number,
19+
// React.PropTypes.shape({
20+
// width: React.PropTypes.number,
21+
// }),
22+
//]),
2323
};
2424

2525
static defaultProps = {
@@ -31,17 +31,21 @@ class AutoScaleText extends React.Component {
3131

3232
this.state = {
3333
fontSize: props.maxFontSize,
34-
finished: false,
34+
finished: null,
3535
};
3636

37-
this.visible = true;
37+
this.visible = true
3838
}
3939

4040
determineFontSize = () => {
4141
UIManager.measure(ReactNative.findNodeHandle(this.refs.textView), (x, y, w, h, px, py) => {
4242
if (!this.visible) return;
4343

44-
if (h > this.props.maxHeight) {
44+
var tooBig = this.props.maxHeight && h > this.props.maxHeight;
45+
if (!tooBig) {
46+
tooBig = this.props.maxWidth && w > this.props.maxWidth;
47+
}
48+
if (tooBig) {
4549
this.setState({
4650
fontSize: this.state.fontSize - 0.5,
4751
});
@@ -61,13 +65,14 @@ class AutoScaleText extends React.Component {
6165
return (
6266
<Text
6367
ref='textView'
64-
onLayout={this.determineFontSize}
68+
//onLayout={this.determineFontSize}
69+
allowFontScaling={false}
6570
{...this.props}
6671
style={[
6772
this.props.style,
6873
{
6974
fontSize: this.state.fontSize,
70-
color: this.state.finished ? this.props.color : 'transparent',
75+
//color: this.state.finished ? this.props.color || 'black' : 'transparent',
7176
},
7277
]}
7378
>

‎App/Components/SimpleList.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ var SimpleList = React.createClass({
1313
renderRow: function(item, sectionId, rowId) {
1414
var passAlong = {};
1515
if (this.props.currentRoute) passAlong.currentRoute = this.props.currentRoute;
16-
if (this.props.navigator) passAlong.navigator = this.props.navigator;
16+
if (this.props.navigation) passAlong.navigation = this.props.navigation;
1717
if (this.props.nextIcon) passAlong.nextIcon = this.props.nextIcon;
1818
if (this.props.noTap) passAlong.noTap = this.props.noTap;
1919

‎App/Mixins/NavigationListener.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ var NavigationListener = {
2323

2424
componentWillMount: function() {
2525
this._hasNavigationFocus = false;
26-
this._onDidFocusNavigationSub = this.props.navigator.navigationContext.addListener('didfocus', this._onDidFocusNavigation)
27-
this._onWillFocusNavigationSub = this.props.navigator.navigationContext.addListener('willfocus', this._onWillFocusNavigation)
26+
// TODO: this._onDidFocusNavigationSub = this.props.navigator.navigationContext.addListener('didfocus', this._onDidFocusNavigation)
27+
// TODO: this._onWillFocusNavigationSub = this.props.navigator.navigationContext.addListener('willfocus', this._onWillFocusNavigation)
2828
},
2929

3030
componentWillUnmount: function() {

‎App/Navigation/NavigationBar.js

Lines changed: 34 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import React from 'react';
22
import {
3-
Navigator,
43
StyleSheet,
5-
TouchableOpacity,
64
View,
5+
NavigationExperimental,
76
} from 'react-native';
87

98
import cssVar from '../Lib/cssVar';
109

11-
import Back from '../Platform/Back';
12-
import NavigatorNavigationBarStyles from '../Platform/NavigatorNavigationBarStyles';
13-
import NavigationBarRouteMapper from '../Navigation/NavigationBarRouteMapper';
10+
import Back from '../Platform/Back';
11+
import NavigationHeader from '../Navigation/NavigationHeader';
12+
import Navigator from '../Navigation/Navigator';
13+
14+
const {
15+
CardStack: NavigationCardStack,
16+
} = NavigationExperimental;
1417

1518
var stacksEqual = function(one, two, length) {
1619
if (one.length < length) return false;
@@ -33,7 +36,7 @@ var Container = React.createClass({
3336
ref={this.props.onLoadedScene}
3437
>
3538
<Component ref="mainComponent"
36-
navigator={this.props.navigator}
39+
navigation={this.props.navigation}
3740
currentRoute={this.props.route}
3841
{...this.props.route.passProps}
3942
/>
@@ -42,21 +45,32 @@ var Container = React.createClass({
4245
}
4346
});
4447

45-
const routeMapper = new NavigationBarRouteMapper();
46-
4748
var NavigationBar = {
4849
getInitialState: function() {
4950
return {};
5051
},
5152

52-
renderScene: function(route, navigator) {
53+
renderHeader: function(sceneProps) {
54+
if (this.props.navBarHidden) {
55+
//return <View style={{height: 0}} />
56+
return null;
57+
}
58+
59+
return (
60+
<NavigationHeader {...sceneProps} navigation={this.navigation} />
61+
);
62+
63+
},
64+
65+
renderScene: function(sceneProps) {
66+
var route = sceneProps.scene.route;
5367
console.log('renderScene: ' + route.routePath);
5468

5569
return(
5670
<Container
5771
ref={this.onLoadedScene}
5872
route={route}
59-
navigator={navigator}
73+
navigation={this.navigation}
6074
{...this.props}
6175
/>
6276
);
@@ -72,76 +86,24 @@ var NavigationBar = {
7286
}
7387
},
7488

75-
componentDidUpdate: function(prevProps, prevState) {
76-
var current = this.refs.navigator.getCurrentRoutes();
77-
78-
if (!current) return; // otherwise initial
79-
80-
var next = this.props.routeStack.path;
81-
var currentRoute = current[current.length - 1];
82-
var currentPath = currentRoute.routePath;
83-
var nextRoute = next[next.length - 1];
84-
var nextPath = nextRoute.routePath;
85-
86-
if(stacksEqual(current, next, current.length)
87-
&& next[next.length-2]
88-
&& next[next.length-2].routePath === currentPath) {
89-
// simple push
90-
this.refs.navigator.push(nextRoute);
91-
}
92-
else if(stacksEqual(current, next, next.length)
93-
&& current[current.length-2]
94-
&& current[current.length-2].routePath === nextPath) {
95-
// simple pop
96-
this.refs.navigator.pop();
97-
}
98-
else if(current.length === next.length
99-
&& stacksEqual(current, next, next.length-1)) {
100-
// switching out last one
101-
if (currentRoute.component === nextRoute.component
102-
&& this._currentComponent
103-
&& this._currentComponent.setNavigatorRoute) {
104-
// switch out current one, same type
105-
if (this._currentComponent.props.currentRoute) {
106-
// update it in place
107-
this._currentComponent.props.currentRoute = currentRoute;
108-
}
109-
this._currentComponent.setNavigatorRoute(nextRoute);
110-
}
111-
else {
112-
this.refs.navigator.replace(nextRoute);
113-
}
114-
}
115-
else {
116-
// something more complicated
117-
this.refs.navigator.immediatelyResetRouteStack(this.props.routeStack.path);
118-
}
119-
},
120-
121-
renderNavBar: function() {
122-
if (this.props.navBarHidden) return null;
123-
124-
return (
125-
<Navigator.NavigationBar
126-
routeMapper={routeMapper}
127-
style={styles.navBar}
128-
/>
129-
);
89+
componentWillMount: function() {
90+
this.navigation = new Navigator();
13091
},
13192

13293
componentDidMount: function() {
133-
Back.setNavigator(this.refs.navigator);
94+
this.navigation.setStack(this.refs.stack);
95+
Back.setNavigator(this.navigation);
13496
},
13597

13698
render: function() {
13799
return (
138100
<View style={styles.appContainer}>
139-
<Navigator
140-
ref="navigator"
101+
102+
<NavigationCardStack
103+
ref="stack"
104+
navigationState={this.props.navigationState}
141105
renderScene={this.renderScene}
142-
navBarHidden={this.props.navBarHidden}
143-
initialRouteStack={this.props.routeStack.path}
144-
navigationBar={this.renderNavBar()}
106+
renderHeader={this.renderHeader}
145107
/>
146108
</View>
147109
);
@@ -154,16 +116,14 @@ var styles = StyleSheet.create({
154116
},
155117
navBar: {
156118
backgroundColor: cssVar('blue50'),
157-
height: NavigatorNavigationBarStyles.General.TotalNavHeight
158119
},
159120
scene: {
160121
flex: 1,
161-
marginTop: NavigatorNavigationBarStyles.General.TotalNavHeight,
162122
backgroundColor: cssVar('gray5'),
163123
},
164124
sceneHidden: {
165125
marginTop: 0
166-
}
126+
},
167127
});
168128

169129

‎App/Navigation/NavigationBarRouteMapper.js

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎App/Navigation/NavigationButton.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,12 @@ var NavigationButton = React.createClass({
8585
return null;
8686
}
8787

88-
var backLabel = route.navBack || {icon: 'back'}; //{icon: 'caret-left-semi'};
89-
return this.makeButton(backLabel, styles.navBarLeftButton, this.goBack);
88+
var backLabel = route.navBack || {label: 'back'}; //{icon: 'caret-left-semi'};
89+
return this.makeButton(backLabel, styles.navBarLeftButton, this.sendBack);
9090
},
9191

92-
goBack: function() {
93-
AppActions.goBack(this.props.navigator);
92+
sendBack: function() {
93+
this.props.navigation.back();
9494
},
9595

9696
render: function() {

‎App/Navigation/NavigationHeader.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import {
3+
NavigationExperimental,
4+
StyleSheet,
5+
} from 'react-native';
6+
7+
import cssVar from '../Lib/cssVar';
8+
9+
import NavigationTitle from '../Navigation/NavigationTitle';
10+
import NavigationButton from '../Navigation/NavigationButton';
11+
12+
const {
13+
Header: NavigationHeader,
14+
} = NavigationExperimental;
15+
16+
var _NavigationHeader = React.createClass({
17+
renderTitle: function (props) {
18+
var route = props.scene.route;
19+
return <NavigationTitle route={route} />;
20+
},
21+
22+
renderLeft: function(props) {
23+
var route = props.scene.route;
24+
var index = props.scene.index;
25+
return <NavigationButton route={route} index={index} navigation={this.props.navigation} direction="left" />
26+
},
27+
28+
renderRight: function(props) {
29+
var route = props.scene.route;
30+
var index = props.scene.index;
31+
return <NavigationButton route={route} index={index} navigation={this.props.navigation} direction="right" />
32+
},
33+
34+
render: function() {
35+
return (
36+
<NavigationHeader
37+
{...this.props}
38+
style={styles.header}
39+
renderTitleComponent={this.renderTitle}
40+
renderLeftComponent={this.renderLeft}
41+
renderRightComponent={this.renderRight}
42+
/>
43+
);
44+
}
45+
});
46+
47+
var styles = StyleSheet.create({
48+
appContainer: {
49+
flex: 1
50+
},
51+
navBar: {
52+
backgroundColor: cssVar('blue50'),
53+
},
54+
scene: {
55+
flex: 1,
56+
backgroundColor: cssVar('gray5'),
57+
},
58+
sceneHidden: {
59+
marginTop: 0
60+
},
61+
header: {
62+
backgroundColor: cssVar('blue50'),
63+
borderBottomWidth: 0,
64+
}
65+
});
66+
67+
export default _NavigationHeader;

0 commit comments

Comments
 (0)