From 27928f3993791e467f4736c91dab69905d30a7a1 Mon Sep 17 00:00:00 2001 From: Benjamin Dobell Date: Mon, 27 Feb 2017 02:15:07 -0800 Subject: [PATCH] Optional Alert onDismiss callback to support Android default behavior Summary: On Android it's generally expected that alerts are dismissible by tapping outside the alert box. This is the default behavior for React Native, but until now there has been no means to listen for the dismiss event. `Alert.alert` already takes an `options` object, so this pull request simply adds an additional option `onDismiss`, a callback function that will be called when an Alert is dismissed (rather than being closed as a result of a button press). **Test plan** Simply pass an `options` object to `Alert.alert` with the `onDismiss` property set to a function. e.g. Run the following on Android, dismiss the alert by tapping outside the alert view, and monitor console output. ``` Alert.alert( 'Alert Title', 'My Alert Msg', [ {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: () => console.log('OK Pressed')}, ], { onDismiss: () => console. Closes https://github.com/facebook/react-native/pull/12594 Differential Revision: D4619862 Pulled By: ericvicenti fbshipit-source-id: fdd351a7b8e673dab331f0e22dc5ea2e84f24375 --- Libraries/Alert/Alert.js | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/Libraries/Alert/Alert.js b/Libraries/Alert/Alert.js index 101d48522..bd7d46f51 100644 --- a/Libraries/Alert/Alert.js +++ b/Libraries/Alert/Alert.js @@ -25,6 +25,7 @@ type Buttons = Array<{ type Options = { cancelable?: ?boolean, + onDismiss?: ?Function, }; /** @@ -52,9 +53,13 @@ type Options = { * - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK') * - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK') * - * Note that by default alerts on Android can be dismissed by clicking outside of their alert box. - * To prevent this behavior, you can provide - * an optional `options` parameter `{ cancelable: false }` to the Alert method. + * By default alerts on Android can be dismissed by tapping outside of the alert + * box. This event can be handled by providing an optional `options` parameter, + * with an `onDismiss` callback property `{ onDismiss: () => {} }`. + * + * Alternatively, the dismissing behavior can be disabled altogether by providing + * an optional `options` parameter with the `cancelable` property set to `false` + * i.e. `{ cancelable: false }` * * Example usage: * ``` @@ -131,15 +136,16 @@ class AlertAndroid { config, (errorMessage) => console.warn(errorMessage), (action, buttonKey) => { - if (action !== NativeModules.DialogManagerAndroid.buttonClicked) { - return; - } - if (buttonKey === NativeModules.DialogManagerAndroid.buttonNeutral) { - buttonNeutral.onPress && buttonNeutral.onPress(); - } else if (buttonKey === NativeModules.DialogManagerAndroid.buttonNegative) { - buttonNegative.onPress && buttonNegative.onPress(); - } else if (buttonKey === NativeModules.DialogManagerAndroid.buttonPositive) { - buttonPositive.onPress && buttonPositive.onPress(); + if (action === NativeModules.DialogManagerAndroid.buttonClicked) { + if (buttonKey === NativeModules.DialogManagerAndroid.buttonNeutral) { + buttonNeutral.onPress && buttonNeutral.onPress(); + } else if (buttonKey === NativeModules.DialogManagerAndroid.buttonNegative) { + buttonNegative.onPress && buttonNegative.onPress(); + } else if (buttonKey === NativeModules.DialogManagerAndroid.buttonPositive) { + buttonPositive.onPress && buttonPositive.onPress(); + } + } else if (action === NativeModules.DialogManagerAndroid.dismissed) { + options && options.onDismiss && options.onDismiss(); } } );