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
This commit is contained in:
Benjamin Dobell 2017-02-27 02:15:07 -08:00 committed by Facebook Github Bot
parent 64c8f22343
commit 27928f3993
1 changed files with 18 additions and 12 deletions

View File

@ -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,9 +136,7 @@ class AlertAndroid {
config,
(errorMessage) => console.warn(errorMessage),
(action, buttonKey) => {
if (action !== NativeModules.DialogManagerAndroid.buttonClicked) {
return;
}
if (action === NativeModules.DialogManagerAndroid.buttonClicked) {
if (buttonKey === NativeModules.DialogManagerAndroid.buttonNeutral) {
buttonNeutral.onPress && buttonNeutral.onPress();
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonNegative) {
@ -141,6 +144,9 @@ class AlertAndroid {
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonPositive) {
buttonPositive.onPress && buttonPositive.onPress();
}
} else if (action === NativeModules.DialogManagerAndroid.dismissed) {
options && options.onDismiss && options.onDismiss();
}
}
);
}