From c602ad17a7a19d288ae5b15b3cf6475e7279fdf0 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Thu, 21 Jan 2016 20:13:00 +0000 Subject: [PATCH] update website --- docs/alert.html | 6 +- docs/alertios.html | 140 +++++++++++++++++---------------------------- 2 files changed, 56 insertions(+), 90 deletions(-) diff --git a/docs/alert.html b/docs/alert.html index 0327c3d47a6..9c14970bb31 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -3,8 +3,7 @@ respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.

This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see AlertIOS; entering text in an alert is common on iOS only.

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.

Android #

On Android at most three buttons can be specified. Android has a concept +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:

// Works on both iOS and Android Alert.alert( 'Alert Title', @@ -19,7 +18,6 @@ of a neutral, negative and a positive button:

Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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.

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( +AlertIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS

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.

Methods #

static alert(title: string, message?: string, callbackOrButtons?: ?(() => void) | ButtonsArray, type?: AlertType) #

Creates a popup to alert the user. See +Alert.

  • 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 prompt(title: string, message?: string, callbackOrButtons?: ?((text: string) => void) | ButtonsArray, type?: AlertType, defaultValue?: string) #

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', - null, + 'Enter your password to claim your $1.5B in lottery winnings', [ - {text: 'Submit', onPress: (text) => console.log('Password: ' + text)}, + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, ], 'secure-text' -)

Methods #

static alert(title: string, message?: string, buttons?: Array<{ - text?: string; - onPress?: ?Function; - style?: AlertButtonStyle; - }>, type?: AlertType) #

static prompt(title: string, value?: string, buttons?: Array<{ - text?: string; - onPress?: ?Function; - style?: AlertButtonStyle; - }>, callback?: Function) #

Prompt the user to enter some text.

Edit on GitHubRun this exampleExamples #

'use strict'; +);

Example with the default button and a custom callback:

AlertIOS.prompt( + 'Update username', + null, + text => console.log("Your username is "+text), + null, + 'default' +)

Edit on GitHubRun this exampleExamples #

'use strict'; var React = require('react-native'); var { @@ -40,37 +52,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> @@ -81,14 +75,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> @@ -99,14 +86,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> @@ -118,32 +98,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() { @@ -155,7 +128,7 @@ class PromptExample extends ={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> @@ -166,7 +139,7 @@ class PromptExample extends ={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> @@ -177,22 +150,22 @@ class PromptExample extends ={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> @@ -200,13 +173,8 @@ class PromptExample extends ); } - 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) }); } }