diff --git a/Examples/UIExplorer/js/WebViewExample.js b/Examples/UIExplorer/js/WebViewExample.js new file mode 100644 index 00000000000000..be1fb44aec1148 --- /dev/null +++ b/Examples/UIExplorer/js/WebViewExample.js @@ -0,0 +1,446 @@ +/** + * 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, + TouchableWithoutFeedback, + TouchableOpacity, + View, + WebView +} = ReactNative; + +var HEADER = '#3b5998'; +var BGWASH = 'rgba(255,255,255,0.8)'; +var DISABLED_WASH = 'rgba(255,255,255,0.25)'; + +var TEXT_INPUT_REF = 'urlInput'; +var WEBVIEW_REF = 'webview'; +var DEFAULT_URL = 'https://m.facebook.com'; + +class WebViewExample extends React.Component { + state = { + url: DEFAULT_URL, + status: 'No Page Loaded', + backButtonEnabled: false, + forwardButtonEnabled: false, + loading: true, + scalesPageToFit: true, + }; + + inputText = ''; + + handleTextInputChange = (event) => { + var url = event.nativeEvent.text; + if (!/^[a-zA-Z-_]+:/.test(url)) { + url = 'http://' + url; + } + this.inputText = url; + }; + + render() { + this.inputText = this.state.url; + + return ( + + + + + {'<'} + + + + + {'>'} + + + + + + + Go! + + + + + + + {this.state.status} + + + ); + } + + goBack = () => { + this.refs[WEBVIEW_REF].goBack(); + }; + + goForward = () => { + this.refs[WEBVIEW_REF].goForward(); + }; + + reload = () => { + this.refs[WEBVIEW_REF].reload(); + }; + + onShouldStartLoadWithRequest = (event) => { + // Implement any custom loading logic here, don't forget to return! + return true; + }; + + onNavigationStateChange = (navState) => { + this.setState({ + backButtonEnabled: navState.canGoBack, + forwardButtonEnabled: navState.canGoForward, + url: navState.url, + status: navState.title, + loading: navState.loading, + scalesPageToFit: true + }); + }; + + onSubmitEditing = (event) => { + this.pressGoButton(); + }; + + pressGoButton = () => { + var url = this.inputText.toLowerCase(); + if (url === this.state.url) { + this.reload(); + } else { + this.setState({ + url: url, + }); + } + // dismiss keyboard + this.refs[TEXT_INPUT_REF].blur(); + }; +} + +class Button extends React.Component { + _handlePress = () => { + if (this.props.enabled !== false && this.props.onPress) { + this.props.onPress(); + } + }; + + render() { + return ( + + + {this.props.text} + + + ); + } +} + +class ScaledWebView extends React.Component { + state = { + scalingEnabled: true, + }; + + render() { + return ( + + + + { this.state.scalingEnabled ? +