react-navigation-stack/lib/module/views/Header/Header.js

Stack navigator component for React Navigation

import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/satya/Workspace/Callstack/react-navigation-stack/src/views/Header/Header.tsx";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(source,true).forEach(function(key){_defineProperty(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}import*as React from'react';import{Animated,Image,Platform,StyleSheet,View,I18nManager,MaskedViewIOS}from'react-native';import{ThemeContext,ThemeColors,withOrientation,SafeAreaView}from'react-navigation';import HeaderTitle from'./HeaderTitle';import HeaderBackButton from'./HeaderBackButton';import ModularHeaderBackButton from'./ModularHeaderBackButton';import HeaderStyleInterpolator from'./HeaderStyleInterpolator';var APPBAR_HEIGHT=Platform.select({ios:44,android:56,default:64});var STATUSBAR_HEIGHT=Platform.select({ios:20,default:0});var TITLE_OFFSET_CENTER_ALIGN=Platform.select({ios:70,default:56});var TITLE_OFFSET_LEFT_ALIGN=Platform.select({ios:20,android:56,default:64});var getTitleOffsets=function getTitleOffsets(layoutPreset,hasLeftComponent,hasRightComponent){if(layoutPreset==='left'){var style={left:TITLE_OFFSET_LEFT_ALIGN,right:TITLE_OFFSET_LEFT_ALIGN};if(!hasLeftComponent){style.left=Platform.OS==='web'?16:0;}if(!hasRightComponent){style.right=0;}return style;}else if(layoutPreset==='center'){var _style={left:TITLE_OFFSET_CENTER_ALIGN,right:TITLE_OFFSET_CENTER_ALIGN};if(!hasLeftComponent&&!hasRightComponent){_style.left=0;_style.right=0;}return _style;}return undefined;};var getAppBarHeight=function getAppBarHeight(isLandscape){if(Platform.OS==='ios'){if(isLandscape&&!Platform.isPad){return 32;}else{return 44;}}else if(Platform.OS==='android'){return 56;}else{return 64;}};var Header=function(_React$PureComponent){_inherits(Header,_React$PureComponent);function Header(){var _getPrototypeOf2;var _this;_classCallCheck(this,Header);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(Header)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={widths:{}};_this.renderTitleComponent=function(props){var layoutPreset=_this.props.layoutPreset;var options=props.scene.descriptor.options;var headerTitle=options.headerTitle;if(React.isValidElement(headerTitle)){return headerTitle;}var titleString=_this.getHeaderTitleString(props.scene);var titleStyle=options.headerTitleStyle;var color=options.headerTintColor;var allowFontScaling=options.headerTitleAllowFontScaling;var onLayout=layoutPreset==='center'?function(e){var width=e.nativeEvent.layout.width;_this.setState(function(state){return{widths:_objectSpread({},state.widths,_defineProperty({},props.scene.key,width))};});}:undefined;var render=headerTitle&&typeof headerTitle!=='string'?headerTitle:function(props){return React.createElement(HeaderTitle,_extends({},props,{__source:{fileName:_jsxFileName,lineNumber:227}}));};return render({onLayout:onLayout,allowFontScaling:Boolean(allowFontScaling),style:[color?{color:color}:null,layoutPreset==='center'?{textAlign:'center'}:{textAlign:'left'},titleStyle],children:titleString});};_this.renderLeftComponent=function(props){var options=props.scene.descriptor.options;if(React.isValidElement(options.headerLeft)||options.headerLeft===null){return options.headerLeft;}if(!options.headerLeft&&props.scene.index===0){return;}var backButtonTitle=_this.getBackButtonTitleString(props.scene);var truncatedBackButtonTitle=_this.getTruncatedBackButtonTitle(props.scene);var width=_this.state.widths[props.scene.key]?(_this.props.layout.initWidth-_this.state.widths[props.scene.key])/2:undefined;var RenderedLeftComponent=options.headerLeft||HeaderBackButton;var goBack=function goBack(){requestAnimationFrame(function(){props.scene.descriptor.navigation.goBack(props.scene.descriptor.key);});};return React.createElement(RenderedLeftComponent,{onPress:goBack,pressColorAndroid:options.headerPressColorAndroid,tintColor:options.headerTintColor,backImage:options.headerBackImage,title:backButtonTitle,truncatedTitle:truncatedBackButtonTitle,backTitleVisible:_this.props.backTitleVisible,allowFontScaling:options.headerBackAllowFontScaling,titleStyle:options.headerBackTitleStyle,layoutPreset:_this.props.layoutPreset,width:width,scene:props.scene,__source:{fileName:_jsxFileName,lineNumber:275}});};_this.renderModularLeftComponent=function(props,ButtonContainerComponent,LabelContainerComponent){var _props$scene$descript=props.scene.descriptor,options=_props$scene$descript.options,navigation=_props$scene$descript.navigation;var backButtonTitle=_this.getBackButtonTitleString(props.scene);var truncatedBackButtonTitle=_this.getTruncatedBackButtonTitle(props.scene);var width=_this.state.widths[props.scene.key]?(_this.props.layout.initWidth-_this.state.widths[props.scene.key])/2:undefined;var goBack=function goBack(){requestAnimationFrame(function(){navigation.goBack(props.scene.descriptor.key);});};return React.createElement(ModularHeaderBackButton,{onPress:goBack,ButtonContainerComponent:ButtonContainerComponent,LabelContainerComponent:LabelContainerComponent,backTitleVisible:_this.props.backTitleVisible,pressColorAndroid:options.headerPressColorAndroid,tintColor:options.headerTintColor,backImage:options.headerBackImage,title:backButtonTitle,truncatedTitle:truncatedBackButtonTitle,titleStyle:options.headerBackTitleStyle,layoutPreset:_this.props.layoutPreset,width:width,scene:props.scene,__source:{fileName:_jsxFileName,lineNumber:318}});};_this.renderRightComponent=function(props){var headerRight=props.scene.descriptor.options.headerRight;if(typeof headerRight==='function'){return headerRight();}return headerRight||null;};_this.renderLeft=function(props){var options=props.scene.descriptor.options;var transitionPreset=_this.props.transitionPreset;var style=props.style;if(options.headerLeftContainerStyle){style=[style,options.headerLeftContainerStyle];}if(transitionPreset!=='uikit'||options.headerBackImage||options.headerLeft||options.headerLeft===null){return _this.renderSubView(_objectSpread({},props,{style:style}),'left',_this.renderLeftComponent,_this.props.leftInterpolator);}else{return _this.renderModularSubView(_objectSpread({},props,{style:style}),'left',_this.renderModularLeftComponent,_this.props.leftLabelInterpolator,_this.props.leftButtonInterpolator);}};_this.renderTitle=function(props,options){var _this$props=_this.props,layoutPreset=_this$props.layoutPreset,transitionPreset=_this$props.transitionPreset;var style=[{justifyContent:layoutPreset==='center'?'center':'flex-start'},getTitleOffsets(layoutPreset,options.hasLeftComponent,options.hasRightComponent),options.headerTitleContainerStyle];return _this.renderSubView(_objectSpread({},props,{style:style}),'title',_this.renderTitleComponent,transitionPreset==='uikit'?_this.props.titleFromLeftInterpolator:_this.props.titleInterpolator);};_this.renderRight=function(props){var options=props.scene.descriptor.options;var style=props.style;if(options.headerRightContainerStyle){style=[style,options.headerRightContainerStyle];}return _this.renderSubView(_objectSpread({},props,{style:style}),'right',_this.renderRightComponent,_this.props.rightInterpolator);};_this.renderBackground=function(props){var _props$scene=props.scene,index=_props$scene.index,options=_props$scene.descriptor.options;var offset=_this.props.navigation.state.index-index;if(Math.abs(offset)>2){return null;}return _this.renderSubView(_objectSpread({},props,{style:StyleSheet.absoluteFill}),'background',function(){return options.headerBackground;},_this.props.backgroundInterpolator);};_this.renderModularSubView=function(props,name,renderer,labelStyleInterpolator,buttonStyleInterpolator){var scene=props.scene;var index=scene.index,isStale=scene.isStale,key=scene.key;if(index===0){return;}var offset=_this.props.navigation.state.index-index;if(Math.abs(offset)>2){return null;}var ButtonContainer=function ButtonContainer(_ref){var children=_ref.children;return React.createElement(Animated.View,{style:[buttonStyleInterpolator(_objectSpread({},_this.props,{},props))],__source:{fileName:_jsxFileName,lineNumber:480}},children);};var LabelContainer=function LabelContainer(_ref2){var children=_ref2.children;return React.createElement(Animated.View,{style:[labelStyleInterpolator(_objectSpread({},_this.props,{},props))],__source:{fileName:_jsxFileName,lineNumber:488}},children);};var subView=renderer(props,ButtonContainer,LabelContainer);if(subView===null){return subView;}var pointerEvents=offset!==0||isStale?'none':'box-none';return React.createElement(View,{key:name+"_"+key,pointerEvents:pointerEvents,style:[styles.item,styles[name],props.style],__source:{fileName:_jsxFileName,lineNumber:508}},subView);};_this.renderSubView=function(props,name,renderer,styleInterpolator){var scene=props.scene;var index=scene.index,isStale=scene.isStale,key=scene.key;var offset=_this.props.navigation.state.index-index;if(Math.abs(offset)>2){return null;}var subView=renderer(props);if(subView==null){return null;}var pointerEvents=offset!==0||isStale?'none':'box-none';return React.createElement(Animated.View,{pointerEvents:pointerEvents,key:name+"_"+key,style:[styles.item,styles[name],props.style,styleInterpolator&&styleInterpolator(_objectSpread({},_this.props,{},props))],__source:{fileName:_jsxFileName,lineNumber:544}},subView);};_this.renderHeader=function(props){var options=props.scene.descriptor.options;if(options.header===null||options.headerShown===false){return null;}var left=_this.renderLeft(props);var right=_this.renderRight(props);var title=_this.renderTitle(props,{hasLeftComponent:!!left,hasRightComponent:!!right,headerTitleContainerStyle:options.headerTitleContainerStyle});var transitionPreset=_this.props.transitionPreset;var wrapperProps={style:styles.header,key:"scene_"+props.scene.key};if(options.headerLeft||options.headerBackImage||Platform.OS!=='ios'||transitionPreset!=='uikit'){return React.createElement(View,_extends({},wrapperProps,{__source:{fileName:_jsxFileName,lineNumber:590}}),title,left,right);}else{return React.createElement(MaskedViewIOS,_extends({},wrapperProps,{maskElement:React.createElement(View,{style:styles.iconMaskContainer,__source:{fileName:_jsxFileName,lineNumber:601}},React.createElement(Image,{source:require('../assets/back-icon-mask.png'),style:styles.iconMask,__source:{fileName:_jsxFileName,lineNumber:602}}),React.createElement(View,{style:styles.iconMaskFillerRect,__source:{fileName:_jsxFileName,lineNumber:606}})),__source:{fileName:_jsxFileName,lineNumber:598}}),title,left,right);}};return _this;}_createClass(Header,[{key:"getHeaderTitleString",value:function getHeaderTitleString(scene){var options=scene.descriptor.options;if(typeof options.headerTitle==='string'){return options.headerTitle;}if(options.title&&typeof options.title!=='string'&&__DEV__){throw new Error("Invalid title for route \""+scene.route.routeName+"\" - title must be string or null, instead it was of type "+typeof options.title);}return options.title;}},{key:"getLastScene",value:function getLastScene(scene){return this.props.scenes.find(function(s){return s.index===scene.index-1;});}},{key:"getBackButtonTitleString",value:function getBackButtonTitleString(scene){var lastScene=this.getLastScene(scene);if(!lastScene){return null;}var headerBackTitle=lastScene.descriptor.options.headerBackTitle;if(headerBackTitle||headerBackTitle===null){return headerBackTitle;}return this.getHeaderTitleString(lastScene);}},{key:"getTruncatedBackButtonTitle",value:function getTruncatedBackButtonTitle(scene){var lastScene=this.getLastScene(scene);if(!lastScene){return null;}return lastScene.descriptor.options.headerTruncatedBackTitle;}},{key:"render",value:function render(){var _this2=this;var appBar;var background;var _this$props2=this.props,mode=_this$props2.mode,scene=_this$props2.scene,isLandscape=_this$props2.isLandscape;if(mode==='float'){var scenesByIndex={};this.props.scenes.forEach(function(scene){scenesByIndex[scene.index]=scene;});var scenesProps=Object.values(scenesByIndex).map(function(scene){return{position:_this2.props.position,scene:scene};});appBar=scenesProps.map(function(props){return _this2.renderHeader(props);});background=scenesProps.map(function(props){return _this2.renderBackground(props);});}else{var headerProps={position:new Animated.Value(this.props.scene.index),scene:this.props.scene};appBar=this.renderHeader(headerProps);background=this.renderBackground(headerProps);}var options=scene.descriptor.options;var _options$headerStyle=options.headerStyle,headerStyle=_options$headerStyle===void 0?{}:_options$headerStyle;var headerStyleObj=StyleSheet.flatten(headerStyle);var appBarHeight=getAppBarHeight(isLandscape);var alignItems=headerStyleObj.alignItems,justifyContent=headerStyleObj.justifyContent,flex=headerStyleObj.flex,flexDirection=headerStyleObj.flexDirection,flexGrow=headerStyleObj.flexGrow,flexShrink=headerStyleObj.flexShrink,flexBasis=headerStyleObj.flexBasis,flexWrap=headerStyleObj.flexWrap,position=headerStyleObj.position,padding=headerStyleObj.padding,paddingHorizontal=headerStyleObj.paddingHorizontal,paddingRight=headerStyleObj.paddingRight,paddingLeft=headerStyleObj.paddingLeft,top=headerStyleObj.top,right=headerStyleObj.right,bottom=headerStyleObj.bottom,left=headerStyleObj.left,safeHeaderStyle=_objectWithoutProperties(headerStyleObj,["alignItems","justifyContent","flex","flexDirection","flexGrow","flexShrink","flexBasis","flexWrap","position","padding","paddingHorizontal","paddingRight","paddingLeft","top","right","bottom","left"]);if(__DEV__){warnIfHeaderStyleDefined(alignItems,'alignItems');warnIfHeaderStyleDefined(justifyContent,'justifyContent');warnIfHeaderStyleDefined(flex,'flex');warnIfHeaderStyleDefined(flexDirection,'flexDirection');warnIfHeaderStyleDefined(flexGrow,'flexGrow');warnIfHeaderStyleDefined(flexShrink,'flexShrink');warnIfHeaderStyleDefined(flexBasis,'flexBasis');warnIfHeaderStyleDefined(flexWrap,'flexWrap');warnIfHeaderStyleDefined(padding,'padding');warnIfHeaderStyleDefined(position,'position');warnIfHeaderStyleDefined(paddingHorizontal,'paddingHorizontal');warnIfHeaderStyleDefined(paddingRight,'paddingRight');warnIfHeaderStyleDefined(paddingLeft,'paddingLeft');warnIfHeaderStyleDefined(top,'top');warnIfHeaderStyleDefined(right,'right');warnIfHeaderStyleDefined(bottom,'bottom');warnIfHeaderStyleDefined(left,'left');}var isDark=this.context==='dark';var containerStyles=[options.headerTransparent?isDark?styles.transparentContainerDark:styles.transparentContainerLight:isDark?styles.containerDark:styles.containerLight,{height:appBarHeight},safeHeaderStyle];var headerForceInset=options.headerForceInset;var forceInset=headerForceInset||{top:'always',bottom:'never',horizontal:'always'};var backgroundColor=safeHeaderStyle.backgroundColor;if(!backgroundColor){backgroundColor=isDark?ThemeColors.dark.header:ThemeColors.light.header;}return React.createElement(Animated.View,{style:[this.props.layoutInterpolator(this.props),Platform.OS==='ios'&&!options.headerTransparent?{backgroundColor:backgroundColor}:null],__source:{fileName:_jsxFileName,lineNumber:727}},React.createElement(SafeAreaView,{forceInset:forceInset,style:containerStyles,__source:{fileName:_jsxFileName,lineNumber:735}},background,React.createElement(View,{style:styles.flexOne,__source:{fileName:_jsxFileName,lineNumber:737}},appBar)));}}]);return Header;}(React.PureComponent);Header.contextType=ThemeContext;Header.defaultProps={layoutInterpolator:HeaderStyleInterpolator.forLayout,leftInterpolator:HeaderStyleInterpolator.forLeft,leftButtonInterpolator:HeaderStyleInterpolator.forLeftButton,leftLabelInterpolator:HeaderStyleInterpolator.forLeftLabel,titleFromLeftInterpolator:HeaderStyleInterpolator.forCenterFromLeft,titleInterpolator:HeaderStyleInterpolator.forCenter,rightInterpolator:HeaderStyleInterpolator.forRight,backgroundInterpolator:HeaderStyleInterpolator.forBackground};function warnIfHeaderStyleDefined(value,styleProp){if(styleProp==='position'&&value==='absolute'){console.warn("position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the headerTransparent navigationOption.");}else if(value!==undefined){console.warn(styleProp+" was given a value of "+value+", this has no effect on headerStyle.");}}var platformContainerStylesLight=Platform.select({android:{elevation:4},web:{boxShadow:"0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)"},default:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:ThemeColors.light.headerBorder}});var platformContainerStylesDark=Platform.select({android:{elevation:4},web:{boxShadow:"0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)"},default:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:ThemeColors.dark.headerBorder}});var styles=StyleSheet.create({containerLight:_objectSpread({},platformContainerStylesLight,{backgroundColor:ThemeColors.light.header}),containerDark:_objectSpread({},platformContainerStylesDark,{backgroundColor:ThemeColors.dark.header}),transparentContainerLight:_objectSpread({},platformContainerStylesLight,{position:'absolute',top:0,left:0,right:0,borderBottomWidth:0,borderBottomColor:'transparent',elevation:0}),transparentContainerDark:_objectSpread({},platformContainerStylesDark,{position:'absolute',top:0,left:0,right:0,borderBottomWidth:0,borderBottomColor:'transparent',elevation:0}),header:_objectSpread({},StyleSheet.absoluteFillObject,{flexDirection:'row'}),item:{backgroundColor:'transparent'},iconMaskContainer:{flex:1,flexDirection:'row',justifyContent:'center'},iconMaskFillerRect:{flex:1,backgroundColor:'#d8d8d8',marginLeft:-5},iconMask:{height:23,width:14.5,marginLeft:8.5,marginTop:-2.5,alignSelf:'center',resizeMode:'contain',transform:[{scaleX:I18nManager.isRTL?-1:1}]},background:{},title:{bottom:0,top:0,position:'absolute',alignItems:'center',flexDirection:'row'},left:{left:0,bottom:0,top:0,position:'absolute',alignItems:'center',flexDirection:'row'},right:{right:0,bottom:0,top:0,position:'absolute',flexDirection:'row',alignItems:'center'},flexOne:{flex:1}});export default _extends(withOrientation(Header),{get HEIGHT(){return APPBAR_HEIGHT+STATUSBAR_HEIGHT;}});
//# sourceMappingURL=Header.js.map