UNPKG

react-navigation-drawer

Version:

Drawer navigator component for React Navigation

2 lines 8.06 kB
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNavigation=require("react-navigation");var _reactNativeScreens=require("react-native-screens");var DrawerActions=_interopRequireWildcard(require("../routers/DrawerActions"));var _DrawerSidebar=_interopRequireDefault(require("./DrawerSidebar"));var _DrawerGestureContext=_interopRequireDefault(require("../utils/DrawerGestureContext"));var _ResourceSavingScene=_interopRequireDefault(require("./ResourceSavingScene"));var _Drawer=_interopRequireDefault(require("./Drawer"));var _jsxFileName="/Users/satya/Workspace/Callstack/drawer/src/views/DrawerView.tsx";var DrawerView=function(_React$PureComponent){(0,_inherits2.default)(DrawerView,_React$PureComponent);function DrawerView(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,DrawerView);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(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.default,(0,_extends2.default)({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(_reactNavigation.SceneView,{navigation:descriptor.navigation,screenProps:_this.props.screenProps,component:descriptor.getComponent(),__source:{fileName:_jsxFileName,lineNumber:156}});}else{return React.createElement(_reactNativeScreens.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.default,{key:route.key,style:[_reactNative.StyleSheet.absoluteFill,{opacity:isFocused?1:0}],isVisible:isFocused,__source:{fileName:_jsxFileName,lineNumber:175}},React.createElement(_reactNavigation.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;}(0,_createClass2.default)(DrawerView,[{key:"componentDidMount",value:function componentDidMount(){_reactNative.Dimensions.addEventListener('change',this.updateWidth);}},{key:"componentWillUnmount",value:function componentWillUnmount(){_reactNative.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 _reactNavigation.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.default.Provider,{value:this.drawerGestureRef,__source:{fileName:_jsxFileName,lineNumber:250}},React.createElement(_Drawer.default,{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((0,_toConsumableArray2.default)(prevState.loaded),[index])};}}]);return DrawerView;}(React.PureComponent);exports.default=DrawerView;DrawerView.contextType=_reactNavigation.ThemeContext;DrawerView.defaultProps={lazy:true};var styles=_reactNative.StyleSheet.create({content:{flex:1}}); //# sourceMappingURL=DrawerView.js.map