2015-12-17 19:09:22 +00:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
|
|
* All rights reserved.
|
|
|
|
*
|
|
|
|
* This source code is licensed under the BSD-style license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
|
|
*
|
|
|
|
* @providesModule Alert
|
|
|
|
* @flow
|
|
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
|
2017-02-18 00:39:50 +00:00
|
|
|
const AlertIOS = require('AlertIOS');
|
|
|
|
const NativeModules = require('NativeModules');
|
|
|
|
const Platform = require('Platform');
|
2015-12-17 19:09:22 +00:00
|
|
|
|
|
|
|
import type { AlertType, AlertButtonStyle } from 'AlertIOS';
|
|
|
|
|
2017-11-05 20:01:16 +00:00
|
|
|
export type Buttons = Array<{
|
2016-08-09 13:32:41 +00:00
|
|
|
text?: string,
|
|
|
|
onPress?: ?Function,
|
|
|
|
style?: AlertButtonStyle,
|
2015-12-17 19:09:22 +00:00
|
|
|
}>;
|
|
|
|
|
2016-08-09 13:08:44 +00:00
|
|
|
type Options = {
|
2016-10-11 17:08:54 +00:00
|
|
|
cancelable?: ?boolean,
|
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
2017-02-27 10:15:07 +00:00
|
|
|
onDismiss?: ?Function,
|
2016-08-09 13:08:44 +00:00
|
|
|
};
|
|
|
|
|
2015-12-17 19:09:22 +00:00
|
|
|
/**
|
|
|
|
* Launches an alert dialog with the specified title and message.
|
2017-11-20 21:07:10 +00:00
|
|
|
*
|
|
|
|
* See http://facebook.github.io/react-native/docs/alert.html
|
2015-12-17 19:09:22 +00:00
|
|
|
*/
|
|
|
|
class Alert {
|
|
|
|
|
2017-11-20 21:07:10 +00:00
|
|
|
/**
|
|
|
|
* Launches an alert dialog with the specified title and message.
|
|
|
|
*
|
|
|
|
* See http://facebook.github.io/react-native/docs/alert.html#alert
|
|
|
|
*/
|
2015-12-17 19:09:22 +00:00
|
|
|
static alert(
|
2017-11-09 20:45:12 +00:00
|
|
|
title: ?string,
|
|
|
|
message?: ?string,
|
2015-12-17 19:09:22 +00:00
|
|
|
buttons?: Buttons,
|
2016-08-09 13:08:44 +00:00
|
|
|
options?: Options,
|
Simplified AlertIOS
Summary:
Ok, so this started as fixing #5273 but ended up getting a little more complicated. :smile:
Currently, AlertIOS has the following API:
* `alert(title, message, buttons, type)`
* `prompt(title, defaultValue, buttons, callback)`
I've changed the API to look like the following:
* `alert(title, message, callbackOrButtons)`
* `prompt(title, message, callbackOrButtons, type, defaultValue)`
I know that breaking changes are a big deal, but I find the current alert API to be fairly inconsistent and unnecessarily confusing. I'll try to justify my changes one by one:
1. Currently `type` is an optional parameter of `alert`. However, the only reason to change the alert type from the default is in order to create one of the input dialogs (text, password or username/password). So we're in a weird state where if you want a normal text input, you use `prompt`, but if you want a password input you use `alert` with the 'secure-text' type. I've moved `type` to `prompt` so all text input is now done with `pro
Closes https://github.com/facebook/react-native/pull/5286
Reviewed By: svcscm
Differential Revision: D2850400
Pulled By: androidtrunkagent
fb-gh-sync-id: 2986cfa2266225df7e4dcd703fce1e322c12b816
2016-01-21 18:48:58 +00:00
|
|
|
type?: AlertType,
|
2015-12-17 19:09:22 +00:00
|
|
|
): void {
|
|
|
|
if (Platform.OS === 'ios') {
|
Simplified AlertIOS
Summary:
Ok, so this started as fixing #5273 but ended up getting a little more complicated. :smile:
Currently, AlertIOS has the following API:
* `alert(title, message, buttons, type)`
* `prompt(title, defaultValue, buttons, callback)`
I've changed the API to look like the following:
* `alert(title, message, callbackOrButtons)`
* `prompt(title, message, callbackOrButtons, type, defaultValue)`
I know that breaking changes are a big deal, but I find the current alert API to be fairly inconsistent and unnecessarily confusing. I'll try to justify my changes one by one:
1. Currently `type` is an optional parameter of `alert`. However, the only reason to change the alert type from the default is in order to create one of the input dialogs (text, password or username/password). So we're in a weird state where if you want a normal text input, you use `prompt`, but if you want a password input you use `alert` with the 'secure-text' type. I've moved `type` to `prompt` so all text input is now done with `pro
Closes https://github.com/facebook/react-native/pull/5286
Reviewed By: svcscm
Differential Revision: D2850400
Pulled By: androidtrunkagent
fb-gh-sync-id: 2986cfa2266225df7e4dcd703fce1e322c12b816
2016-01-21 18:48:58 +00:00
|
|
|
if (typeof type !== 'undefined') {
|
2016-10-14 15:06:35 +00:00
|
|
|
console.warn('Alert.alert() with a 5th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');
|
Simplified AlertIOS
Summary:
Ok, so this started as fixing #5273 but ended up getting a little more complicated. :smile:
Currently, AlertIOS has the following API:
* `alert(title, message, buttons, type)`
* `prompt(title, defaultValue, buttons, callback)`
I've changed the API to look like the following:
* `alert(title, message, callbackOrButtons)`
* `prompt(title, message, callbackOrButtons, type, defaultValue)`
I know that breaking changes are a big deal, but I find the current alert API to be fairly inconsistent and unnecessarily confusing. I'll try to justify my changes one by one:
1. Currently `type` is an optional parameter of `alert`. However, the only reason to change the alert type from the default is in order to create one of the input dialogs (text, password or username/password). So we're in a weird state where if you want a normal text input, you use `prompt`, but if you want a password input you use `alert` with the 'secure-text' type. I've moved `type` to `prompt` so all text input is now done with `pro
Closes https://github.com/facebook/react-native/pull/5286
Reviewed By: svcscm
Differential Revision: D2850400
Pulled By: androidtrunkagent
fb-gh-sync-id: 2986cfa2266225df7e4dcd703fce1e322c12b816
2016-01-21 18:48:58 +00:00
|
|
|
AlertIOS.alert(title, message, buttons, type);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
AlertIOS.alert(title, message, buttons);
|
2015-12-17 19:09:22 +00:00
|
|
|
} else if (Platform.OS === 'android') {
|
2016-08-09 13:08:44 +00:00
|
|
|
AlertAndroid.alert(title, message, buttons, options);
|
2015-12-17 19:09:22 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Wrapper around the Android native module.
|
|
|
|
*/
|
|
|
|
class AlertAndroid {
|
|
|
|
|
|
|
|
static alert(
|
2017-11-09 20:45:12 +00:00
|
|
|
title: ?string,
|
|
|
|
message?: ?string,
|
2015-12-17 19:09:22 +00:00
|
|
|
buttons?: Buttons,
|
2016-08-09 13:08:44 +00:00
|
|
|
options?: Options,
|
2015-12-17 19:09:22 +00:00
|
|
|
): void {
|
|
|
|
var config = {
|
|
|
|
title: title || '',
|
|
|
|
message: message || '',
|
|
|
|
};
|
2016-08-09 13:08:44 +00:00
|
|
|
|
|
|
|
if (options) {
|
|
|
|
config = {...config, cancelable: options.cancelable};
|
|
|
|
}
|
2015-12-17 19:09:22 +00:00
|
|
|
// At most three buttons (neutral, negative, positive). Ignore rest.
|
|
|
|
// The text 'OK' should be probably localized. iOS Alert does that in native.
|
|
|
|
var validButtons: Buttons = buttons ? buttons.slice(0, 3) : [{text: 'OK'}];
|
|
|
|
var buttonPositive = validButtons.pop();
|
|
|
|
var buttonNegative = validButtons.pop();
|
|
|
|
var buttonNeutral = validButtons.pop();
|
|
|
|
if (buttonNeutral) {
|
2016-08-09 13:32:41 +00:00
|
|
|
config = {...config, buttonNeutral: buttonNeutral.text || '' };
|
2015-12-17 19:09:22 +00:00
|
|
|
}
|
|
|
|
if (buttonNegative) {
|
2016-08-09 13:32:41 +00:00
|
|
|
config = {...config, buttonNegative: buttonNegative.text || '' };
|
2015-12-17 19:09:22 +00:00
|
|
|
}
|
|
|
|
if (buttonPositive) {
|
2016-08-09 13:32:41 +00:00
|
|
|
config = {...config, buttonPositive: buttonPositive.text || '' };
|
2015-12-17 19:09:22 +00:00
|
|
|
}
|
2017-02-21 18:00:06 +00:00
|
|
|
NativeModules.DialogManagerAndroid.showAlert(
|
2015-12-17 19:09:22 +00:00
|
|
|
config,
|
2016-07-19 14:17:08 +00:00
|
|
|
(errorMessage) => console.warn(errorMessage),
|
2015-12-17 19:09:22 +00:00
|
|
|
(action, buttonKey) => {
|
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
2017-02-27 10:15:07 +00:00
|
|
|
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();
|
2015-12-17 19:09:22 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = Alert;
|