status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

- [ReactNative] Rename JSNavigationStack to ReactNavigator, rename scene config | Eric Vicenti

This commit is contained in:
Christopher Chedeau 2015-03-24 20:33:17 -07:00
parent 57337cb3e4
commit 39304ab06b
14 changed files with 163 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js → Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js
View File

@ -6,7 +6,7 @@
'use strict';
var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var React = require('React');
var StyleSheet = require('StyleSheet');
var ScrollView = require('ScrollView');
@ -16,8 +16,6 @@ var Text = require('Text');
var TouchableBounce = require('TouchableBounce');
var View = require('View');
var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
var _getRandomRoute = function() {
@ -187,7 +185,7 @@ var BreadcrumbNavSample = React.createClass({
onPress={this.onTabSelect.bind(this, 0)}
icon={require('image!madman_tabnav_list')}
title="One">
<JSNavigationStack
<ReactNavigator
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}
@ -204,8 +202,8 @@ var BreadcrumbNavSample = React.createClass({
onPress={this.onTabSelect.bind(this, 1)}
icon={require('image!madman_tabnav_create')}
title="Two">
<JSNavigationStack
animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
<ReactNavigator
configureScene={() => ReactNavigator.SceneConfigs.FloatFromBottom}
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}

4
Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js → Examples/UIExplorer/ReactNavigator/JumpingNavSample.js
View File

@ -5,7 +5,7 @@
*/
'use strict';
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var React = require('React');
var StyleSheet = require('StyleSheet');
var ScrollView = require('ScrollView');
@ -132,7 +132,7 @@ var JumpingNavSample = React.createClass({
render: function() {
return (
<JSNavigationStack
<ReactNavigator
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={INIT_ROUTE}

4
Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js → Examples/UIExplorer/ReactNavigator/NavigationBarSample.js
View File

@ -5,7 +5,7 @@
*/
'use strict';
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var NavigationBar = require('NavigationBar');
var React = require('React');
var StyleSheet = require('StyleSheet');
@ -70,7 +70,7 @@ var NavigationBarSample = React.createClass({
render: function() {
return (
<View style={styles.appContainer}>
<JSNavigationStack
<ReactNavigator
debugOverlay={false}
style={styles.appContainer}
initialRoute={newRandomRoute()}

10
Examples/UIExplorer/JSNavigationStack/NestedBreadcrumbNavSample.js → Examples/UIExplorer/ReactNavigator/NestedBreadcrumbNavSample.js
View File

@ -6,7 +6,7 @@
'use strict';
var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var React = require('React');
var ScrollView = require('ScrollView');
var StyleSheet = require('StyleSheet');
@ -90,7 +90,7 @@ var SecondDeepRouteMapper = (route, navigator) => (
<Text style={styles.buttonText}>Push Horizontal</Text>
</View>
</TouchableBounce>
<JSNavigationStack
<ReactNavigator
style={styles.thirdDeepNavigator}
initialRoute={{title: '3x Nested Horizontal'}}
renderScene={ThirdDeepRouteMapper}
@ -111,7 +111,7 @@ var FirstDeepRouteMapper = (route, navigator) => (
<Text style={styles.buttonText}>Push Outer Vertical Stack</Text>
</View>
</TouchableBounce>
<JSNavigationStack
<ReactNavigator
style={styles.secondDeepNavigator}
initialRoute={{title: '2x Nested Horizontal Nav'}}
renderScene={SecondDeepRouteMapper}
@ -132,9 +132,9 @@ var NestedBreadcrumbNavSample = React.createClass({
var initialRoute = {title: 'Vertical'};
// No navigation bar.
return (
<JSNavigationStack
<ReactNavigator
style={[styles.appContainer]}
animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
configureScene={() => ReactNavigator.SceneConfigs.FloatFromBottom}
initialRoute={initialRoute}
renderScene={FirstDeepRouteMapper}
/>

10
Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js → Examples/UIExplorer/ReactNavigator/ReactNavigatorExample.js
View File

@ -4,7 +4,7 @@
'use strict';
var React = require('React');
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var ScrollView = require('ScrollView');
@ -35,7 +35,7 @@ class NavMenu extends React.Component {
<TouchableHighlight style={styles.button} onPress={() => {
this.props.onExampleExit();
}}>
<Text style={styles.buttonText}>Exit JSNavigationStack Example</Text>
<Text style={styles.buttonText}>Exit ReactNavigator Example</Text>
</TouchableHighlight>
</ScrollView>
);
@ -45,7 +45,7 @@ class NavMenu extends React.Component {
var TabBarExample = React.createClass({
statics: {
title: '<JSNavigationStack>',
title: '<ReactNavigator>',
description: 'JS-implemented navigation',
},
@ -69,11 +69,11 @@ var TabBarExample = React.createClass({
render: function() {
return (
<JSNavigationStack
<ReactNavigator
style={styles.container}
initialRoute={{ id: 'menu', }}
renderScene={this.renderScene}
animationConfigRouteMapper={(route) => JSNavigationStack.AnimationConfigs.FloatFromBottom}
configureScene={(route) => ReactNavigator.SceneConfigs.FloatFromBottom}
/>
);
},

8
Examples/UIExplorer/UIExplorerList.js
View File

@ -21,7 +21,7 @@ var {
TouchableHighlight,
View,
} = React;
var JSNavigationStackExample = require('./JSNavigationStack/JSNavigationStackExample');
var ReactNavigatorExample = require('./ReactNavigator/ReactNavigatorExample');
var createExamplePage = require('./createExamplePage');
@ -33,7 +33,7 @@ var COMPONENTS = [
require('./ListViewSimpleExample'),
require('./MapViewExample'),
require('./NavigatorIOSExample'),
JSNavigationStackExample,
ReactNavigatorExample,
require('./PickerExample'),
require('./ScrollViewExample'),
require('./SliderIOSExample'),
@ -146,9 +146,9 @@ class UIExplorerList extends React.Component {
}
_onPressRow(example) {
if (example === JSNavigationStackExample) {
if (example === ReactNavigatorExample) {
this.props.onExternalExampleRequested(
JSNavigationStackExample
ReactNavigatorExample
);
return;
}

96
Examples/UIExplorer/ViewExample.js
View File

@ -17,36 +17,42 @@ var {
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var ViewExample = React.createClass({
statics: {
title: '<View>',
description: 'Basic building block of all UI.'
},
getInitialState: function() {
return {
textBorderExampleHeight: 20,
};
},
var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
}
});
exports.title = '<View>';
exports.description = 'Basic building block of all UI.';
exports.displayName = 'ViewExample';
exports.examples = [
{
title: 'Background Color',
render: function() {
return (
<UIExplorerPage title={this.props.navigator ? null : '<View>'}>
<UIExplorerBlock title="Background Color">
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
Blue background
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border">
);
},
}, {
title: 'Border',
render: function() {
return (
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Padding/Margin">
);
},
}, {
title: 'Padding/Margin',
render: function() {
return (
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
@ -63,8 +69,12 @@ var ViewExample = React.createClass({
</Text>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border Radius">
);
},
}, {
title: 'Border Radius',
render: function() {
return (
<View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
Too much use of `borderRadius` (especially large radii) on
@ -72,11 +82,19 @@ var ViewExample = React.createClass({
Use sparingly.
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Circle with Border Radius">
);
},
}, {
title: 'Circle with Border Radius',
render: function() {
return (
<View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
</UIExplorerBlock>
<UIExplorerBlock title="Overflow">
);
},
}, {
title: 'Overflow',
render: function() {
return (
<View style={{flexDirection: 'row'}}>
<View
style={{
@ -97,8 +115,13 @@ var ViewExample = React.createClass({
</View>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Opacity">
);
},
}, {
title: 'Opacity',
render: function() {
return (
<View>
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
@ -106,23 +129,8 @@ var ViewExample = React.createClass({
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
</UIExplorerBlock>
</UIExplorerPage>
</View>
);
},
updateHeight: function() {
var height = this.state.textBorderExampleHeight === 50 ? 20 : 50;
this.setState({textBorderExampleHeight: height});
},
});
var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
}
});
module.exports = ViewExample;
];

0
Libraries/CustomComponents/JSNavigationStack/BreadcrumbNavigationBar.js → Libraries/CustomComponents/ReactNavigator/BreadcrumbNavigationBar.js
View File

0
Libraries/CustomComponents/JSNavigationStack/BreadcrumbNavigationBarStyles.ios.js → Libraries/CustomComponents/ReactNavigator/BreadcrumbNavigationBarStyles.ios.js
View File

0
Libraries/CustomComponents/JSNavigationStack/NavigationBar.js → Libraries/CustomComponents/ReactNavigator/NavigationBar.js
View File

0
Libraries/CustomComponents/JSNavigationStack/NavigationBarStyles.js → Libraries/CustomComponents/ReactNavigator/NavigationBarStyles.js
View File

56
Libraries/CustomComponents/JSNavigationStack.js → Libraries/CustomComponents/ReactNavigator/ReactNavigator.js
View File

@ -1,7 +1,7 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule JSNavigationStack
* @providesModule ReactNavigator
*/
"use strict"
@ -10,7 +10,7 @@ var AnimationsDebugModule = require('NativeModules').AnimationsDebugModule;
var Backstack = require('Backstack');
var Dimensions = require('Dimensions');
var InteractionMixin = require('InteractionMixin');
var JSNavigationStackAnimationConfigs = require('JSNavigationStackAnimationConfigs');
var ReactNavigatorSceneConfigs = require('ReactNavigatorSceneConfigs');
var PanResponder = require('PanResponder');
var React = require('React');
var StaticContainer = require('StaticContainer.react');
@ -72,10 +72,10 @@ var styles = StyleSheet.create({
}
});
var JSNavigationStack = React.createClass({
var ReactNavigator = React.createClass({
propTypes: {
animationConfigRouteMapper: PropTypes.func,
configureScene: PropTypes.func,
// Returns the rendered scene to display when invoked with (route, navigator)
renderScene: PropTypes.func.isRequired,
initialRoute: PropTypes.object,
@ -90,7 +90,7 @@ var JSNavigationStack = React.createClass({
onItemRef: PropTypes.func,
// Define the component to use for the nav bar, which will get navState and navigator props
navigationBar: PropTypes.node,
// The navigator object from a parent JSNavigationStack
// The navigator object from a parent ReactNavigator
navigator: PropTypes.object,
/**
@ -102,14 +102,14 @@ var JSNavigationStack = React.createClass({
},
statics: {
AnimationConfigs: JSNavigationStackAnimationConfigs,
SceneConfigs: ReactNavigatorSceneConfigs,
},
mixins: [TimerMixin, InteractionMixin, Subscribable.Mixin],
getDefaultProps: function() {
return {
animationConfigRouteMapper: () => JSNavigationStackAnimationConfigs.PushFromRight,
configureScene: () => ReactNavigatorSceneConfigs.PushFromRight,
sceneStyle: styles.defaultSceneStyle,
};
},
@ -128,12 +128,12 @@ var JSNavigationStack = React.createClass({
} else {
invariant(
routeStack.length >= 1,
'JSNavigationStack requires props.initialRoute or props.initialRouteStack.'
'ReactNavigator requires props.initialRoute or props.initialRouteStack.'
);
}
return {
animationConfigStack: routeStack.map(
(route) => this.props.animationConfigRouteMapper(route)
sceneConfigStack: routeStack.map(
(route) => this.props.configureScene(route)
),
idStack: routeStack.map(() => getuid()),
routeStack,
@ -203,7 +203,7 @@ var JSNavigationStack = React.createClass({
this.springSystem = new rebound.SpringSystem();
this.spring = this.springSystem.createSpring();
this.spring.setRestSpeedThreshold(0.05);
var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
animationConfig && this._configureSpring(animationConfig);
this.spring.addListener(this);
this.onSpringUpdate();
@ -246,8 +246,8 @@ var JSNavigationStack = React.createClass({
this.setState({
idStack: nextRouteStack.map(getuid),
routeStack: nextRouteStack,
animationConfigStack: nextRouteStack.map(
this.props.animationConfigRouteMapper
sceneConfigStack: nextRouteStack.map(
this.props.configureScene
),
updatingRangeStart: 0,
updatingRangeLength: nextRouteStack.length,
@ -273,7 +273,7 @@ var JSNavigationStack = React.createClass({
AnimationsDebugModule.startRecordingFps();
}
this._transitionToToIndexWithVelocity(
this.state.animationConfigStack[this.state.fromIndex].defaultTransitionVelocity
this.state.sceneConfigStack[this.state.fromIndex].defaultTransitionVelocity
);
}
},
@ -322,7 +322,7 @@ var JSNavigationStack = React.createClass({
_transitionToToIndexWithVelocity: function(v) {
this._configureSpring(
// For visual consistency, the from index is always used to configure the spring
this.state.animationConfigStack[this.state.fromIndex]
this.state.sceneConfigStack[this.state.fromIndex]
);
this.state.isAnimating = true;
this.spring.setVelocity(v);
@ -332,7 +332,7 @@ var JSNavigationStack = React.createClass({
_transitionToFromIndexWithVelocity: function(v) {
this._configureSpring(
this.state.animationConfigStack[this.state.fromIndex]
this.state.sceneConfigStack[this.state.fromIndex]
);
this.state.isAnimating = true;
this.spring.setVelocity(v);
@ -383,7 +383,7 @@ var JSNavigationStack = React.createClass({
_handleMoveShouldSetPanResponder: function(e, gestureState) {
var currentRoute = this.state.routeStack[this.state.presentedIndex];
var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
if (!animationConfig.enableGestures) {
return false;
}
@ -417,7 +417,7 @@ var JSNavigationStack = React.createClass({
this.state.isResponderOnlyToBlockTouches = false;
return;
}
var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
var velocity = animationConfig.isVertical ? gestureState.vy : gestureState.vx;
// It's not the real location. There is no *real* location - that's the
// point of the pan gesture.
@ -451,7 +451,7 @@ var JSNavigationStack = React.createClass({
_handlePanResponderMove: function(e, gestureState) {
if (!this.state.isResponderOnlyToBlockTouches) {
var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
var distance = animationConfig.isVertical ? gestureState.dy : gestureState.dx;
var gestureDetectMovement = animationConfig.gestureDetectMovement;
var nextProgress = (distance - gestureDetectMovement) /
@ -467,7 +467,7 @@ var JSNavigationStack = React.createClass({
}
// Use toIndex animation when we move forwards. Use fromIndex when we move back
var animationIndex = this.state.presentedIndex < toIndex ? toIndex : fromIndex;
var animationConfig = this.state.animationConfigStack[animationIndex];
var animationConfig = this.state.sceneConfigStack[animationIndex];
var styleToUse = {};
var useFn = index < fromIndex || index < toIndex ?
animationConfig.interpolators.out :
@ -602,11 +602,11 @@ var JSNavigationStack = React.createClass({
var activeLength = this.state.presentedIndex + 1;
var activeStack = this.state.routeStack.slice(0, activeLength);
var activeIDStack = this.state.idStack.slice(0, activeLength);
var activeAnimationConfigStack = this.state.animationConfigStack.slice(0, activeLength);
var activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
var nextStack = activeStack.concat([route]);
var nextIDStack = activeIDStack.concat([getuid()]);
var nextAnimationConfigStack = activeAnimationConfigStack.concat([
this.props.animationConfigRouteMapper(route),
this.props.configureScene(route),
]);
var requestTransitionAndResetUpdatingRange = () => {
this._requestTransitionTo(nextStack.length - 1);
@ -624,7 +624,7 @@ var JSNavigationStack = React.createClass({
this.setState({
idStack: nextIDStack,
routeStack: nextStack,
animationConfigStack: nextAnimationConfigStack,
sceneConfigStack: nextAnimationConfigStack,
jumpToIndex: nextStack.length - 1,
updatingRangeStart: nextStack.length - 1,
updatingRangeLength: 1,
@ -687,15 +687,15 @@ var JSNavigationStack = React.createClass({
// navigation actually happening
var nextIDStack = this.state.idStack.slice();
var nextRouteStack = this.state.routeStack.slice();
var nextAnimationModeStack = this.state.animationConfigStack.slice();
var nextAnimationModeStack = this.state.sceneConfigStack.slice();
nextIDStack[index] = getuid();
nextRouteStack[index] = route;
nextAnimationModeStack[index] = this.props.animationConfigRouteMapper(route);
nextAnimationModeStack[index] = this.props.configureScene(route);
this.setState({
idStack: nextIDStack,
routeStack: nextRouteStack,
animationConfigStack: nextAnimationModeStack,
sceneConfigStack: nextAnimationModeStack,
updatingRangeStart: index,
updatingRangeLength: 1,
}, () => {
@ -784,7 +784,7 @@ var JSNavigationStack = React.createClass({
this.setState({
updatingRangeStart: updatingRangeStart,
updatingRangeLength: updatingRangeLength,
animationConfigStack: this.state.animationConfigStack.slice(0, newStackLength),
sceneConfigStack: this.state.sceneConfigStack.slice(0, newStackLength),
idStack: this.state.idStack.slice(0, newStackLength),
routeStack: this.state.routeStack.slice(0, newStackLength),
}, this._resetUpdatingRange);
@ -857,4 +857,4 @@ var JSNavigationStack = React.createClass({
},
});
module.exports = JSNavigationStack;
module.exports = ReactNavigator;

6
Libraries/CustomComponents/JSNavigationStackAnimationConfigs.js → Libraries/CustomComponents/ReactNavigator/ReactNavigatorSceneConfigs.js
View File

@ -1,7 +1,7 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule JSNavigationStackAnimationConfigs
* @providesModule ReactNavigatorSceneConfigs
*/
'use strict';
@ -260,7 +260,7 @@ var BaseConfig = {
interpolators: Interpolators.Horizontal,
};
var JSNavigationStackAnimationConfigs = {
var ReactNavigatorSceneConfigs = {
PushFromRight: merge(BaseConfig, {
// We will want to customize this soon
}),
@ -276,4 +276,4 @@ var JSNavigationStackAnimationConfigs = {
}),
};
module.exports = JSNavigationStackAnimationConfigs;
module.exports = ReactNavigatorSceneConfigs;

2
Libraries/react-native/react-native.js vendored
View File

@ -25,8 +25,8 @@ var ReactNative = Object.assign(Object.create(require('React')), {
ListView: require('ListView'),
MapView: require('MapView'),
NavigatorIOS: require('NavigatorIOS'),
JSNavigationStack: require('JSNavigationStack'),
PickerIOS: require('PickerIOS'),
ReactNavigator: require('ReactNavigator'),
ScrollView: require('ScrollView'),
SliderIOS: require('SliderIOS'),
SwitchIOS: require('SwitchIOS'),