From 39304ab06bf2d2ccd0a25e2f85053a3d82471cba Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Tue, 24 Mar 2015 20:33:17 -0700 Subject: [PATCH] - [ReactNative] Rename JSNavigationStack to ReactNavigator, rename scene config | Eric Vicenti --- .../BreadcrumbNavSample.js | 10 +- .../JumpingNavSample.js | 4 +- .../NavigationBarSample.js | 4 +- .../NestedBreadcrumbNavSample.js | 10 +- .../ReactNavigatorExample.js} | 10 +- Examples/UIExplorer/UIExplorerList.js | 8 +- Examples/UIExplorer/ViewExample.js | 210 +++++++++--------- .../BreadcrumbNavigationBar.js | 0 .../BreadcrumbNavigationBarStyles.ios.js | 0 .../NavigationBar.js | 0 .../NavigationBarStyles.js | 0 .../ReactNavigator.js} | 56 ++--- .../ReactNavigatorSceneConfigs.js} | 6 +- Libraries/react-native/react-native.js | 2 +- 14 files changed, 163 insertions(+), 157 deletions(-) rename Examples/UIExplorer/{JSNavigationStack => ReactNavigator}/BreadcrumbNavSample.js (97%) rename Examples/UIExplorer/{JSNavigationStack => ReactNavigator}/JumpingNavSample.js (98%) rename Examples/UIExplorer/{JSNavigationStack => ReactNavigator}/NavigationBarSample.js (96%) rename Examples/UIExplorer/{JSNavigationStack => ReactNavigator}/NestedBreadcrumbNavSample.js (95%) rename Examples/UIExplorer/{JSNavigationStack/JSNavigationStackExample.js => ReactNavigator/ReactNavigatorExample.js} (89%) rename Libraries/CustomComponents/{JSNavigationStack => ReactNavigator}/BreadcrumbNavigationBar.js (100%) rename Libraries/CustomComponents/{JSNavigationStack => ReactNavigator}/BreadcrumbNavigationBarStyles.ios.js (100%) rename Libraries/CustomComponents/{JSNavigationStack => ReactNavigator}/NavigationBar.js (100%) rename Libraries/CustomComponents/{JSNavigationStack => ReactNavigator}/NavigationBarStyles.js (100%) rename Libraries/CustomComponents/{JSNavigationStack.js => ReactNavigator/ReactNavigator.js} (93%) rename Libraries/CustomComponents/{JSNavigationStackAnimationConfigs.js => ReactNavigator/ReactNavigatorSceneConfigs.js} (97%) diff --git a/Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js b/Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js similarity index 97% rename from Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js rename to Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js index 51efdc0cc..451da6656 100644 --- a/Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js +++ b/Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js @@ -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.AnimationConfigs.FloatFromBottom} + ReactNavigator.SceneConfigs.FloatFromBottom} debugOverlay={false} style={[styles.appContainer]} initialRoute={initialRoute} diff --git a/Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js b/Examples/UIExplorer/ReactNavigator/JumpingNavSample.js similarity index 98% rename from Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js rename to Examples/UIExplorer/ReactNavigator/JumpingNavSample.js index 67c7956d5..fd44f7384 100644 --- a/Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js +++ b/Examples/UIExplorer/ReactNavigator/JumpingNavSample.js @@ -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 ( - - ( Push Horizontal - ( Push Outer Vertical Stack - JSNavigationStack.AnimationConfigs.FloatFromBottom} + configureScene={() => ReactNavigator.SceneConfigs.FloatFromBottom} initialRoute={initialRoute} renderScene={FirstDeepRouteMapper} /> diff --git a/Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js b/Examples/UIExplorer/ReactNavigator/ReactNavigatorExample.js similarity index 89% rename from Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js rename to Examples/UIExplorer/ReactNavigator/ReactNavigatorExample.js index d96e13436..2ebec71dd 100644 --- a/Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js +++ b/Examples/UIExplorer/ReactNavigator/ReactNavigatorExample.js @@ -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 { { this.props.onExampleExit(); }}> - Exit JSNavigationStack Example + Exit ReactNavigator Example ); @@ -45,7 +45,7 @@ class NavMenu extends React.Component { var TabBarExample = React.createClass({ statics: { - title: '', + title: '', description: 'JS-implemented navigation', }, @@ -69,11 +69,11 @@ var TabBarExample = React.createClass({ render: function() { return ( - JSNavigationStack.AnimationConfigs.FloatFromBottom} + configureScene={(route) => ReactNavigator.SceneConfigs.FloatFromBottom} /> ); }, diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js index 822858994..f24ceafff 100644 --- a/Examples/UIExplorer/UIExplorerList.js +++ b/Examples/UIExplorer/UIExplorerList.js @@ -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; } diff --git a/Examples/UIExplorer/ViewExample.js b/Examples/UIExplorer/ViewExample.js index 6061a8ff2..25e3d3d16 100644 --- a/Examples/UIExplorer/ViewExample.js +++ b/Examples/UIExplorer/ViewExample.js @@ -17,106 +17,6 @@ var { View, } = React; -var UIExplorerBlock = require('./UIExplorerBlock'); -var UIExplorerPage = require('./UIExplorerPage'); - -var ViewExample = React.createClass({ - statics: { - title: '', - description: 'Basic building block of all UI.' - }, - getInitialState: function() { - return { - textBorderExampleHeight: 20, - }; - }, - - render: function() { - return ( - '}> - - - - Blue background - - - - - - 5px blue border - - - - - - 5px padding - - - 5px margin - - - - 5px margin and padding, - - - widthAutonomous=true - - - - - - - - Too much use of `borderRadius` (especially large radii) on - anything which is scrolling may result in dropped frames. - Use sparingly. - - - - - - - - - - - Overflow hidden - - - - - Overflow visible - - - - - - Opacity 0 - Opacity 0.1 - Opacity 0.3 - Opacity 0.5 - Opacity 0.7 - Opacity 0.9 - Opacity 1 - - - ); - }, - - updateHeight: function() { - var height = this.state.textBorderExampleHeight === 50 ? 20 : 50; - this.setState({textBorderExampleHeight: height}); - }, -}); - var styles = StyleSheet.create({ box: { backgroundColor: '#527FE4', @@ -125,4 +25,112 @@ var styles = StyleSheet.create({ } }); -module.exports = ViewExample; +exports.title = ''; +exports.description = 'Basic building block of all UI.'; +exports.displayName = 'ViewExample'; +exports.examples = [ + { + title: 'Background Color', + render: function() { + return ( + + + Blue background + + + ); + }, + }, { + title: 'Border', + render: function() { + return ( + + 5px blue border + + ); + }, + }, { + title: 'Padding/Margin', + render: function() { + return ( + + + 5px padding + + + 5px margin + + + + 5px margin and padding, + + + widthAutonomous=true + + + + ); + }, + }, { + title: 'Border Radius', + render: function() { + return ( + + + Too much use of `borderRadius` (especially large radii) on + anything which is scrolling may result in dropped frames. + Use sparingly. + + + ); + }, + }, { + title: 'Circle with Border Radius', + render: function() { + return ( + + ); + }, + }, { + title: 'Overflow', + render: function() { + return ( + + + + Overflow hidden + + + + + Overflow visible + + + + ); + }, + }, { + title: 'Opacity', + render: function() { + return ( + + Opacity 0 + Opacity 0.1 + Opacity 0.3 + Opacity 0.5 + Opacity 0.7 + Opacity 0.9 + Opacity 1 + + ); + }, + }, +]; diff --git a/Libraries/CustomComponents/JSNavigationStack/BreadcrumbNavigationBar.js b/Libraries/CustomComponents/ReactNavigator/BreadcrumbNavigationBar.js similarity index 100% rename from Libraries/CustomComponents/JSNavigationStack/BreadcrumbNavigationBar.js rename to Libraries/CustomComponents/ReactNavigator/BreadcrumbNavigationBar.js diff --git a/Libraries/CustomComponents/JSNavigationStack/BreadcrumbNavigationBarStyles.ios.js b/Libraries/CustomComponents/ReactNavigator/BreadcrumbNavigationBarStyles.ios.js similarity index 100% rename from Libraries/CustomComponents/JSNavigationStack/BreadcrumbNavigationBarStyles.ios.js rename to Libraries/CustomComponents/ReactNavigator/BreadcrumbNavigationBarStyles.ios.js diff --git a/Libraries/CustomComponents/JSNavigationStack/NavigationBar.js b/Libraries/CustomComponents/ReactNavigator/NavigationBar.js similarity index 100% rename from Libraries/CustomComponents/JSNavigationStack/NavigationBar.js rename to Libraries/CustomComponents/ReactNavigator/NavigationBar.js diff --git a/Libraries/CustomComponents/JSNavigationStack/NavigationBarStyles.js b/Libraries/CustomComponents/ReactNavigator/NavigationBarStyles.js similarity index 100% rename from Libraries/CustomComponents/JSNavigationStack/NavigationBarStyles.js rename to Libraries/CustomComponents/ReactNavigator/NavigationBarStyles.js diff --git a/Libraries/CustomComponents/JSNavigationStack.js b/Libraries/CustomComponents/ReactNavigator/ReactNavigator.js similarity index 93% rename from Libraries/CustomComponents/JSNavigationStack.js rename to Libraries/CustomComponents/ReactNavigator/ReactNavigator.js index 7f7936c6c..004908d57 100644 --- a/Libraries/CustomComponents/JSNavigationStack.js +++ b/Libraries/CustomComponents/ReactNavigator/ReactNavigator.js @@ -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; diff --git a/Libraries/CustomComponents/JSNavigationStackAnimationConfigs.js b/Libraries/CustomComponents/ReactNavigator/ReactNavigatorSceneConfigs.js similarity index 97% rename from Libraries/CustomComponents/JSNavigationStackAnimationConfigs.js rename to Libraries/CustomComponents/ReactNavigator/ReactNavigatorSceneConfigs.js index b2d813704..a66c093f2 100644 --- a/Libraries/CustomComponents/JSNavigationStackAnimationConfigs.js +++ b/Libraries/CustomComponents/ReactNavigator/ReactNavigatorSceneConfigs.js @@ -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; diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js index 12112a4bb..c846d0a82 100644 --- a/Libraries/react-native/react-native.js +++ b/Libraries/react-native/react-native.js @@ -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'),