diff --git a/src/app.js b/src/app.js index d4e8aec6..e484d1ff 100644 --- a/src/app.js +++ b/src/app.js @@ -1,6 +1,6 @@ import React, {Component} from 'react'; import { View, Text } from "react-native"; -import { createStackNavigator, createAppContainer, createDrawerNavigator } from "react-navigation"; +import { createStackNavigator, createAppContainer, createDrawerNavigator, DrawerActions, NavigationActions } from "react-navigation"; import KeysManager from './lib/keysManager' import StyleKit from "./style/StyleKit" @@ -19,12 +19,39 @@ import Settings from "./screens/Settings" import NoteOptions from "./screens/NoteOptions" import InputModal from "./screens/InputModal" +let leftDrawerLocked = false; +let rightDrawerLocked = true; + const AppStack = createStackNavigator({ Notes: {screen: Notes}, Compose: {screen: Compose}, NoteOptions: {screen : NoteOptions}, }, { - initialRouteName: 'Notes' + initialRouteName: 'Notes', +}) + +AppStack.navigationOptions = ({ navigation }) => { + return {drawerLockMode: rightDrawerLocked ? "locked-closed" : null} +}; + +const AppDrawerStack = createDrawerNavigator({ + Main: AppStack +}, { + contentComponent: SideMenu, + drawerPosition: "right", + drawerType: 'slide', + getCustomActionCreators: (route, stateKey) => { + return { + openRightDrawer: () => DrawerActions.openDrawer({ key: stateKey }), + closeRightDrawer: () => DrawerActions.closeDrawer({ key: stateKey }), + lockRightDrawer: (lock) => { + // this is the key part + rightDrawerLocked = lock; + // We have to return something + return NavigationActions.setParams({params: { dummy: true }, key: route.key}) + } + }; + }, }) const SettingsStack = createStackNavigator({ @@ -35,8 +62,8 @@ const InputModalStack = createStackNavigator({ Screen1: InputModal }) -const ModalStack = createStackNavigator({ - Home: AppStack, +const AppDrawer = createStackNavigator({ + Home: AppDrawerStack, Settings: SettingsStack, NewTag: InputModalStack }, { @@ -44,10 +71,29 @@ const ModalStack = createStackNavigator({ headerMode: 'none', }) +AppDrawer.navigationOptions = ({ navigation }) => { + return {drawerLockMode: leftDrawerLocked ? "locked-closed" : null} +}; + + const DrawerStack = createDrawerNavigator({ - Main: ModalStack + Main: AppDrawer, }, { contentComponent: SideMenu, + drawerPosition: "left", + drawerType: 'slide', + getCustomActionCreators: (route, stateKey) => { + return { + openLeftDrawer: () => DrawerActions.openDrawer({ key: stateKey }), + closeLeftDrawer: () => DrawerActions.closeDrawer({ key: stateKey }), + lockLeftDrawer: (lock) => { + // this is the key part + leftDrawerLocked = lock; + // We have to return something + return NavigationActions.setParams({params: { dummy: true }, key: route.key}) + } + }; + }, }); const AppContainer = createAppContainer(DrawerStack); diff --git a/src/screens/Abstract.js b/src/screens/Abstract.js index 742eaa2b..5f8ddafd 100644 --- a/src/screens/Abstract.js +++ b/src/screens/Abstract.js @@ -24,8 +24,7 @@ export default class Abstract extends Component { headerStyle: { backgroundColor: StyleKit.variable("stylekitBackgroundColor") }, - headerTintColor: StyleKit.variable("stylekitInfoColor"), - drawerLockMode: navigation.getParam("drawerLockMode") || templateOptions.drawerLockMode + headerTintColor: StyleKit.variable("stylekitInfoColor") } let headerLeft, headerRight; @@ -88,7 +87,11 @@ export default class Abstract extends Component { componentWillUnmount() { this.willUnmount = true; this.mounted = false; + for(var listener of this.listeners) { + listener.remove(); + } ApplicationState.get().removeStateObserver(this._stateObserver); + this.componentDidBlur(); // This is not called automatically when the component unmounts. https://github.com/react-navigation/react-navigation/issues/4003 } componentDidMount() { @@ -113,12 +116,6 @@ export default class Abstract extends Component { this.configureNavBar(true); } - componentWillUnmount() { - for(var listener of this.listeners) { - listener.remove(); - } - } - componentWillFocus() { this.willUnmount = false; this.mounted = false; @@ -133,11 +130,11 @@ export default class Abstract extends Component { this.configureNavBar(false); } - componentWillBlur(){ + componentWillBlur() { } - componentDidBlur(){ + componentDidBlur() { this.willBeVisible = false; this.visible = false; } diff --git a/src/screens/Compose.js b/src/screens/Compose.js index 323c523c..a30e08b9 100644 --- a/src/screens/Compose.js +++ b/src/screens/Compose.js @@ -33,7 +33,8 @@ export default class Compose extends Abstract { let templateOptions = { title: "Compose", rightButton: { - title: "Options" + title: null, + iconName: "ios-menu-outline", } } return Abstract.getDefaultNavigationOptions({navigation, navigationOptions, templateOptions}); @@ -89,10 +90,12 @@ export default class Compose extends Abstract { configureHeaderBar() { this.props.navigation.setParams({ title: 'Compose', - drawerLockMode: "locked-closed", rightButton: { - title: "Options", - onPress: () => {this.presentOptions();}, + title: null, + iconName: "ios-menu-outline", + onPress: () => { + this.props.navigation.openRightDrawer(); + }, disabled: !this.note.uuid } }) @@ -126,6 +129,9 @@ export default class Compose extends Abstract { componentDidFocus() { super.componentDidFocus(); + this.props.navigation.lockLeftDrawer(true); + this.props.navigation.lockRightDrawer(false); + if(this.note.dummy) { if(this.refs.input) { this.refs.input.focus(); @@ -139,6 +145,12 @@ export default class Compose extends Abstract { } } + componentDidBlur() { + super.componentDidBlur(); + this.props.navigation.lockLeftDrawer(false); + this.props.navigation.lockRightDrawer(true); + } + presentOptions() { if(ApplicationState.isAndroid && this.input) { this.input.blur(); diff --git a/src/screens/Notes.js b/src/screens/Notes.js index e2a234be..e3d80e77 100644 --- a/src/screens/Notes.js +++ b/src/screens/Notes.js @@ -24,14 +24,8 @@ import Icon from 'react-native-vector-icons/Ionicons'; import FAB from 'react-native-fab'; import HeaderButtons, { HeaderButton, Item } from 'react-navigation-header-buttons'; -const IoniconsHeaderButton = passMeFurther => ( - // the `passMeFurther` variable here contains props from as well as - // and it is important to pass those props to `HeaderButton` - // then you may add some information like icon size or color (if you use icons) - -); - export default class Notes extends Abstract { + constructor(props) { super(props); @@ -43,7 +37,7 @@ export default class Notes extends Abstract { title: null, iconName: "ios-menu-outline", onPress: () => { - this.openDrawer(); + this.props.navigation.openLeftDrawer(); } } }) @@ -90,7 +84,6 @@ export default class Notes extends Abstract { componentDidMount() { super.componentDidMount(); - this.props.navigation.setParams({ toggleDrawer: this.toggleDrawer }); } componentWillUnmount() { @@ -116,7 +109,7 @@ export default class Notes extends Abstract { registerObservers() { this.optionsObserver = this.options.addChangeObserver((options, eventType) => { - this.closeDrawer(); + this.props.navigation.closeLeftDrawer(); // should only show for non-search term change if(eventType !== OptionsState.OptionsStateChangeEventSearch) { this.setTitle(null, "Loading..."); @@ -311,18 +304,6 @@ export default class Notes extends Abstract { }); } - toggleDrawer = () => { - this.props.navigation.toggleDrawer(); - } - - openDrawer = () => { - this.props.navigation.openDrawer(); - } - - closeDrawer = () => { - this.props.navigation.closeDrawer(); - } - presentFilterScreen() { Navigation.showModal({ stack: {