From 5e88b313ec7ab6bab4b04e7786fd2907a3b62168 Mon Sep 17 00:00:00 2001 From: aksonov Date: Wed, 19 Jul 2017 15:34:48 +0200 Subject: [PATCH] add getSceneStyle v3 prop support, fixes #2033 --- Example/Example.js | 7 ++++++- dist/NavBar.js | 4 ++-- dist/Router.js | 16 ++++++++++------ src/NavBar.js | 1 - src/Router.js | 12 ++++++++---- 5 files changed, 26 insertions(+), 14 deletions(-) diff --git a/Example/Example.js b/Example/Example.js index e7edcd983..5697b5f6d 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -45,10 +45,15 @@ const reducerCreate = params => { return defaultReducer(state, action); }; }; +const getSceneStyle = () => ({ + backgroundColor: 'white', + shadowOpacity: 1, + shadowRadius: 3, +}); const Example = () => { return ( - + diff --git a/dist/NavBar.js b/dist/NavBar.js index 172c5eea7..fc273b066 100644 --- a/dist/NavBar.js +++ b/dist/NavBar.js @@ -120,7 +120,7 @@ LeftButton=LeftButton;exports. -RightButton=RightButton;var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _back_chevron=require('../images/back_chevron.png');var _back_chevron2=_interopRequireDefault(_back_chevron);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function renderBackButton(state){var textButtonStyle=[styles.barBackButtonText,state.backButtonTextStyle];var style=[styles.backButton,state.leftButtonStyle];var buttonImage=state.backButtonImage||_back_chevron2.default;var tintColor=getValue(state.backButtonTintColor,state)||state.tintColor||state.navBarButtonColor||state.headerTintColor;var onPress=state.onBack;if(onPress){onPress=onPress.bind(null,state);}else{onPress=_navigationStore2.default.pop;}var text=state.backTitle?_react2.default.createElement(_reactNative.Text,{style:textButtonStyle,__source:{fileName:_jsxFileName,lineNumber:32}},state.backTitle):null;return _react2.default.createElement(_reactNative.TouchableOpacity,{testID:'backNavButton',style:styles.backButtonContainer,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:38}},_react2.default.createElement(_reactNative.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:43}},buttonImage&&!state.hideBackImage&&_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[styles.backButtonImage,state.barButtonIconStyle,state.leftButtonIconStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:44}}),text));}function LeftButton(state){var onPress=state.onLeft;var buttonImage=getValue(state.leftButtonImage,state);var menuIcon=state.drawerIcon;var style=[styles.leftButton,state.leftButtonStyle];var leftButtonTextStyle=getValue(state.leftButtonTextStyle,state);var leftButtonIconStyle=getValue(state.leftButtonIconStyle,state);var leftButtonStyle=[styles.defaultImageStyle,leftButtonIconStyle];var leftTitle=state.getLeftTitle?state.getLeftTitle(state):getValue(state.leftTitle,state);var textColor=getValue(state.leftButtonTintColor,state);var tintColor=textColor||state.tintColor||state.navBarButtonColor||state.headerTintColor;var textStyle=[{color:tintColor},styles.barLeftButtonText,leftButtonTextStyle,textColor&&{color:textColor}];if(state.leftButton){var Button=state.leftButton||state.left;return _react2.default.createElement(Button,_extends({},state,{key:'leftNavBarBtn',testID:'leftNavButton',style:[].concat(style,leftButtonStyle),textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:76}}));}if(onPress&&(leftTitle||buttonImage)){onPress=onPress.bind(null,state);return _react2.default.createElement(_reactNative.TouchableOpacity,{key:'leftNavBarBtn',testID:'leftNavButton',style:style,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:89}},leftTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:95}},leftTitle),!leftTitle&&buttonImage&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-start'},__source:{fileName:_jsxFileName,lineNumber:99}},menuIcon||_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:100}})));}if(!!state.onLeft^!!(leftTitle||buttonImage)){console.warn('Both onLeft and leftTitle/leftButtonImage\n must be specified for the scene: '+state.name);}return null;};function getValue(value,params){return value instanceof Function?value(params):value;}function RightButton(state){ +RightButton=RightButton;var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _back_chevron=require('../images/back_chevron.png');var _back_chevron2=_interopRequireDefault(_back_chevron);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function renderBackButton(state){var textButtonStyle=[styles.barBackButtonText,state.backButtonTextStyle];var style=[styles.backButton,state.leftButtonStyle];var buttonImage=state.backButtonImage||_back_chevron2.default;var tintColor=getValue(state.backButtonTintColor,state)||state.tintColor||state.navBarButtonColor||state.headerTintColor;var onPress=state.onBack;if(onPress){onPress=onPress.bind(null,state);}else{onPress=_navigationStore2.default.pop;}var text=state.backTitle?_react2.default.createElement(_reactNative.Text,{style:textButtonStyle,__source:{fileName:_jsxFileName,lineNumber:32}},state.backTitle):null;return _react2.default.createElement(_reactNative.TouchableOpacity,{testID:'backNavButton',style:styles.backButtonContainer,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:38}},_react2.default.createElement(_reactNative.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:43}},buttonImage&&!state.hideBackImage&&_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[styles.backButtonImage,state.barButtonIconStyle,state.leftButtonIconStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:44}}),text));}function LeftButton(state){var onPress=state.onLeft;var buttonImage=getValue(state.leftButtonImage,state);var menuIcon=state.drawerIcon;var style=[styles.leftButton,state.leftButtonStyle];var leftButtonTextStyle=getValue(state.leftButtonTextStyle,state);var leftButtonIconStyle=getValue(state.leftButtonIconStyle,state);var leftButtonStyle=[styles.defaultImageStyle,leftButtonIconStyle];var leftTitle=state.getLeftTitle?state.getLeftTitle(state):getValue(state.leftTitle,state);var textColor=getValue(state.leftButtonTintColor,state);var tintColor=textColor||state.tintColor||state.navBarButtonColor||state.headerTintColor;var textStyle=[{color:tintColor},styles.barLeftButtonText,leftButtonTextStyle,textColor&&{color:textColor}];if(state.leftButton){var Button=state.leftButton||state.left;return _react2.default.createElement(Button,_extends({},state,{key:'leftNavBarBtn',testID:'leftNavButton',style:[].concat(style,leftButtonStyle),textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:76}}));}if(onPress&&(leftTitle||buttonImage)){onPress=onPress.bind(null,state);return _react2.default.createElement(_reactNative.TouchableOpacity,{key:'leftNavBarBtn',testID:'leftNavButton',style:style,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:89}},leftTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:95}},leftTitle),!leftTitle&&buttonImage&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-start'},__source:{fileName:_jsxFileName,lineNumber:99}},menuIcon||_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:100}})));}if(!!state.onLeft^!!(leftTitle||buttonImage)){console.warn('Both onLeft and leftTitle/leftButtonImage\n must be specified for the scene: '+state.name);}return null;}function getValue(value,params){return value instanceof Function?value(params):value;}function RightButton(state){ var drawer=null; if(!state){ return null; @@ -198,7 +198,7 @@ state.name); } return null; -}; +} var styles=_reactNative.StyleSheet.create({ title:{ textAlign:'center', diff --git a/dist/Router.js b/dist/Router.js index 9aec56cb1..be5dda52f 100644 --- a/dist/Router.js +++ b/dist/Router.js @@ -156,8 +156,7 @@ if(!Component){ return null; } var wrapper=wrapBy||function(props){return props;}; -return wrapper(function(_ref3){var navigation=_ref3.navigation,props=_objectWithoutProperties(_ref3,['navigation']);return( -_react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:160}})));}); +return wrapper(function(_ref3){var navigation=_ref3.navigation,props=_objectWithoutProperties(_ref3,['navigation']);return _react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:159}}));}); }var @@ -187,7 +186,7 @@ return true; { var AppNavigator=this.props.navigator; return( -_react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:_navigationStore2.default.dispatch,state:_navigationStore2.default.state}),__source:{fileName:_jsxFileName,lineNumber:190}})); +_react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:_navigationStore2.default.dispatch,state:_navigationStore2.default.state}),__source:{fileName:_jsxFileName,lineNumber:189}})); }}]);return App;}(_react2.default.Component),_class2.propTypes={navigator:_react2.default.PropTypes.func},_temp2))||_class; @@ -304,19 +303,24 @@ return(0,_reactNavigation.DrawerNavigator)(res,_extends({initialRouteName:initia return(0,_reactNavigation.StackNavigator)(res,_extends({mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName},commonProps,{navigationOptions:createNavigationOptions(commonProps)})); } -var Router=function Router(_ref9){var createReducer=_ref9.createReducer,_ref9$wrapBy=_ref9.wrapBy,wrapBy=_ref9$wrapBy===undefined?function(props){return props;}:_ref9$wrapBy,props=_objectWithoutProperties(_ref9,['createReducer','wrapBy']); +var Router=function Router(_ref9){var createReducer=_ref9.createReducer,getSceneStyle=_ref9.getSceneStyle,_ref9$wrapBy=_ref9.wrapBy,wrapBy=_ref9$wrapBy===undefined?function(props){return props;}:_ref9$wrapBy,props=_objectWithoutProperties(_ref9,['createReducer','getSceneStyle','wrapBy']); (0,_Util.assert)(!Array.isArray(props.children),'Router should contain only one scene, please wrap your scenes with Scene '); var scene=props.children; -var AppNavigator=processScene(scene,props,[],wrapBy); +var data=_extends({},props); +if(getSceneStyle){ +data.cardStyle=getSceneStyle(); +} +var AppNavigator=processScene(scene,data,[],wrapBy); _navigationStore2.default.router=AppNavigator.router; _navigationStore2.default.reducer=createReducer&&createReducer(props); RightNavBarButton=wrapBy(_NavBar.RightButton); LeftNavBarButton=wrapBy(_NavBar.LeftButton); -return _react2.default.createElement(App,{navigator:AppNavigator,__source:{fileName:_jsxFileName,lineNumber:315}}); +return _react2.default.createElement(App,{navigator:AppNavigator,__source:{fileName:_jsxFileName,lineNumber:318}}); }; Router.propTypes={ createReducer:_propTypes2.default.func, wrapBy:_propTypes2.default.func, +getSceneStyle:_propTypes2.default.func, children:_propTypes2.default.element};exports.default= diff --git a/src/NavBar.js b/src/NavBar.js index 1cb12b0a2..af06744ec 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -199,7 +199,6 @@ export function RightButton(state) { } return null; } - const styles = StyleSheet.create({ title: { textAlign: 'center', diff --git a/src/Router.js b/src/Router.js index 289d892f6..76e7569f3 100644 --- a/src/Router.js +++ b/src/Router.js @@ -156,8 +156,7 @@ function createWrapper(Component, wrapBy) { return null; } const wrapper = wrapBy || (props => props); - return wrapper(({ navigation, ...props }) => - ); + return wrapper(({ navigation, ...props }) => ); } @observer @@ -304,10 +303,14 @@ function processScene(scene: Scene, inheritProps = {}, clones = [], wrapBy) { return StackNavigator(res, { mode, initialRouteParams, initialRouteName, ...commonProps, navigationOptions: createNavigationOptions(commonProps) }); } -const Router = ({ createReducer, wrapBy = props => props, ...props }) => { +const Router = ({ createReducer, getSceneStyle, wrapBy = props => props, ...props }) => { assert(!Array.isArray(props.children), 'Router should contain only one scene, please wrap your scenes with Scene '); const scene: Scene = props.children; - const AppNavigator = processScene(scene, props, [], wrapBy); + const data = { ...props }; + if (getSceneStyle) { + data.cardStyle = getSceneStyle(); + } + const AppNavigator = processScene(scene, data, [], wrapBy); navigationStore.router = AppNavigator.router; navigationStore.reducer = createReducer && createReducer(props); RightNavBarButton = wrapBy(RightButton); @@ -317,6 +320,7 @@ const Router = ({ createReducer, wrapBy = props => props, ...props }) => { Router.propTypes = { createReducer: PropTypes.func, wrapBy: PropTypes.func, + getSceneStyle: PropTypes.func, children: PropTypes.element, };