Commit 6f84493caf0d6a43f8005ccda0612ddca1d9cc37
Creates WebView component to handle assets path replacement
Rômulo Alves committed on 4/11/2018, 2:38:47 PMParent: 523c133eb74777d899a46f3566f6654c5a92a360
Files changed
| App.js | changed |
| BeakerWebView.js | added |
| App.js | ||
|---|---|---|
| @@ -9,9 +9,10 @@ | ||
| 9 | 9 … | } from 'react-native'; |
| 10 | 10 … | import nodejs from 'nodejs-mobile-react-native'; |
| 11 | 11 … | import RNFS from 'react-native-fs'; |
| 12 | 12 … | |
| 13 | -const BASE_URI = 'http://localhost'; | |
| 13 … | +import BeakerWebView from './BeakerWebView'; | |
| 14 … | + | |
| 14 | 15 … | const DEFAULT_URI = 'about:blank'; |
| 15 | 16 … | |
| 16 | 17 … | export default class App extends Component { |
| 17 | 18 … | constructor (props) { |
| @@ -71,37 +72,12 @@ | ||
| 71 | 72 … | * @function request |
| 72 | 73 … | * @description Executes request to the server to load the Dat |
| 73 | 74 … | */ |
| 74 | 75 … | request () { |
| 76 … | + const { inputValue } = this.state; | |
| 75 | 77 … | |
| 76 | - // Server port | |
| 77 | - let { port, inputValue } = this.state; | |
| 78 | - | |
| 79 | - if (!port) { | |
| 80 | - return alert('Server error.'); | |
| 81 | - } | |
| 82 | - | |
| 83 | - let uri = null; | |
| 84 | - | |
| 85 | - // Verify protocol | |
| 86 | - const httpExpression = new RegExp(/http(s)?/); | |
| 87 | - const datExpression = new RegExp(/^dat:\/\/?/i); | |
| 88 | - | |
| 89 | - if (httpExpression.test(inputValue)) { | |
| 90 | - uri = inputValue; | |
| 91 | - } else { | |
| 92 | - | |
| 93 | - // Try dat | |
| 94 | - if (datExpression.test(inputValue)) { | |
| 95 | - inputValue = inputValue.replace(datExpression, ''); | |
| 96 | - } | |
| 97 | - | |
| 98 | - uri = `${BASE_URI}:${port}/${inputValue}`; | |
| 99 | - } | |
| 100 | - | |
| 101 | - | |
| 102 | 78 … | // Update state to load the Dat |
| 103 | - return this.setState({ uri }); | |
| 79 … | + return this.setState({ uri: inputValue }); | |
| 104 | 80 … | } |
| 105 | 81 … | |
| 106 | 82 … | /** |
| 107 | 83 … | * @function onUriInputChange |
| @@ -130,9 +106,9 @@ | ||
| 130 | 106 … | }); |
| 131 | 107 … | } |
| 132 | 108 … | |
| 133 | 109 … | render() { |
| 134 | - const { inputValue, uri } = this.state; | |
| 110 … | + const { inputValue, port, uri } = this.state; | |
| 135 | 111 … | |
| 136 | 112 … | return ( |
| 137 | 113 … | <View style={ styles.container }> |
| 138 | 114 … | <View style={ styles.header }> |
| @@ -150,9 +126,9 @@ | ||
| 150 | 126 … | underlineColorAndroid="transparent" |
| 151 | 127 … | style={ styles.uriInput } /> |
| 152 | 128 … | </View> |
| 153 | 129 … | |
| 154 | - <WebView style={ styles.webview } source={{ uri }} /> | |
| 130 … | + <BeakerWebView port={ port } uri={ uri } /> | |
| 155 | 131 … | </View> |
| 156 | 132 … | ); |
| 157 | 133 … | } |
| 158 | 134 … | } |
| @@ -168,9 +144,6 @@ | ||
| 168 | 144 … | }, |
| 169 | 145 … | uriInput: { |
| 170 | 146 … | backgroundColor: '#fff', |
| 171 | 147 … | height: 40 |
| 172 | - }, | |
| 173 | - webview: { | |
| 174 | - flex: 1 | |
| 175 | 148 … | } |
| 176 | 149 … | }); |
| BeakerWebView.js | ||
|---|---|---|
| @@ -1,0 +1,63 @@ | ||
| 1 … | +import React, { Component } from 'react'; | |
| 2 … | +import { WebView } from 'react-native'; | |
| 3 … | + | |
| 4 … | +const BASE_URI = 'http://localhost'; | |
| 5 … | + | |
| 6 … | +class BeakerWebView extends Component { | |
| 7 … | + constructor (props) { | |
| 8 … | + super(props); | |
| 9 … | + | |
| 10 … | + this.getResourcesBaseScript = this.getResourcesBaseScript.bind(this); | |
| 11 … | + } | |
| 12 … | + | |
| 13 … | + state = { | |
| 14 … | + navigatingUri: '' | |
| 15 … | + } | |
| 16 … | + | |
| 17 … | + UNSAFE_componentWillReceiveProps (nextProps) { | |
| 18 … | + let { uri, port } = nextProps; | |
| 19 … | + | |
| 20 … | + // Verify protocol | |
| 21 … | + const datExpression = new RegExp(/^dat:\/\/?/i); | |
| 22 … | + | |
| 23 … | + if (datExpression.test(uri)) { | |
| 24 … | + uri = uri.replace(datExpression, ''); | |
| 25 … | + } | |
| 26 … | + | |
| 27 … | + const finalUri = `${BASE_URI}:${port}/${uri}`; | |
| 28 … | + | |
| 29 … | + return this.setState({ | |
| 30 … | + navigatingUri: finalUri | |
| 31 … | + }); | |
| 32 … | + } | |
| 33 … | + | |
| 34 … | + getResourcesBaseScript () { | |
| 35 … | + const { port } = this.props; | |
| 36 … | + const { navigatingUri } = this.state; | |
| 37 … | + | |
| 38 … | + return `(function () { | |
| 39 … | + var assets = Array.from(document.querySelectorAll('[href]')).concat(Array.from(document.querySelectorAll('[src]'))); | |
| 40 … | + | |
| 41 … | + for (var index = 0; index < assets.length; index++) { | |
| 42 … | + var element = assets[index]; | |
| 43 … | + var attr = element.href ? 'href' : 'src'; | |
| 44 … | + var elementSrc = element[attr].replace('${BASE_URI}:${port}', '${navigatingUri}'); | |
| 45 … | + | |
| 46 … | + element[attr] = elementSrc; | |
| 47 … | + } | |
| 48 … | + }());`; | |
| 49 … | + } | |
| 50 … | + | |
| 51 … | + render () { | |
| 52 … | + const { navigatingUri } = this.state; | |
| 53 … | + const injectedJavaScript = this.getResourcesBaseScript(); | |
| 54 … | + | |
| 55 … | + return ( | |
| 56 … | + <WebView source={{ uri: navigatingUri }} | |
| 57 … | + automaticallyAdjustContentInsets={ true } | |
| 58 … | + injectedJavaScript={ injectedJavaScript } /> | |
| 59 … | + ); | |
| 60 … | + } | |
| 61 … | +} | |
| 62 … | + | |
| 63 … | +export default BeakerWebView; | |
Built with git-ssb-web