From 7aaf4fb4919c2b4d1a75ea03a8e1e33a0b200ad8 Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Thu, 24 Aug 2017 18:10:03 +0000 Subject: [PATCH] Improved back button handling when note has been modified --- CliClient/package.json | 2 +- .../lib/components/screen-header.js | 6 ++- .../lib/components/screens/note.js | 48 ++++++++++++------- ReactNativeClient/lib/dialogs.js | 24 ++++++++++ ReactNativeClient/lib/services/back-button.js | 43 +++++++++++++++++ ReactNativeClient/root.js | 9 ++-- 6 files changed, 106 insertions(+), 26 deletions(-) create mode 100644 ReactNativeClient/lib/services/back-button.js diff --git a/CliClient/package.json b/CliClient/package.json index 1b5cb4101..195ebd38d 100644 --- a/CliClient/package.json +++ b/CliClient/package.json @@ -7,7 +7,7 @@ "url": "https://github.com/laurent22/joplin" }, "url": "git://github.com/laurent22/joplin.git", - "version": "0.9.16", + "version": "0.9.17", "bin": { "joplin": "./main.js" }, diff --git a/ReactNativeClient/lib/components/screen-header.js b/ReactNativeClient/lib/components/screen-header.js index cb0dd707f..636733e95 100644 --- a/ReactNativeClient/lib/components/screen-header.js +++ b/ReactNativeClient/lib/components/screen-header.js @@ -3,6 +3,7 @@ import { connect } from 'react-redux' import { View, Text, Button, StyleSheet, TouchableOpacity, Picker, Image } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import { Log } from 'lib/log.js'; +import { BackButtonService } from 'lib/services/back-button.js'; import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu'; import { _ } from 'lib/locale.js'; import { Setting } from 'lib/models/setting.js'; @@ -143,8 +144,9 @@ class ScreenHeaderComponent extends Component { this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' }); } - backButton_press() { - this.props.dispatch({ type: 'NAV_BACK' }); + async backButton_press() { + await BackButtonService.back(); + //this.props.dispatch({ type: 'NAV_BACK' }); } searchButton_press() { diff --git a/ReactNativeClient/lib/components/screens/note.js b/ReactNativeClient/lib/components/screens/note.js index 24a16913b..cd1910ebc 100644 --- a/ReactNativeClient/lib/components/screens/note.js +++ b/ReactNativeClient/lib/components/screens/note.js @@ -1,11 +1,12 @@ import React, { Component } from 'react'; -import { BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking, Image } from 'react-native'; +import { Keyboard, BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking, Image } from 'react-native'; import { connect } from 'react-redux' import { uuid } from 'lib/uuid.js'; import { Log } from 'lib/log.js' import { Note } from 'lib/models/note.js' import { Resource } from 'lib/models/resource.js' import { Folder } from 'lib/models/folder.js' +import { BackButtonService } from 'lib/services/back-button.js'; import { BaseModel } from 'lib/base-model.js' import { ActionButton } from 'lib/components/action-button.js'; import Icon from 'react-native-vector-icons/Ionicons'; @@ -48,24 +49,35 @@ class NoteScreenComponent extends BaseScreenComponent { this.styles_ = {}; - // Disabled for now because it doesn't work consistently and proabably interfer with the backHandler - // on root.js. Handling of the back button should be in one single place for this to work well. + this.backHandler = async () => { + if (this.isModified()) { + let buttonId = await dialogs.pop(this, _('This note has been modified:'), [ + { title: _('Save changes'), id: 'save' }, + { title: _('Discard changes'), id: 'discard' }, + { title: _('Cancel'), id: 'cancel' }, + ]); - // this.backHandler = () => { - // if (!this.state.note.id) { - // return false; - // } + if (buttonId == 'cancel') return true; + if (buttonId == 'save') await this.saveNoteButton_press(); + } - // if (this.state.mode == 'edit') { - // this.setState({ - // note: Object.assign({}, this.state.lastSavedNote), - // mode: 'view', - // }); - // return true; - // } + if (!this.state.note.id) { + return false; + } - // return false; - // }; + if (this.state.mode == 'edit') { + Keyboard.dismiss() + + this.setState({ + note: Object.assign({}, this.state.lastSavedNote), + mode: 'view', + }); + + return true; + } + + return false; + }; } styles() { @@ -123,7 +135,7 @@ class NoteScreenComponent extends BaseScreenComponent { } async componentWillMount() { - // BackHandler.addEventListener('hardwareBackPress', this.backHandler); + BackButtonService.addHandler(this.backHandler); let note = null; let mode = 'view'; @@ -148,7 +160,7 @@ class NoteScreenComponent extends BaseScreenComponent { } componentWillUnmount() { - // BackHandler.removeEventListener('hardwareBackPress', this.backHandler); + BackButtonService.removeHandler(this.backHandler); } noteComponent_change(propName, propValue) { diff --git a/ReactNativeClient/lib/dialogs.js b/ReactNativeClient/lib/dialogs.js index 0b12c1111..34865c952 100644 --- a/ReactNativeClient/lib/dialogs.js +++ b/ReactNativeClient/lib/dialogs.js @@ -32,6 +32,30 @@ dialogs.confirm = (parentComponent, message) => { }); }; +dialogs.pop = (parentComponent, message, buttons) => { + if (!'dialogbox' in parentComponent) throw new Error('A "dialogbox" component must be defined on the parent component!'); + + return new Promise((resolve, reject) => { + Keyboard.dismiss(); + + let btns = []; + for (let i = 0; i < buttons.length; i++) { + btns.push({ + text: buttons[i].title, + callback: () => { + parentComponent.dialogbox.close(); + resolve(buttons[i].id); + }, + }); + } + + parentComponent.dialogbox.pop({ + content: message, + btns: btns, + }); + }); +} + dialogs.error = (parentComponent, message) => { Keyboard.dismiss(); return parentComponent.dialogbox.alert(message); diff --git a/ReactNativeClient/lib/services/back-button.js b/ReactNativeClient/lib/services/back-button.js new file mode 100644 index 000000000..81302cb89 --- /dev/null +++ b/ReactNativeClient/lib/services/back-button.js @@ -0,0 +1,43 @@ +import { BackHandler } from 'react-native'; + +class BackButtonService { + + static initialize(defaultHandler) { + this.defaultHandler_ = defaultHandler; + + BackHandler.addEventListener('hardwareBackPress', async () => { + return this.back(); + }); + } + + static async back() { + if (this.handlers_.length) { + let r = await this.handlers_[this.handlers_.length - 1](); + if (r) return r; + } + + return await this.defaultHandler_(); + } + + static addHandler(handler) { + for (let i = this.handlers_.length - 1; i >= 0; i--) { + const h = this.handlers_[i]; + if (h === handler) return; + } + + return this.handlers_.push(handler); + } + + static removeHandler(hanlder) { + for (let i = this.handlers_.length - 1; i >= 0; i--) { + const h = this.handlers_[i]; + if (h === hanlder) this.handlers_.splice(i, 1); + } + } + +} + +BackButtonService.defaultHandler_ = null; +BackButtonService.handlers_ = []; + +export { BackButtonService }; \ No newline at end of file diff --git a/ReactNativeClient/root.js b/ReactNativeClient/root.js index a5e41d470..ac5b48cad 100644 --- a/ReactNativeClient/root.js +++ b/ReactNativeClient/root.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; -import { BackHandler, Keyboard, NativeModules } from 'react-native'; +import { Keyboard, NativeModules } from 'react-native'; import { connect, Provider } from 'react-redux' +import { BackButtonService } from 'lib/services/back-button.js'; import { createStore, applyMiddleware } from 'redux'; import { shimInit } from 'lib/shim-init-react.js'; import { Log } from 'lib/log.js' @@ -497,9 +498,7 @@ async function initialize(dispatch, backButtonHandler) { reg.logger().error('Initialization error:', error); } - BackHandler.addEventListener('hardwareBackPress', () => { - return backButtonHandler(); - }); + BackButtonService.initialize(backButtonHandler); reg.setupRecurrentSync(); @@ -535,7 +534,7 @@ class AppComponent extends React.Component { } } - backButtonHandler() { + async backButtonHandler() { if (this.props.showSideMenu) { this.props.dispatch({ type: 'SIDE_MENU_CLOSE' }); return true;