Simplified AlertIOS

Summary:
Ok, so this started as fixing #5273 but ended up getting a little more complicated. 😄

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

Examples/UIExplorer/AlertExample.js

@@ -18,7 +18,6 @@
 var React = require('react-native');
 var {
   Alert,
-  Platform,
   StyleSheet,
   Text,
   TouchableHighlight,
@@ -134,4 +133,4 @@ var styles = StyleSheet.create({
 module.exports = {
   AlertExample,
   SimpleAlertExampleBlock,
-}
+};

Examples/UIExplorer/AlertIOSExample.js

@@ -36,37 +36,19 @@ exports.examples = [{
   }
 },
 {
-  title: 'Alert Types',
+  title: 'Prompt Options',
+  render(): React.Component {
+    return <PromptOptions />;
+  }
+},
+{
+  title: 'Prompt Types',
   render() {
     return (
       <View>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
+          onPress={() => AlertIOS.prompt('Plain Text Entry')}>
-            'Hello World',
-            null,
-            [
-              {text: 'OK', onPress: (text) => console.log('OK pressed'), type: 'default'}
-            ]
-          )}>
-
-          <View style={styles.button}>
-            <Text>
-              {'default'}
-            </Text>
-          </View>
-
-        </TouchableHighlight>
-        <TouchableHighlight
-          style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
-            'Plain Text Entry',
-            null,
-            [
-              {text: 'Submit', onPress: (text) => console.log('Text: ' + text), type: 'plain-text'},
-              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
-            ]
-          )}>
 
           <View style={styles.button}>
             <Text>
@@ -77,14 +59,7 @@ exports.examples = [{
         </TouchableHighlight>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
+          onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}>
-            'Secure Text Entry',
-            null,
-            [
-              {text: 'Submit', onPress: (text) => console.log('Password: ' + text), type: 'secure-text'},
-              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
-            ]
-          )}>
 
           <View style={styles.button}>
             <Text>
@@ -95,14 +70,7 @@ exports.examples = [{
         </TouchableHighlight>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
+          onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}>
-            'Login & Password',
-            null,
-            [
-              {text: 'Submit', onPress: (details) => console.log('Login: ' + details.login + '; Password: ' + details.password), type: 'login-password'},
-              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
-            ]
-          )}>
 
           <View style={styles.button}>
             <Text>
@@ -114,32 +82,25 @@ exports.examples = [{
       </View>
     );
   }
-},
-{
-  title: 'Prompt',
-  render(): React.Component {
-    return <PromptExample />;
-  }
 }];
 
-class PromptExample extends React.Component {
+class PromptOptions extends React.Component {
   constructor(props) {
     super(props);
 
-    this.promptResponse = this.promptResponse.bind(this);
+    this.saveResponse = this.saveResponse.bind(this);
-    this.state = {
-      promptValue: undefined,
-    };
 
-    this.title = 'Type a value';
+    this.customButtons = [{
-    this.defaultValue = 'Default value';
-    this.buttons = [{
       text: 'Custom OK',
-      onPress: this.promptResponse
+      onPress: this.saveResponse
     }, {
       text: 'Custom Cancel',
       style: 'cancel',
     }];
+
+    this.state = {
+      promptValue: undefined,
+    };
   }
 
   render() {
@@ -151,7 +112,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, null, null, this.promptResponse)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse)}>
 
           <View style={styles.button}>
             <Text>
@@ -162,7 +123,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, null, this.buttons, null)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons)}>
 
           <View style={styles.button}>
             <Text>
@@ -173,22 +134,22 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.defaultValue, null, this.promptResponse)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}>
 
           <View style={styles.button}>
             <Text>
-              prompt with title, default value & callback
+              prompt with title, callback & default value
             </Text>
           </View>
         </TouchableHighlight>
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons, null)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}>
 
           <View style={styles.button}>
             <Text>
-              prompt with title, default value & custom buttons
+              prompt with title, custom buttons, login/password & default value
             </Text>
           </View>
         </TouchableHighlight>
@@ -196,13 +157,8 @@ class PromptExample extends React.Component {
     );
   }
 
-  prompt() {
+  saveResponse(promptValue) {
-    // Flow's apply support is broken: #7035621
+    this.setState({ promptValue: JSON.stringify(promptValue) });
-    ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments);
-  }
-
-  promptResponse(promptValue) {
-    this.setState({ promptValue });
   }
 }
 

Libraries/Utilities/Alert.js

@@ -37,8 +37,7 @@ type Buttons = Array<{
  * ## iOS
  *
  * On iOS you can specify any number of buttons. Each button can optionally
- * specify a style and you can also specify type of the alert. Refer to
+ * specify a style, which is one of 'default', 'cancel' or 'destructive'.
- * `AlertIOS` for details.
  *
  * ## Android
  *
@@ -68,10 +67,15 @@ class Alert {
     title: ?string,
     message?: ?string,
     buttons?: Buttons,
-    type?: AlertType
+    type?: AlertType,
   ): void {
     if (Platform.OS === 'ios') {
+      if (typeof type !== 'undefined') {
+        console.warn('Alert.alert() with a 4th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');
         AlertIOS.alert(title, message, buttons, type);
+        return;
+      }
+      AlertIOS.alert(title, message, buttons);
     } else if (Platform.OS === 'android') {
       AlertAndroid.alert(title, message, buttons);
     }

Libraries/Utilities/AlertIOS.js

@@ -12,7 +12,6 @@
 'use strict';
 
 var RCTAlertManager = require('NativeModules').AlertManager;
-var invariant = require('invariant');
 
 export type AlertType = $Enum<{
   'default': string;
@@ -27,61 +26,156 @@ export type AlertButtonStyle = $Enum<{
   'destructive': string;
 }>;
 
-/**
+type ButtonsArray = Array<{
- * Launches an alert dialog with the specified title and message.
- *
- * Optionally provide a list of buttons. Tapping any button will fire the
- * respective onPress callback and dismiss the alert. By default, the only
- * button will be an 'OK' button.
- *
- * Use this API for iOS-specific features, such as prompting the user to enter
- * some information. In other cases, especially to show static alerts, use
- * the cross-platform `Alert` API.
- *
- * ```
- * AlertIOS.alert(
- *   'Enter password',
- *   null,
- *   [
- *     {text: 'Submit', onPress: (text) => console.log('Password: ' + text)},
- *   ],
- *   'secure-text'
- * )
- * ```
- */
-class AlertIOS {
-  static alert(
-    title: ?string,
-    message?: ?string,
-    buttons?: Array<{
   text?: string;
   onPress?: ?Function;
   style?: AlertButtonStyle;
-    }>,
+}>;
-    type?: ?AlertType
+
+/**
+ * The AlertsIOS utility provides two functions: `alert` and `prompt`. All
+ * functionality available through `AlertIOS.alert` is also available in the
+ * cross-platform `Alert.alert`, which we recommend you use if you don't need
+ * iOS-specific functionality.
+ *
+ * `AlertIOS.prompt` allows you to prompt the user for input inside of an
+ * alert popup.
+ *
+ */
+class AlertIOS {
+  /**
+   * Creates a popup to alert the user. See
+   * [Alert](/react-native/docs/alert.html).
+   *
+   *  - title: string -- The dialog's title.
+   *  - message: string -- An optional message that appears above the text input.
+   *  - callbackOrButtons -- This optional argument should be either a
+   *    single-argument function or an array of buttons. If passed a function,
+   *    it will be called when the user taps 'OK'.
+   *
+   *    If passed an array of button configurations, each button should include
+   *    a `text` key, as well as optional `onPress` and `style` keys.
+   *    `style` should be one of 'default', 'cancel' or 'destructive'.
+   *  - type -- *deprecated, do not use*
+   *
+   * Example:
+   *
+   * ```
+   * AlertIOS.alert(
+   *  'Sync Complete',
+   *  'All your data are belong to us.'
+   * );
+   * ```
+   */
+  static alert(
+    title: ?string,
+    message?: ?string,
+    callbackOrButtons?: ?(() => void) | ButtonsArray,
+    type?: AlertType,
   ): void {
+    if (typeof type !== 'undefined') {
+      console.warn('AlertIOS.alert() with a 4th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');
+      this.prompt(title, message, callbackOrButtons, type);
+      return;
+    }
+    this.prompt(title, message, callbackOrButtons, 'default');
+  }
+
+  /**
+   * Prompt the user to enter some text.
+   *
+   *  - title: string -- The dialog's title.
+   *  - message: string -- An optional message that appears above the text input.
+   *  - callbackOrButtons -- This optional argument should be either a
+   *    single-argument function or an array of buttons. If passed a function,
+   *    it will be called with the prompt's value when the user taps 'OK'.
+   *
+   *    If passed an array of button configurations, each button should include
+   *    a `text` key, as well as optional `onPress` and `style` keys (see example).
+   *    `style` should be one of 'default', 'cancel' or 'destructive'.
+   *  - type: string -- This configures the text input. One of 'plain-text',
+   *    'secure-text' or 'login-password'.
+   *  - defaultValue: string -- the default value for the text field.
+   *
+   * Example with custom buttons:
+   * ```
+   * AlertIOS.prompt(
+   *   'Enter password',
+   *   'Enter your password to claim your $1.5B in lottery winnings',
+   *   [
+   *     {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
+   *     {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)},
+   *   ],
+   *   'secure-text'
+   * );
+   * ```
+   *
+   * Example with the default button and a custom callback:
+   * ```
+   * AlertIOS.prompt(
+   *   'Update username',
+   *   null,
+   *   text => console.log("Your username is "+text),
+   *   null,
+   *   'default'
+   * )
+   * ```
+   */
+  static prompt(
+    title: ?string,
+    message?: ?string,
+    callbackOrButtons?: ?((text: string) => void) | ButtonsArray,
+    type?: ?AlertType = 'plain-text',
+    defaultValue?: string,
+  ): void {
+    if (typeof type === 'function') {
+      console.warn(
+        'You passed a callback function as the "type" argument to AlertIOS.prompt(). React Native is ' +
+        'assuming  you want to use the deprecated AlertIOS.prompt(title, defaultValue, buttons, callback) ' +
+        'signature. The current signature is AlertIOS.prompt(title, message, callbackOrButtons, type, defaultValue) ' +
+        'and the old syntax will be removed in a future version.');
+
+      var callback = type;
+      var defaultValue = message;
+      RCTAlertManager.alertWithArgs({
+        title: title || undefined,
+        type: 'plain-text',
+        defaultValue,
+      }, (id, value) => {
+        callback(value);
+      });
+      return;
+    }
+
     var callbacks = [];
-    var buttonsSpec = [];
+    var buttons = [];
     var cancelButtonKey;
     var destructiveButtonKey;
-    buttons && buttons.forEach((btn, index) => {
+    if (typeof callbackOrButtons === 'function') {
+      callbacks = [callbackOrButtons];
+    }
+    else if (callbackOrButtons instanceof Array) {
+      callbackOrButtons.forEach((btn, index) => {
         callbacks[index] = btn.onPress;
-      if (btn.style == 'cancel') {
+        if (btn.style === 'cancel') {
           cancelButtonKey = String(index);
-      } else if (btn.style == 'destructive') {
+        } else if (btn.style === 'destructive') {
           destructiveButtonKey = String(index);
         }
-      if (btn.text || index < (buttons || []).length - 1) {
+        if (btn.text || index < (callbackOrButtons || []).length - 1) {
           var btnDef = {};
           btnDef[index] = btn.text || '';
-        buttonsSpec.push(btnDef);
+          buttons.push(btnDef);
         }
       });
+    }
+
     RCTAlertManager.alertWithArgs({
       title: title || undefined,
       message: message || undefined,
-      buttons: buttonsSpec,
+      buttons,
       type: type || undefined,
+      defaultValue,
       cancelButtonKey,
       destructiveButtonKey,
     }, (id, value) => {
@@ -89,43 +183,6 @@ class AlertIOS {
       cb && cb(value);
     });
   }
-
-  /**
-   * Prompt the user to enter some text.
-   */
-  static prompt(
-    title: string,
-    value?: string,
-    buttons?: Array<{
-      text?: string;
-      onPress?: ?Function;
-      style?: AlertButtonStyle;
-    }>,
-    callback?: ?Function
-  ): void {
-    if (arguments.length === 2) {
-      if (typeof value === 'object') {
-        buttons = value;
-        value = undefined;
-      } else if (typeof value === 'function') {
-        callback = value;
-        value = undefined;
-      }
-    } else if (arguments.length === 3 && typeof buttons === 'function') {
-      callback = buttons;
-      buttons = undefined;
-    }
-
-    invariant(
-      !(callback && buttons) && (callback || buttons),
-      'Must provide either a button list or a callback, but not both'
-    );
-
-    if (!buttons) {
-      buttons = [{ onPress: callback }];
-    }
-    this.alert(title, value, buttons, 'plain-text');
-  }
 }
 
 module.exports = AlertIOS;

React/Modules/RCTAlertManager.m

@@ -75,6 +75,7 @@ RCT_EXPORT_METHOD(alertWithArgs:(NSDictionary *)args
   NSString *message = [RCTConvert NSString:args[@"message"]];
   UIAlertViewStyle type = [RCTConvert UIAlertViewStyle:args[@"type"]];
   NSArray<NSDictionary *> *buttons = [RCTConvert NSDictionaryArray:args[@"buttons"]];
+  NSString *defaultValue = [RCTConvert NSString:args[@"defaultValue"]];
   NSString *cancelButtonKey = [RCTConvert NSString:args[@"cancelButtonKey"]];
   NSString *destructiveButtonKey = [RCTConvert NSString:args[@"destructiveButtonKey"]];
 
@@ -111,6 +112,10 @@ RCT_EXPORT_METHOD(alertWithArgs:(NSDictionary *)args
     alertView.alertViewStyle = type;
     alertView.message = message;
 
+    if (type != UIAlertViewStyleDefault) {
+      [alertView textFieldAtIndex:0].text = defaultValue;
+    }
+
     NSMutableArray<NSString *> *buttonKeys =
       [[NSMutableArray alloc] initWithCapacity:buttons.count];