status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-03-03 10:50:35 +00:00
Code Issues Projects Releases Wiki Activity

Simplified AlertIOS

Browse Source 
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
This commit is contained in:
Kyle Corbitt 2016-01-21 10:48:58 -08:00 committed by facebook-github-bot-6
parent 7d457b09b4
commit ba4101dc4a
5 changed files with 175 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Examples/UIExplorer/AlertExample.js
View File

@ -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,
}
};

96
Examples/UIExplorer/AlertIOSExample.js
View File

@ -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,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() {
// 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) });
}
}

10
Libraries/Utilities/Alert.js
View File

@ -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
* `AlertIOS` for details.
* specify a style, which is one of 'default', 'cancel' or 'destructive'.
*
* ## 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);
}

205
Libraries/Utilities/AlertIOS.js
View File

@ -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;
}>;
/**
* 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<{
type ButtonsArray = 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;

5
React/Modules/RCTAlertManager.m
View File

@ -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];