Simplified AlertIOS

Summary: Ok, so this started as fixing facebook#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 facebook#5286 Reviewed By: svcscm Differential Revision: D2850400 Pulled By: androidtrunkagent fb-gh-sync-id: 2986cfa2266225df7e4dcd703fce1e322c12b816
doostin · Feb 1, 2016 · aed0fa6 · aed0fa6
1 parent feb55a6
commit aed0fa6
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 154 deletions.
diff --git a/Examples/UIExplorer/AlertExample.js b/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,
-}
+};
diff --git a/Examples/UIExplorer/AlertIOSExample.js b/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(
-            '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'}
-            ]
-          )}>
+          onPress={() => AlertIOS.prompt('Plain Text Entry')}>
 
           <View style={styles.button}>
             <Text>
@@ -77,14 +59,7 @@ exports.examples = [{
         </TouchableHighlight>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
-            'Secure Text Entry',
-            null,
-            [
-              {text: 'Submit', onPress: (text) => console.log('Password: ' + text), type: 'secure-text'},
-              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
-            ]
-          )}>
+          onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}>
 
           <View style={styles.button}>
             <Text>
@@ -95,14 +70,7 @@ exports.examples = [{
         </TouchableHighlight>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
-            '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'}
-            ]
-          )}>
+          onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}>
 
           <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.state = {
-      promptValue: undefined,
-    };
+    this.saveResponse = this.saveResponse.bind(this);
 
-    this.title = 'Type a value';
-    this.defaultValue = 'Default value';
-    this.buttons = [{
+    this.customButtons = [{
       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,36 +134,31 @@ 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>
       </View>
     );
   }
 
-  prompt() {
-    // Flow's apply support is broken: #7035621
-    ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments);
-  }
-
-  promptResponse(promptValue) {
-    this.setState({ promptValue });
+  saveResponse(promptValue) {
+    this.setState({ promptValue: JSON.stringify(promptValue) });
   }
 }
 

diff --git a/Libraries/Utilities/Alert.js b/Libraries/Utilities/Alert.js
@@ -37,11 +37,10 @@ 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
- * `AlertIOS` for details.
+ * specify a style, which is one of 'default', 'cancel' or 'destructive'.
  *
  * ## Android
- * 
+ *
  * On Android at most three buttons can be specified. Android has a concept
  * of a neutral, negative and a positive button:
  *
@@ -68,10 +67,15 @@ class Alert {
     title: ?string,
     message?: ?string,
     buttons?: Buttons,
-    type?: AlertType
+    type?: AlertType,
   ): void {
     if (Platform.OS === 'ios') {
-      AlertIOS.alert(title, message, buttons, type);
+      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);
     }