react-native/Examples/UIExplorer/js/XHRExampleFetch.js

149 lines
3.6 KiB
JavaScript
Raw Normal View History

/**
* 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,
Text,
TextInput,
View,
Platform,
} = ReactNative;
class XHRExampleFetch extends React.Component {
state: any;
responseURL: ?string;
responseHeaders: ?Object;
constructor(props: any) {
super(props);
this.state = {
responseText: null,
};
this.responseURL = null;
this.responseHeaders = null;
}
submit(uri: String) {
fetch(uri).then((response) => {
this.responseURL = response.url;
this.responseHeaders = response.headers;
return response.text();
}).then((body) => {
this.setState({responseText: body});
});
}
_renderHeaders() {
if (!this.responseHeaders) {
return null;
}
var responseHeaders = [];
var keys = Object.keys(this.responseHeaders.map);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var value = this.responseHeaders.get(key);
responseHeaders.push(<Text>{key}: {value}</Text>);
}
return responseHeaders;
}
render() {
var responseURL = this.responseURL ? (
<View style={{marginTop: 10}}>
<Text style={styles.label}>Server response URL:</Text>
<Text>{this.responseURL}</Text>
</View>
) : null;
var responseHeaders = this.responseHeaders ? (
<View style={{marginTop: 10}}>
<Text style={styles.label}>Server response headers:</Text>
{this._renderHeaders()}
</View>
) : null;
var response = this.state.responseText ? (
<View style={{marginTop: 10}}>
<Text style={styles.label}>Server response:</Text>
<TextInput
editable={false}
multiline={true}
defaultValue={this.state.responseText}
style={styles.textOutput}
/>
</View>
) : null;
return (
<View>
<Text style={styles.label}>Edit URL to submit:</Text>
<TextInput
returnKeyType="go"
defaultValue="http://www.posttestserver.com/post.php"
onSubmitEditing={(event)=> {
this.submit(event.nativeEvent.text);
}}
style={styles.textInput}
/>
{responseURL}
{responseHeaders}
{response}
</View>
);
}
}
var styles = StyleSheet.create({
textInput: {
flex: 1,
borderRadius: 3,
borderColor: 'grey',
borderWidth: 1,
height: Platform.OS === 'android' ? 44 : 30,
paddingLeft: 8,
},
label: {
flex: 1,
color: '#aaa',
fontWeight: '500',
height: 20,
},
textOutput: {
flex: 1,
fontSize: 17,
borderRadius: 3,
borderColor: 'grey',
borderWidth: 1,
height: 200,
paddingLeft: 8,
},
});
module.exports = XHRExampleFetch;