react-navigation-drawer/lib/module/views/DrawerView.js

Drawer navigator component for React Navigation

import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _extends from"@babel/runtime/helpers/extends";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/drawer/src/views/DrawerView.tsx";import*as React from'react';import{Dimensions,StyleSheet}from'react-native';import{SceneView,ThemeColors,ThemeContext}from'react-navigation';import{ScreenContainer}from'react-native-screens';import*as DrawerActions from'../routers/DrawerActions';import DrawerSidebar from'./DrawerSidebar';import DrawerGestureContext from'../utils/DrawerGestureContext';import ResourceSavingScene from'./ResourceSavingScene';import Drawer from'./Drawer';var DrawerView=function(_React$PureComponent){_inherits(DrawerView,_React$PureComponent);function DrawerView(){var _getPrototypeOf2;var _this;_classCallCheck(this,DrawerView);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(DrawerView)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={loaded:[_this.props.navigation.state.index],drawerWidth:typeof _this.props.navigationConfig.drawerWidth==='function'?_this.props.navigationConfig.drawerWidth():_this.props.navigationConfig.drawerWidth};_this.drawerGestureRef=React.createRef();_this.handleDrawerOpen=function(){var navigation=_this.props.navigation;navigation.dispatch(DrawerActions.openDrawer({key:navigation.state.key}));};_this.handleDrawerClose=function(){var navigation=_this.props.navigation;navigation.dispatch(DrawerActions.closeDrawer({key:navigation.state.key}));};_this.updateWidth=function(){var drawerWidth=typeof _this.props.navigationConfig.drawerWidth==='function'?_this.props.navigationConfig.drawerWidth():_this.props.navigationConfig.drawerWidth;if(_this.state.drawerWidth!==drawerWidth){_this.setState({drawerWidth:drawerWidth});}};_this.renderNavigationView=function(_ref){var progress=_ref.progress;return React.createElement(DrawerSidebar,_extends({screenProps:_this.props.screenProps,drawerOpenProgress:progress,navigation:_this.props.navigation,descriptors:_this.props.descriptors,contentComponent:_this.props.navigationConfig.contentComponent,contentOptions:_this.props.navigationConfig.contentOptions,drawerPosition:_this.props.navigationConfig.drawerPosition,style:_this.props.navigationConfig.style},_this.props.navigationConfig,{__source:{fileName:_jsxFileName,lineNumber:132}}));};_this.renderContent=function(){var _this$props=_this.props,lazy=_this$props.lazy,navigation=_this$props.navigation;var loaded=_this.state.loaded;var routes=navigation.state.routes;if(_this.props.navigationConfig.unmountInactiveRoutes){var activeKey=navigation.state.routes[navigation.state.index].key;var descriptor=_this.props.descriptors[activeKey];return React.createElement(SceneView,{navigation:descriptor.navigation,screenProps:_this.props.screenProps,component:descriptor.getComponent(),__source:{fileName:_jsxFileName,lineNumber:156}});}else{return React.createElement(ScreenContainer,{style:styles.content,__source:{fileName:_jsxFileName,lineNumber:164}},routes.map(function(route,index){if(lazy&&!loaded.includes(index)){return null;}var isFocused=navigation.state.index===index;var descriptor=_this.props.descriptors[route.key];return React.createElement(ResourceSavingScene,{key:route.key,style:[StyleSheet.absoluteFill,{opacity:isFocused?1:0}],isVisible:isFocused,__source:{fileName:_jsxFileName,lineNumber:175}},React.createElement(SceneView,{navigation:descriptor.navigation,screenProps:_this.props.screenProps,component:descriptor.getComponent(),__source:{fileName:_jsxFileName,lineNumber:183}}));}));}};_this.setDrawerGestureRef=function(ref){_this.drawerGestureRef.current=ref;};return _this;}_createClass(DrawerView,[{key:"componentDidMount",value:function componentDidMount(){Dimensions.addEventListener('change',this.updateWidth);}},{key:"componentWillUnmount",value:function componentWillUnmount(){Dimensions.removeEventListener('change',this.updateWidth);}},{key:"getDrawerBackgroundColor",value:function getDrawerBackgroundColor(){var drawerBackgroundColor=this.props.navigationConfig.drawerBackgroundColor;if(drawerBackgroundColor){return typeof drawerBackgroundColor==='string'?drawerBackgroundColor:drawerBackgroundColor[this.context];}else{return ThemeColors[this.context].bodyContent;}}},{key:"getOverlayColor",value:function getOverlayColor(){var overlayColor=this.props.navigationConfig.overlayColor;if(overlayColor){return typeof overlayColor==='string'?overlayColor:overlayColor[this.context];}else{return'rgba(0,0,0,0.5)';}}},{key:"render",value:function render(){var navigation=this.props.navigation;var _this$props$navigatio=this.props.navigationConfig,drawerType=_this$props$navigatio.drawerType,sceneContainerStyle=_this$props$navigatio.sceneContainerStyle,edgeWidth=_this$props$navigatio.edgeWidth,minSwipeDistance=_this$props$navigatio.minSwipeDistance,hideStatusBar=_this$props$navigatio.hideStatusBar,statusBarAnimation=_this$props$navigatio.statusBarAnimation,gestureHandlerProps=_this$props$navigatio.gestureHandlerProps;var activeKey=navigation.state.routes[navigation.state.index].key;var drawerLockMode=this.props.descriptors[activeKey].options.drawerLockMode;var drawerBackgroundColor=this.getDrawerBackgroundColor();var overlayColor=this.getOverlayColor();var isOpen=drawerLockMode==='locked-closed'?false:drawerLockMode==='locked-open'?true:this.props.navigation.state.isDrawerOpen;return React.createElement(DrawerGestureContext.Provider,{value:this.drawerGestureRef,__source:{fileName:_jsxFileName,lineNumber:250}},React.createElement(Drawer,{open:isOpen,locked:drawerLockMode==='locked-open'||drawerLockMode==='locked-closed',onOpen:this.handleDrawerOpen,onClose:this.handleDrawerClose,onGestureRef:this.setDrawerGestureRef,gestureHandlerProps:gestureHandlerProps,drawerType:drawerType,drawerPosition:this.props.navigationConfig.drawerPosition,sceneContainerStyle:sceneContainerStyle,drawerStyle:{backgroundColor:drawerBackgroundColor,width:this.state.drawerWidth},overlayStyle:{backgroundColor:overlayColor},swipeEdgeWidth:edgeWidth,swipeDistanceThreshold:minSwipeDistance,hideStatusBar:hideStatusBar,statusBarAnimation:statusBarAnimation,renderDrawerContent:this.renderNavigationView,renderSceneContent:this.renderContent,__source:{fileName:_jsxFileName,lineNumber:251}}));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,prevState){var index=nextProps.navigation.state.index;return{loaded:prevState.loaded.includes(index)?prevState.loaded:[].concat(_toConsumableArray(prevState.loaded),[index])};}}]);return DrawerView;}(React.PureComponent);DrawerView.contextType=ThemeContext;DrawerView.defaultProps={lazy:true};export{DrawerView as default};var styles=StyleSheet.create({content:{flex:1}});
//# sourceMappingURL=DrawerView.js.map