mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-05-18 04:13:51 +08:00
Cleanup UIExplorer folder
Summary: Move all JS to a js/ subfolder so we get some overview of this folder again. Reviewed By: bestander Differential Revision: D3542598 fbshipit-source-id: 7637133fe4152f4d39e461b443b38510272d5bc8
This commit is contained in:
committed by
Facebook Github Bot 2
parent
7b7ecdf337
commit
2f73ca8f76
186
Examples/UIExplorer/js/AlertIOSExample.js
Normal file
186
Examples/UIExplorer/js/AlertIOSExample.js
Normal file
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* The examples provided by Facebook are for non-commercial testing and
|
||||
* evaluation purposes only.
|
||||
*
|
||||
* Facebook reserves all rights not expressly granted.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
||||
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
||||
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ReactNative = require('react-native');
|
||||
var {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
AlertIOS,
|
||||
} = ReactNative;
|
||||
|
||||
var { SimpleAlertExampleBlock } = require('./AlertExample');
|
||||
|
||||
exports.framework = 'React';
|
||||
exports.title = 'AlertIOS';
|
||||
exports.description = 'iOS alerts and action sheets';
|
||||
exports.examples = [{
|
||||
title: 'Alerts',
|
||||
render() {
|
||||
return <SimpleAlertExampleBlock />;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Prompt Options',
|
||||
render(): ReactElement<any> {
|
||||
return <PromptOptions />;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Prompt Types',
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => AlertIOS.prompt('Plain Text Entry')}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
plain-text
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
secure-text
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
login-password
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}];
|
||||
|
||||
class PromptOptions extends React.Component {
|
||||
state: any;
|
||||
customButtons: Array<Object>;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
// $FlowFixMe this seems to be a Flow bug, `saveResponse` is defined below
|
||||
this.saveResponse = this.saveResponse.bind(this);
|
||||
|
||||
this.customButtons = [{
|
||||
text: 'Custom OK',
|
||||
onPress: this.saveResponse
|
||||
}, {
|
||||
text: 'Custom Cancel',
|
||||
style: 'cancel',
|
||||
}];
|
||||
|
||||
this.state = {
|
||||
promptValue: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{marginBottom: 10}}>
|
||||
<Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue}
|
||||
</Text>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse)}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title & callback
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons)}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title & custom buttons
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title, callback & default value
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
prompt with title, custom buttons, login/password & default value
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
saveResponse(promptValue) {
|
||||
this.setState({ promptValue: JSON.stringify(promptValue) });
|
||||
}
|
||||
}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
borderRadius: 5,
|
||||
marginBottom: 5,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#eeeeee',
|
||||
padding: 10,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user