From 85bcbd4bf311fa6794cd284d836dc73237beec67 Mon Sep 17 00:00:00 2001 From: Eric Vicenti Date: Fri, 13 Mar 2015 17:48:31 -0700 Subject: [PATCH] [ReactNative] AlertIOS.alert and examples --- Examples/UIExplorer/AlertIOSExample.js | 98 ++++++++++++++++++++++++++ Examples/UIExplorer/UIExplorerList.js | 1 + Libraries/Utilities/AlertIOS.js | 77 ++++++++++++++++++++ Libraries/react-native/react-native.js | 1 + 4 files changed, 177 insertions(+) create mode 100644 Examples/UIExplorer/AlertIOSExample.js create mode 100644 Libraries/Utilities/AlertIOS.js diff --git a/Examples/UIExplorer/AlertIOSExample.js b/Examples/UIExplorer/AlertIOSExample.js new file mode 100644 index 000000000..a2b92d975 --- /dev/null +++ b/Examples/UIExplorer/AlertIOSExample.js @@ -0,0 +1,98 @@ +/** + * Copyright 2004-present Facebook. All Rights Reserved. + */ +'use strict'; + +var React = require('react-native'); +var { + StyleSheet, + View, + Text, + TouchableHighlight, + AlertIOS, +} = React; + +exports.framework = 'React'; +exports.title = 'AlertIOS'; +exports.description = 'iOS alerts and action sheets'; +exports.examples = [{ + title: 'Alerts', + render() { + return ( + + AlertIOS.alert( + 'Foo Title', + 'My Alert Msg' + )}> + + Alert with message and default button + + + AlertIOS.alert( + null, + null, + [ + {text: 'Button', onPress: () => console.log('Button Pressed!')}, + ] + )}> + + Alert with only one button + + + AlertIOS.alert( + 'Foo Title', + 'My Alert Msg', + [ + {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, + {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, + ] + )}> + + Alert with two buttons + + + AlertIOS.alert( + 'Foo Title', + null, + [ + {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, + {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, + {text: 'Baz', onPress: () => console.log('Baz Pressed!')}, + ] + )}> + + Alert with 3 buttons + + + AlertIOS.alert( + 'Foo Title', + 'My Alert Msg', + '..............'.split('').map((dot, index) => ({ + text: 'Button ' + index, + onPress: () => console.log('Pressed ' + index) + })) + )}> + + Alert with too many buttons + + + + ); + }, +}]; + +var styles = StyleSheet.create({ + wrapper: { + borderRadius: 5, + marginBottom: 5, + }, + button: { + backgroundColor: '#eeeeee', + padding: 10, + }, +}); diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js index 59653055e..711d1157d 100644 --- a/Examples/UIExplorer/UIExplorerList.js +++ b/Examples/UIExplorer/UIExplorerList.js @@ -41,6 +41,7 @@ var EXAMPLES = [ require('./CameraRollExample.ios'), require('./MapViewExample'), require('./AppStateIOSExample'), + require('./AlertIOSExample'), require('./AdSupportIOSExample'), require('./AppStateExample'), require('./ActionSheetIOSExample'), diff --git a/Libraries/Utilities/AlertIOS.js b/Libraries/Utilities/AlertIOS.js new file mode 100644 index 000000000..ee0bb2d0b --- /dev/null +++ b/Libraries/Utilities/AlertIOS.js @@ -0,0 +1,77 @@ +/** + * Copyright 2004-present Facebook. All Rights Reserved. + * + * @providesModule AlertIOS + * @flow + */ +'use strict'; + +var NativeModules = require('NativeModulesDeprecated'); + +var RCTAlertManager = NativeModules.RCTAlertManager; + +var DEFAULT_BUTTON_TEXT = 'OK'; +var DEFAULT_BUTTON = { + text: DEFAULT_BUTTON_TEXT, + onPress: null, +}; + +/** + * AlertIOS manages native iOS alerts, option sheets, and share dialogs + */ + +class AlertIOS { + + /** + * 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 + * + * The last button in the list will be considered the 'Primary' button and + * it will appear bold. + * + * ``` + * AlertIOS.alert( + * 'Foo Title', + * 'My Alert Msg', + * [ + * {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, + * {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, + * ] + * )} + * ``` + */ + static alert( + title: ?string, + message: ?string, + buttons: ?Array<{ + text: ?string; + onPress: ?Function; + }> + ): void { + var callbacks = []; + var buttonsSpec = []; + title = title || ''; + message = message || ''; + buttons = buttons || [DEFAULT_BUTTON]; + buttons.forEach((btn, index) => { + callbacks[index] = btn.onPress; + var btnDef = {}; + btnDef[index] = btn.text || DEFAULT_BUTTON_TEXT; + buttonsSpec.push(btnDef); + }); + RCTAlertManager.alertWithArgs({ + title, + message, + buttons: buttonsSpec, + }, (id) => { + var cb = callbacks[id]; + cb && cb(); + }); + } + +} + +module.exports = AlertIOS; diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js index 48217795f..5f4de8c1f 100644 --- a/Libraries/react-native/react-native.js +++ b/Libraries/react-native/react-native.js @@ -9,6 +9,7 @@ var ReactNative = { ...require('React'), Animation: require('Animation'), ActivityIndicatorIOS: require('ActivityIndicatorIOS'), + AlertIOS: require('AlertIOS'), AppRegistry: require('AppRegistry'), AppState: require('AppState'), AppStateIOS: require('AppStateIOS'),