mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-24 04:16:00 +08:00
[ReactNative] Add prompt to AlertIOS
Summary: Add `AlertIOS.prompt` It's compatible with the js spec, with the exception that I had to add a callback param since it's async. Also supports the same button configuration as `AlertIOS.alert`. @public Test Plan: I've updated the `AlertIOS` example on UIExplorer with every valid combination of parameters, so just going through it should be fine.
This commit is contained in:
committed by
Christopher Chedeau
parent
cfeae15c1f
commit
ef339250b5
@@ -95,9 +95,98 @@ exports.examples = [{
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Prompt',
|
||||
render(): React.Component {
|
||||
return <PromptExample />
|
||||
}
|
||||
}];
|
||||
|
||||
class PromptExample extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.promptResponse = this.promptResponse.bind(this);
|
||||
this.state = {
|
||||
promptValue: undefined,
|
||||
};
|
||||
|
||||
this.title = 'Type a value';
|
||||
this.defaultValue = 'Default value';
|
||||
this.buttons = [{
|
||||
text: 'Custom cancel',
|
||||
}, {
|
||||
text: 'Custom OK',
|
||||
onPress: this.promptResponse
|
||||
}];
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{marginBottom: 10}}>
|
||||
<Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue}
|
||||
</Text>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this.prompt.bind(this, this.title, this.promptResponse)}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title & callback
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this.prompt.bind(this, this.title, this.buttons)}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title & custom buttons
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this.prompt.bind(this, this.title, this.defaultValue, this.promptResponse)}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title, default value & callback
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons)}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title, default value & custom buttons
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
prompt() {
|
||||
// Flow's apply support is broken: #7035621
|
||||
((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments);
|
||||
}
|
||||
|
||||
promptResponse(promptValue) {
|
||||
this.setState({ promptValue });
|
||||
}
|
||||
}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
borderRadius: 5,
|
||||
|
||||
Reference in New Issue
Block a user