Skip to content

Commit

Permalink
add more navbar dynamic properties (#2053)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aksonov
aksonov authored Jul 17, 2017
1 parent 38ab1fb commit b1257d9
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 47 deletions.
42 changes: 24 additions & 18 deletions dist/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ styles.backButton,
state.leftButtonStyle];

var buttonImage=state.backButtonImage||_back_chevron2.default;
var tintColor=state.tintColor||state.navBarButtonColor||state.headerTintColor;
var tintColor=getValue(state.backButtonTintColor,state)||state.tintColor||state.navBarButtonColor||state.headerTintColor;
var onPress=state.onBack;
if(onPress){
onPress=onPress.bind(null,state);
Expand Down Expand Up @@ -62,10 +62,13 @@ var onPress=state.onLeft;
var buttonImage=getValue(state.leftButtonImage,state);
var menuIcon=state.drawerIcon;
var style=[styles.leftButton,state.leftButtonStyle];
var textStyle=[styles.barLeftButtonText,state.leftButtonTextStyle];
var leftButtonStyle=[styles.defaultImageStyle,state.leftButtonIconStyle];
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 tintColor=state.tintColor||state.navBarButtonColor||state.headerTintColor;
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;
Expand All @@ -75,7 +78,7 @@ state,{
key:'leftNavBarBtn',
testID:'leftNavButton',
style:[].concat(style,leftButtonStyle),
textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:73}})));
textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:76}})));


}
Expand All @@ -87,16 +90,16 @@ _react2.default.createElement(_reactNative.TouchableOpacity,{
key:'leftNavBarBtn',
testID:'leftNavButton',
style:style,
onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:86}},
onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:89}},

leftTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:92}},
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:96}},
!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:97}}))));
style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:100}}))));



Expand Down Expand Up @@ -127,10 +130,13 @@ var onPress=state.onRight;
var buttonImage=getValue(state.rightButtonImage,state);
var menuIcon=state.drawerIcon;
var style=[styles.rightButton,state.rightButtonStyle];
var textStyle=[styles.barRightButtonText,state.rightButtonTextStyle];
var rightButtonStyle=[styles.defaultImageStyle,state.rightButtonIconStyle];
var rightButtonTextStyle=getValue(state.rightButtonTextStyle,state);
var rightButtonIconStyle=getValue(state.rightButtonIconStyle,state);
var rightButtonStyle=[styles.defaultImageStyle,rightButtonIconStyle];
var rightTitle=state.getRightTitle?state.getRightTitle(state):getValue(state.rightTitle,state);
var tintColor=state.tintColor||state.navBarButtonColor||state.headerTintColor;
var textColor=getValue(state.rightButtonTintColor,state);
var tintColor=textColor||state.tintColor||state.navBarButtonColor||state.headerTintColor;
var textStyle=[{color:tintColor},styles.barRightButtonText,rightButtonTextStyle,textColor&&{color:textColor}];

if(state.rightButton||state.right){
var Button=state.rightButton||state.right;
Expand All @@ -140,7 +146,7 @@ state,{
key:'rightNavBarBtn',
testID:'rightNavButton',
style:style,
textButtonStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:138}})));
textButtonStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:144}})));


}
Expand All @@ -154,7 +160,7 @@ if(!menuIcon){
menuIcon=
_react2.default.createElement(_reactNative.Image,{
source:buttonImage,
style:rightButtonStyle,__source:{fileName:_jsxFileName,lineNumber:155}});
style:rightButtonStyle,__source:{fileName:_jsxFileName,lineNumber:161}});


}
Expand All @@ -167,16 +173,16 @@ _react2.default.createElement(_reactNative.TouchableOpacity,{
key:'rightNavBarBtn',
testID:'rightNavButton',
style:style,
onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:166}},
onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:172}},

rightTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:172}},
rightTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:178}},
rightTitle),


!rightTitle&&buttonImage&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-end'},__source:{fileName:_jsxFileName,lineNumber:176}},
!rightTitle&&buttonImage&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-end'},__source:{fileName:_jsxFileName,lineNumber:182}},
menuIcon||_react2.default.createElement(_reactNative.Image,{
source:buttonImage,
style:[state.rightButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:177}}))));
style:[state.rightButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:183}}))));



Expand Down
32 changes: 17 additions & 15 deletions dist/Router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,28 +72,29 @@ return component.navigationOptions;
}
return function(_ref2){var navigation=_ref2.navigation,screenProps=_ref2.screenProps;
var navigationParams=navigation.state.params||{};
var state=_extends({navigation:navigation},params,navigationParams,screenProps);
var res=_extends({},
props,{
headerTintColor:navBarButtonColor,
headerTintColor:navBarButtonColor||props.tintColor||navigationParams.tintColor||navigationParams.headerTintColor,
headerTitleStyle:headerTitleStyle||titleStyle,
title:getValue(navigationParams.title||title||getTitle,_extends({navigation:navigation},params,navigationParams,screenProps)),
headerBackTitle:getValue(navigationParams.backTitle||backTitle,_extends({navigation:navigation},params,navigationParams,screenProps)),
headerRight:getValue(navigationParams.right||right||rightButton||params.renderRightButton,_extends({navigation:navigation},navigationParams,screenProps)),
headerLeft:getValue(navigationParams.left||left||leftButton||params.renderLeftButton,_extends({navigation:navigation},params,navigationParams,screenProps)),
headerTitle:getValue(navigationParams.renderTitle||renderTitle||params.renderTitle,_extends({navigation:navigation},params,navigationParams,screenProps)),
headerStyle:getValue(navigationParams.headerStyle||headerStyle||navigationBarStyle,_extends({navigation:navigation},params,navigationParams,screenProps)),
title:getValue(navigationParams.title||title||getTitle,state),
headerBackTitle:getValue(navigationParams.backTitle||backTitle,state),
headerRight:getValue(navigationParams.right||right||rightButton||params.renderRightButton,state),
headerLeft:getValue(navigationParams.left||left||leftButton||params.renderLeftButton,state),
headerTitle:getValue(navigationParams.renderTitle||renderTitle||params.renderTitle,state),
headerStyle:getValue(navigationParams.headerStyle||headerStyle||navigationBarStyle,state),
headerBackImage:navigationParams.backButtonImage||backButtonImage});

if(NavBar){
res.header=function(data){return _react2.default.createElement(NavBar,_extends({navigation:navigation},data,params,{__source:{fileName:_jsxFileName,lineNumber:88}}));};
res.header=function(data){return _react2.default.createElement(NavBar,_extends({navigation:navigation},data,params,{__source:{fileName:_jsxFileName,lineNumber:89}}));};
}

if(panHandlers===null){
res.gesturesEnabled=false;
}

if(navigationBarTitleImage){
res.headerTitle=_react2.default.createElement(_reactNative.Image,{source:navigationBarTitleImage,style:navigationBarTitleImageStyle,__source:{fileName:_jsxFileName,lineNumber:96}});
res.headerTitle=_react2.default.createElement(_reactNative.Image,{source:navigationBarTitleImage,style:navigationBarTitleImageStyle,__source:{fileName:_jsxFileName,lineNumber:97}});
}

if(tabBarLabel){
Expand All @@ -107,7 +108,8 @@ var componentData={};

if(component){var _arr=
['onRight','onLeft','rightButton','leftButton','leftTitle','rightTitle','rightButtonImage',
'leftButtonImage'];for(var _i=0;_i<_arr.length;_i++){var key=_arr[_i];
'leftButtonImage','rightButtonTextStyle','leftButtonTextStyle','rightButtonIconStyle','leftButtonIconStyle',
'leftButtonTintColor','rightButtonTintColor'];for(var _i=0;_i<_arr.length;_i++){var key=_arr[_i];
if(component[key]){
componentData[key]=component[key];
}
Expand All @@ -117,14 +119,14 @@ componentData[key]=component[key];
if(rightButtonImage||rightTitle||params.renderRightButton||onRight||navigationParams.onRight||
navigationParams.rightTitle||navigationParams.rightButtonImage||rightButtonTextStyle){
res.headerRight=getValue(navigationParams.right||navigationParams.rightButton||params.renderRightButton,_extends({},
navigationParams,screenProps))||_react2.default.createElement(RightNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:120}}));
navigationParams,screenProps))||_react2.default.createElement(RightNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:122}}));
}

if(leftButtonImage||backButtonImage||backTitle||leftTitle||params.renderLeftButton||leftButtonTextStyle||
backButtonTextStyle||onLeft||navigationParams.leftTitle||navigationParams.onLeft||navigationParams.leftButtonImage||
navigationParams.backButtonImage||navigationParams.backTitle){
res.headerLeft=getValue(navigationParams.left||navigationParams.leftButton||params.renderLeftButton,_extends({},params,navigationParams,screenProps))||
onLeft&&(leftTitle||navigationParams.leftTitle||leftButtonImage)&&_react2.default.createElement(LeftNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:127}}))||(
onLeft&&(leftTitle||navigationParams.leftTitle||leftButtonImage)&&_react2.default.createElement(LeftNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:129}}))||(
init?null:(0,_NavBar.renderBackButton)(_extends({},params,navigationParams,screenProps)));
}

Expand Down Expand Up @@ -152,7 +154,7 @@ 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:155}})));});
_react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:157}})));});
}var


Expand Down Expand Up @@ -182,7 +184,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:185}}));
_react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:_navigationStore2.default.dispatch,state:_navigationStore2.default.state}),__source:{fileName:_jsxFileName,lineNumber:187}}));

}}]);return App;}(_react2.default.Component),_class2.propTypes={navigator:_react2.default.PropTypes.func},_temp2))||_class;

Expand Down Expand Up @@ -304,7 +306,7 @@ _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:307}});
return _react2.default.createElement(App,{navigator:AppNavigator,__source:{fileName:_jsxFileName,lineNumber:309}});
};
Router.propTypes={
createReducer:_propTypes2.default.func,
Expand Down
20 changes: 13 additions & 7 deletions src/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function renderBackButton(state) {
state.leftButtonStyle,
];
const buttonImage = state.backButtonImage || _backButtonImage;
const tintColor = state.tintColor || state.navBarButtonColor || state.headerTintColor;
const tintColor = getValue(state.backButtonTintColor, state) || state.tintColor || state.navBarButtonColor || state.headerTintColor;
let onPress = state.onBack;
if (onPress) {
onPress = onPress.bind(null, state);
Expand Down Expand Up @@ -62,10 +62,13 @@ export const LeftButton = (state) => {
const buttonImage = getValue(state.leftButtonImage, state);
const menuIcon = state.drawerIcon;
const style = [styles.leftButton, state.leftButtonStyle];
const textStyle = [styles.barLeftButtonText, state.leftButtonTextStyle];
const leftButtonStyle = [styles.defaultImageStyle, state.leftButtonIconStyle];
const leftButtonTextStyle = getValue(state.leftButtonTextStyle, state);
const leftButtonIconStyle = getValue(state.leftButtonIconStyle, state);
const leftButtonStyle = [styles.defaultImageStyle, leftButtonIconStyle];
const leftTitle = state.getLeftTitle ? state.getLeftTitle(state) : getValue(state.leftTitle, state);
const tintColor = state.tintColor || state.navBarButtonColor || state.headerTintColor;
const textColor = getValue(state.leftButtonTintColor, state);
const tintColor = textColor || state.tintColor || state.navBarButtonColor || state.headerTintColor;
const textStyle = [{ color: tintColor }, styles.barLeftButtonText, leftButtonTextStyle, textColor && { color: textColor }];

if (state.leftButton) {
const Button = state.leftButton || state.left;
Expand Down Expand Up @@ -127,10 +130,13 @@ export const RightButton = (state) => {
let buttonImage = getValue(state.rightButtonImage, state);
let menuIcon = state.drawerIcon;
const style = [styles.rightButton, state.rightButtonStyle];
const textStyle = [styles.barRightButtonText, state.rightButtonTextStyle];
const rightButtonStyle = [styles.defaultImageStyle, state.rightButtonIconStyle];
const rightButtonTextStyle = getValue(state.rightButtonTextStyle, state);
const rightButtonIconStyle = getValue(state.rightButtonIconStyle, state);
const rightButtonStyle = [styles.defaultImageStyle, rightButtonIconStyle];
const rightTitle = state.getRightTitle ? state.getRightTitle(state) : getValue(state.rightTitle, state);
const tintColor = state.tintColor || state.navBarButtonColor || state.headerTintColor;
const textColor = getValue(state.rightButtonTintColor, state);
const tintColor = textColor || state.tintColor || state.navBarButtonColor || state.headerTintColor;
const textStyle = [{ color: tintColor }, styles.barRightButtonText, rightButtonTextStyle, textColor && { color: textColor }];

if (state.rightButton || state.right) {
const Button = state.rightButton || state.right;
Expand Down
16 changes: 9 additions & 7 deletions src/Router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,16 +72,17 @@ function createNavigationOptions(params) {
}
return ({ navigation, screenProps }) => {
const navigationParams = navigation.state.params || {};
const state = { navigation, ...params, ...navigationParams, ...screenProps };
const res = {
...props,
headerTintColor: navBarButtonColor || props.tintColor || navigationParams.tintColor || navigationParams.headerTintColor,
headerTitleStyle: headerTitleStyle || titleStyle,
title: getValue((navigationParams.title) || title || getTitle, { navigation, ...params, ...navigationParams, ...screenProps }),
headerBackTitle: getValue((navigationParams.backTitle) || backTitle, { navigation, ...params, ...navigationParams, ...screenProps }),
headerRight: getValue((navigationParams.right) || right || rightButton || params.renderRightButton, { navigation, ...navigationParams, ...screenProps }),
headerLeft: getValue((navigationParams.left) || left || leftButton || params.renderLeftButton, { navigation, ...params, ...navigationParams, ...screenProps }),
headerTitle: getValue((navigationParams.renderTitle) || renderTitle || params.renderTitle, { navigation, ...params, ...navigationParams, ...screenProps }),
headerStyle: getValue((navigationParams.headerStyle || headerStyle || navigationBarStyle), { navigation, ...params, ...navigationParams, ...screenProps }),
title: getValue((navigationParams.title) || title || getTitle, state),
headerBackTitle: getValue((navigationParams.backTitle) || backTitle, state),
headerRight: getValue((navigationParams.right) || right || rightButton || params.renderRightButton, state),
headerLeft: getValue((navigationParams.left) || left || leftButton || params.renderLeftButton, state),
headerTitle: getValue((navigationParams.renderTitle) || renderTitle || params.renderTitle, state),
headerStyle: getValue((navigationParams.headerStyle || headerStyle || navigationBarStyle), state),
headerBackImage: navigationParams.backButtonImage || backButtonImage,
};
if (NavBar) {
Expand All @@ -107,7 +108,8 @@ function createNavigationOptions(params) {
// copy all component static functions
if (component) {
for (const key of ['onRight', 'onLeft', 'rightButton', 'leftButton', 'leftTitle', 'rightTitle', 'rightButtonImage',
'leftButtonImage']) {
'leftButtonImage', 'rightButtonTextStyle', 'leftButtonTextStyle', 'rightButtonIconStyle', 'leftButtonIconStyle',
'leftButtonTintColor', 'rightButtonTintColor']) {
if (component[key]) {
componentData[key] = component[key];
}
Expand Down

0 comments on commit b1257d9

Please sign in to comment.