@momo-kits/webview 0.0.4-beta → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +4 -1
- package/lib/WebView.android.js +318 -1
- package/lib/WebView.ios.js +284 -1
- package/lib/WebView.js +16 -1
- package/lib/WebView.macos.js +272 -1
- package/lib/WebView.styles.js +35 -1
- package/lib/WebView.windows.js +189 -1
- package/lib/WebViewShared.js +61 -1
- package/lib/WebViewTypes.js +48 -1
- package/package.json +3 -10
- package/publish.sh +1 -1
- package/babel.config.js +0 -1
package/lib/WebView.js
CHANGED
|
@@ -1 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
// This "dummy" WebView is to render something for unsupported platforms,
|
|
4
|
+
// like for example Expo SDK "web" platform. It matches the previous react-native
|
|
5
|
+
// implementation which is produced by Expo SDK 37.0.0.1 implementation, with
|
|
6
|
+
// similar interface than the native ones have.
|
|
7
|
+
const WebView = () => (
|
|
8
|
+
<View style={{
|
|
9
|
+
alignSelf: 'flex-start',
|
|
10
|
+
borderColor: 'rgb(255, 0, 0)',
|
|
11
|
+
borderWidth: 1
|
|
12
|
+
}}
|
|
13
|
+
/>
|
|
14
|
+
);
|
|
15
|
+
export { WebView };
|
|
16
|
+
export default WebView;
|
package/lib/WebView.macos.js
CHANGED
|
@@ -1 +1,272 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
|
|
3
|
+
var __extends = (this && this.__extends) || (function () {
|
|
4
|
+
var extendStatics = function (d, b) {
|
|
5
|
+
extendStatics = Object.setPrototypeOf ||
|
|
6
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
7
|
+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
8
|
+
return extendStatics(d, b);
|
|
9
|
+
};
|
|
10
|
+
return function (d, b) {
|
|
11
|
+
extendStatics(d, b);
|
|
12
|
+
function __() { this.constructor = d; }
|
|
13
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
+
};
|
|
15
|
+
})();
|
|
16
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
17
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
18
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
19
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
20
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
21
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
22
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
26
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
27
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
28
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
29
|
+
function step(op) {
|
|
30
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
31
|
+
while (_) try {
|
|
32
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
33
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
34
|
+
switch (op[0]) {
|
|
35
|
+
case 0: case 1: t = op; break;
|
|
36
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
37
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
38
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
39
|
+
default:
|
|
40
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
41
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
42
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
43
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
44
|
+
if (t[2]) _.ops.pop();
|
|
45
|
+
_.trys.pop(); continue;
|
|
46
|
+
}
|
|
47
|
+
op = body.call(thisArg, _);
|
|
48
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
49
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
53
|
+
var t = {};
|
|
54
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
55
|
+
t[p] = s[p];
|
|
56
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
57
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
58
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
59
|
+
t[p[i]] = s[p[i]];
|
|
60
|
+
}
|
|
61
|
+
return t;
|
|
62
|
+
};
|
|
63
|
+
import React from 'react';
|
|
64
|
+
import { UIManager as NotTypedUIManager, View, requireNativeComponent, NativeModules, Image, findNodeHandle, } from 'react-native';
|
|
65
|
+
import invariant from 'invariant';
|
|
66
|
+
import { defaultOriginWhitelist, createOnShouldStartLoadWithRequest, defaultRenderError, defaultRenderLoading, } from './WebViewShared';
|
|
67
|
+
import styles from './WebView.styles';
|
|
68
|
+
var UIManager = NotTypedUIManager;
|
|
69
|
+
var resolveAssetSource = Image.resolveAssetSource;
|
|
70
|
+
var RNCWebViewManager = NativeModules.RNCWebViewManager;
|
|
71
|
+
var RNCWebView = requireNativeComponent('RNCWebView');
|
|
72
|
+
var WebView = /** @class */ (function (_super) {
|
|
73
|
+
__extends(WebView, _super);
|
|
74
|
+
function WebView() {
|
|
75
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
76
|
+
_this.state = {
|
|
77
|
+
viewState: _this.props.startInLoadingState ? 'LOADING' : 'IDLE',
|
|
78
|
+
lastErrorEvent: null
|
|
79
|
+
};
|
|
80
|
+
_this.webViewRef = React.createRef();
|
|
81
|
+
// eslint-disable-next-line react/sort-comp
|
|
82
|
+
_this.getCommands = function () { return UIManager.getViewManagerConfig('RNCWebView').Commands; };
|
|
83
|
+
/**
|
|
84
|
+
* Go forward one page in the web view's history.
|
|
85
|
+
*/
|
|
86
|
+
_this.goForward = function () {
|
|
87
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), _this.getCommands().goForward, undefined);
|
|
88
|
+
};
|
|
89
|
+
/**
|
|
90
|
+
* Go back one page in the web view's history.
|
|
91
|
+
*/
|
|
92
|
+
_this.goBack = function () {
|
|
93
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), _this.getCommands().goBack, undefined);
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Reloads the current page.
|
|
97
|
+
*/
|
|
98
|
+
_this.reload = function () {
|
|
99
|
+
_this.setState({ viewState: 'LOADING' });
|
|
100
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), _this.getCommands().reload, undefined);
|
|
101
|
+
};
|
|
102
|
+
/**
|
|
103
|
+
* Stop loading the current page.
|
|
104
|
+
*/
|
|
105
|
+
_this.stopLoading = function () {
|
|
106
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), _this.getCommands().stopLoading, undefined);
|
|
107
|
+
};
|
|
108
|
+
/**
|
|
109
|
+
* Request focus on WebView rendered page.
|
|
110
|
+
*/
|
|
111
|
+
_this.requestFocus = function () {
|
|
112
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), _this.getCommands().requestFocus, undefined);
|
|
113
|
+
};
|
|
114
|
+
/**
|
|
115
|
+
* Posts a message to the web view, which will emit a `message` event.
|
|
116
|
+
* Accepts one argument, `data`, which must be a string.
|
|
117
|
+
*
|
|
118
|
+
* In your webview, you'll need to something like the following.
|
|
119
|
+
*
|
|
120
|
+
* ```js
|
|
121
|
+
* document.addEventListener('message', e => { document.title = e.data; });
|
|
122
|
+
* ```
|
|
123
|
+
*/
|
|
124
|
+
_this.postMessage = function (data) {
|
|
125
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), _this.getCommands().postMessage, [String(data)]);
|
|
126
|
+
};
|
|
127
|
+
/**
|
|
128
|
+
* Injects a javascript string into the referenced WebView. Deliberately does not
|
|
129
|
+
* return a response because using eval() to return a response breaks this method
|
|
130
|
+
* on pages with a Content Security Policy that disallows eval(). If you need that
|
|
131
|
+
* functionality, look into postMessage/onMessage.
|
|
132
|
+
*/
|
|
133
|
+
_this.injectJavaScript = function (data) {
|
|
134
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), _this.getCommands().injectJavaScript, [data]);
|
|
135
|
+
};
|
|
136
|
+
/**
|
|
137
|
+
* We return an event with a bunch of fields including:
|
|
138
|
+
* url, title, loading, canGoBack, canGoForward
|
|
139
|
+
*/
|
|
140
|
+
_this.updateNavigationState = function (event) {
|
|
141
|
+
if (_this.props.onNavigationStateChange) {
|
|
142
|
+
_this.props.onNavigationStateChange(event.nativeEvent);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
/**
|
|
146
|
+
* Returns the native `WebView` node.
|
|
147
|
+
*/
|
|
148
|
+
_this.getWebViewHandle = function () {
|
|
149
|
+
var nodeHandle = findNodeHandle(_this.webViewRef.current);
|
|
150
|
+
invariant(nodeHandle != null, 'nodeHandle expected to be non-null');
|
|
151
|
+
return nodeHandle;
|
|
152
|
+
};
|
|
153
|
+
_this.onLoadingStart = function (event) {
|
|
154
|
+
var onLoadStart = _this.props.onLoadStart;
|
|
155
|
+
if (onLoadStart) {
|
|
156
|
+
onLoadStart(event);
|
|
157
|
+
}
|
|
158
|
+
_this.updateNavigationState(event);
|
|
159
|
+
};
|
|
160
|
+
_this.onLoadingError = function (event) {
|
|
161
|
+
event.persist(); // persist this event because we need to store it
|
|
162
|
+
var _a = _this.props, onError = _a.onError, onLoadEnd = _a.onLoadEnd;
|
|
163
|
+
if (onLoadEnd) {
|
|
164
|
+
onLoadEnd(event);
|
|
165
|
+
}
|
|
166
|
+
if (onError) {
|
|
167
|
+
onError(event);
|
|
168
|
+
}
|
|
169
|
+
console.warn('Encountered an error loading page', event.nativeEvent);
|
|
170
|
+
_this.setState({
|
|
171
|
+
lastErrorEvent: event.nativeEvent,
|
|
172
|
+
viewState: 'ERROR'
|
|
173
|
+
});
|
|
174
|
+
};
|
|
175
|
+
_this.onHttpError = function (event) {
|
|
176
|
+
var onHttpError = _this.props.onHttpError;
|
|
177
|
+
if (onHttpError) {
|
|
178
|
+
onHttpError(event);
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
_this.onLoadingFinish = function (event) {
|
|
182
|
+
var _a = _this.props, onLoad = _a.onLoad, onLoadEnd = _a.onLoadEnd;
|
|
183
|
+
if (onLoad) {
|
|
184
|
+
onLoad(event);
|
|
185
|
+
}
|
|
186
|
+
if (onLoadEnd) {
|
|
187
|
+
onLoadEnd(event);
|
|
188
|
+
}
|
|
189
|
+
_this.setState({
|
|
190
|
+
viewState: 'IDLE'
|
|
191
|
+
});
|
|
192
|
+
_this.updateNavigationState(event);
|
|
193
|
+
};
|
|
194
|
+
_this.onMessage = function (event) {
|
|
195
|
+
var onMessage = _this.props.onMessage;
|
|
196
|
+
if (onMessage) {
|
|
197
|
+
onMessage(event);
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
_this.onLoadingProgress = function (event) {
|
|
201
|
+
var onLoadProgress = _this.props.onLoadProgress;
|
|
202
|
+
if (onLoadProgress) {
|
|
203
|
+
onLoadProgress(event);
|
|
204
|
+
}
|
|
205
|
+
};
|
|
206
|
+
_this.onShouldStartLoadWithRequestCallback = function (shouldStart, _url, lockIdentifier) {
|
|
207
|
+
var viewManager = (_this.props.nativeConfig && _this.props.nativeConfig.viewManager)
|
|
208
|
+
|| RNCWebViewManager;
|
|
209
|
+
viewManager.startLoadWithResult(!!shouldStart, lockIdentifier);
|
|
210
|
+
};
|
|
211
|
+
_this.onContentProcessDidTerminate = function (event) {
|
|
212
|
+
var onContentProcessDidTerminate = _this.props.onContentProcessDidTerminate;
|
|
213
|
+
if (onContentProcessDidTerminate) {
|
|
214
|
+
onContentProcessDidTerminate(event);
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
return _this;
|
|
218
|
+
}
|
|
219
|
+
WebView.prototype.componentDidUpdate = function (prevProps) {
|
|
220
|
+
this.showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
|
|
221
|
+
this.showRedboxOnPropChanges(prevProps, 'incognito');
|
|
222
|
+
this.showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
|
|
223
|
+
};
|
|
224
|
+
WebView.prototype.showRedboxOnPropChanges = function (prevProps, propName) {
|
|
225
|
+
if (this.props[propName] !== prevProps[propName]) {
|
|
226
|
+
console.error("Changes to property " + propName + " do nothing after the initial render.");
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
WebView.prototype.render = function () {
|
|
230
|
+
var _a = this.props, _b = _a.nativeConfig, nativeConfig = _b === void 0 ? {} : _b, onMessage = _a.onMessage, onShouldStartLoadWithRequestProp = _a.onShouldStartLoadWithRequest, originWhitelist = _a.originWhitelist, renderError = _a.renderError, renderLoading = _a.renderLoading, style = _a.style, containerStyle = _a.containerStyle, otherProps = __rest(_a, ["nativeConfig", "onMessage", "onShouldStartLoadWithRequest", "originWhitelist", "renderError", "renderLoading", "style", "containerStyle"]);
|
|
231
|
+
var otherView = null;
|
|
232
|
+
if (this.state.viewState === 'LOADING') {
|
|
233
|
+
otherView = (renderLoading || defaultRenderLoading)();
|
|
234
|
+
}
|
|
235
|
+
else if (this.state.viewState === 'ERROR') {
|
|
236
|
+
var errorEvent = this.state.lastErrorEvent;
|
|
237
|
+
invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
|
|
238
|
+
otherView = (renderError || defaultRenderError)(errorEvent.domain, errorEvent.code, errorEvent.description);
|
|
239
|
+
}
|
|
240
|
+
else if (this.state.viewState !== 'IDLE') {
|
|
241
|
+
console.error("RNCWebView invalid state encountered: " + this.state.viewState);
|
|
242
|
+
}
|
|
243
|
+
var webViewStyles = [styles.container, styles.webView, style];
|
|
244
|
+
var webViewContainerStyle = [styles.container, containerStyle];
|
|
245
|
+
var onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(this.onShouldStartLoadWithRequestCallback,
|
|
246
|
+
// casting cause it's in the default props
|
|
247
|
+
originWhitelist, onShouldStartLoadWithRequestProp);
|
|
248
|
+
var NativeWebView = nativeConfig.component
|
|
249
|
+
|| RNCWebView;
|
|
250
|
+
var webView = (<NativeWebView key="webViewKey" {...otherProps} messagingEnabled={typeof onMessage === 'function'} onLoadingError={this.onLoadingError} onLoadingFinish={this.onLoadingFinish} onLoadingProgress={this.onLoadingProgress} onLoadingStart={this.onLoadingStart} onHttpError={this.onHttpError} onMessage={this.onMessage} onScroll={this.props.onScroll} onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} onContentProcessDidTerminate={this.onContentProcessDidTerminate} ref={this.webViewRef}
|
|
251
|
+
// TODO: find a better way to type this.
|
|
252
|
+
source={resolveAssetSource(this.props.source)} style={webViewStyles} {...nativeConfig.props}/>);
|
|
253
|
+
return (<View style={webViewContainerStyle}>
|
|
254
|
+
{webView}
|
|
255
|
+
{otherView}
|
|
256
|
+
</View>);
|
|
257
|
+
};
|
|
258
|
+
WebView.defaultProps = {
|
|
259
|
+
javaScriptEnabled: true,
|
|
260
|
+
cacheEnabled: true,
|
|
261
|
+
originWhitelist: defaultOriginWhitelist,
|
|
262
|
+
useSharedProcessPool: true
|
|
263
|
+
};
|
|
264
|
+
WebView.isFileUploadSupported = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
265
|
+
return __generator(this, function (_a) {
|
|
266
|
+
// no native implementation for macOS, depends only on permissions
|
|
267
|
+
return [2 /*return*/, true];
|
|
268
|
+
});
|
|
269
|
+
}); };
|
|
270
|
+
return WebView;
|
|
271
|
+
}(React.Component));
|
|
272
|
+
export default WebView;
|
package/lib/WebView.styles.js
CHANGED
|
@@ -1 +1,35 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
|
|
3
|
+
import { StyleSheet } from 'react-native';
|
|
4
|
+
var styles = StyleSheet.create({
|
|
5
|
+
container: {
|
|
6
|
+
flex: 1,
|
|
7
|
+
overflow: 'hidden'
|
|
8
|
+
},
|
|
9
|
+
loadingOrErrorView: {
|
|
10
|
+
position: 'absolute',
|
|
11
|
+
flex: 1,
|
|
12
|
+
justifyContent: 'center',
|
|
13
|
+
alignItems: 'center',
|
|
14
|
+
height: '100%',
|
|
15
|
+
width: '100%',
|
|
16
|
+
backgroundColor: 'white'
|
|
17
|
+
},
|
|
18
|
+
loadingProgressBar: {
|
|
19
|
+
height: 20
|
|
20
|
+
},
|
|
21
|
+
errorText: {
|
|
22
|
+
fontSize: 14,
|
|
23
|
+
textAlign: 'center',
|
|
24
|
+
marginBottom: 2
|
|
25
|
+
},
|
|
26
|
+
errorTextTitle: {
|
|
27
|
+
fontSize: 15,
|
|
28
|
+
fontWeight: '500',
|
|
29
|
+
marginBottom: 10
|
|
30
|
+
},
|
|
31
|
+
webView: {
|
|
32
|
+
backgroundColor: '#ffffff'
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
export default styles;
|
package/lib/WebView.windows.js
CHANGED
|
@@ -1 +1,189 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
* Portions copyright for react-native-windows:
|
|
8
|
+
*
|
|
9
|
+
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
10
|
+
* Licensed under the MIT License.
|
|
11
|
+
*/
|
|
12
|
+
/* eslint-disable */
|
|
13
|
+
|
|
14
|
+
var __extends = (this && this.__extends) || (function () {
|
|
15
|
+
var extendStatics = function (d, b) {
|
|
16
|
+
extendStatics = Object.setPrototypeOf ||
|
|
17
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
18
|
+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
19
|
+
return extendStatics(d, b);
|
|
20
|
+
};
|
|
21
|
+
return function (d, b) {
|
|
22
|
+
extendStatics(d, b);
|
|
23
|
+
function __() { this.constructor = d; }
|
|
24
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
25
|
+
};
|
|
26
|
+
})();
|
|
27
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
28
|
+
var t = {};
|
|
29
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
30
|
+
t[p] = s[p];
|
|
31
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
32
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
33
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
34
|
+
t[p[i]] = s[p[i]];
|
|
35
|
+
}
|
|
36
|
+
return t;
|
|
37
|
+
};
|
|
38
|
+
import React from 'react';
|
|
39
|
+
import { UIManager as NotTypedUIManager, View, requireNativeComponent, StyleSheet, Image, findNodeHandle, } from 'react-native';
|
|
40
|
+
import { createOnShouldStartLoadWithRequest, } from './WebViewShared';
|
|
41
|
+
var UIManager = NotTypedUIManager;
|
|
42
|
+
var resolveAssetSource = Image.resolveAssetSource;
|
|
43
|
+
var RCTWebView = requireNativeComponent('RCTWebView');
|
|
44
|
+
var styles = StyleSheet.create({
|
|
45
|
+
container: {
|
|
46
|
+
flex: 1
|
|
47
|
+
},
|
|
48
|
+
hidden: {
|
|
49
|
+
height: 0,
|
|
50
|
+
flex: 0
|
|
51
|
+
},
|
|
52
|
+
loadingView: {
|
|
53
|
+
flex: 1,
|
|
54
|
+
justifyContent: 'center',
|
|
55
|
+
alignItems: 'center'
|
|
56
|
+
},
|
|
57
|
+
loadingProgressBar: {
|
|
58
|
+
height: 20
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
var WebView = /** @class */ (function (_super) {
|
|
62
|
+
__extends(WebView, _super);
|
|
63
|
+
function WebView() {
|
|
64
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
65
|
+
_this.state = {
|
|
66
|
+
viewState: _this.props.startInLoadingState ? 'LOADING' : 'IDLE',
|
|
67
|
+
lastErrorEvent: null
|
|
68
|
+
};
|
|
69
|
+
_this.webViewRef = React.createRef();
|
|
70
|
+
_this.goForward = function () {
|
|
71
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), UIManager.getViewManagerConfig('RCTWebView').Commands.goForward, undefined);
|
|
72
|
+
};
|
|
73
|
+
_this.goBack = function () {
|
|
74
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), UIManager.getViewManagerConfig('RCTWebView').Commands.goBack, undefined);
|
|
75
|
+
};
|
|
76
|
+
_this.reload = function () {
|
|
77
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), UIManager.getViewManagerConfig('RCTWebView').Commands.reload, undefined);
|
|
78
|
+
};
|
|
79
|
+
_this.injectJavaScript = function (data) {
|
|
80
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), UIManager.getViewManagerConfig('RCTWebView').Commands.injectJavaScript, [data]);
|
|
81
|
+
};
|
|
82
|
+
_this.postMessage = function (data) {
|
|
83
|
+
UIManager.dispatchViewManagerCommand(_this.getWebViewHandle(), UIManager.getViewManagerConfig('RCTWebView').Commands.postMessage, [String(data)]);
|
|
84
|
+
};
|
|
85
|
+
/**
|
|
86
|
+
* We return an event with a bunch of fields including:
|
|
87
|
+
* url, title, loading, canGoBack, canGoForward
|
|
88
|
+
*/
|
|
89
|
+
_this.updateNavigationState = function (event) {
|
|
90
|
+
if (_this.props.onNavigationStateChange) {
|
|
91
|
+
_this.props.onNavigationStateChange(event.nativeEvent);
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
_this.getWebViewHandle = function () {
|
|
95
|
+
// eslint-disable-next-line react/no-string-refs
|
|
96
|
+
return findNodeHandle(_this.webViewRef.current);
|
|
97
|
+
};
|
|
98
|
+
_this.onLoadingStart = function (event) {
|
|
99
|
+
var onLoadStart = _this.props.onLoadStart;
|
|
100
|
+
if (onLoadStart) {
|
|
101
|
+
onLoadStart(event);
|
|
102
|
+
}
|
|
103
|
+
_this.updateNavigationState(event);
|
|
104
|
+
};
|
|
105
|
+
_this.onLoadingProgress = function (event) {
|
|
106
|
+
var onLoadProgress = _this.props.onLoadProgress;
|
|
107
|
+
if (onLoadProgress) {
|
|
108
|
+
onLoadProgress(event);
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
_this.onLoadingError = function (event) {
|
|
112
|
+
event.persist(); // persist this event because we need to store it
|
|
113
|
+
var _a = _this.props, onError = _a.onError, onLoadEnd = _a.onLoadEnd;
|
|
114
|
+
if (onError) {
|
|
115
|
+
onError(event);
|
|
116
|
+
}
|
|
117
|
+
if (onLoadEnd) {
|
|
118
|
+
onLoadEnd(event);
|
|
119
|
+
}
|
|
120
|
+
console.error('Encountered an error loading page', event.nativeEvent);
|
|
121
|
+
_this.setState({
|
|
122
|
+
lastErrorEvent: event.nativeEvent,
|
|
123
|
+
viewState: 'ERROR'
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
_this.onLoadingFinish = function (event) {
|
|
127
|
+
var _a = _this.props, onLoad = _a.onLoad, onLoadEnd = _a.onLoadEnd;
|
|
128
|
+
if (onLoad) {
|
|
129
|
+
onLoad(event);
|
|
130
|
+
}
|
|
131
|
+
if (onLoadEnd) {
|
|
132
|
+
onLoadEnd(event);
|
|
133
|
+
}
|
|
134
|
+
_this.setState({
|
|
135
|
+
viewState: 'IDLE'
|
|
136
|
+
});
|
|
137
|
+
_this.updateNavigationState(event);
|
|
138
|
+
};
|
|
139
|
+
_this.onMessage = function (event) {
|
|
140
|
+
var onMessage = _this.props.onMessage;
|
|
141
|
+
if (onMessage) {
|
|
142
|
+
onMessage(event);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
_this.onHttpError = function (event) {
|
|
146
|
+
var onHttpError = _this.props.onHttpError;
|
|
147
|
+
if (onHttpError) {
|
|
148
|
+
onHttpError(event);
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
return _this;
|
|
152
|
+
}
|
|
153
|
+
WebView.prototype.render = function () {
|
|
154
|
+
var _a = this.props, _b = _a.nativeConfig, nativeConfig = _b === void 0 ? {} : _b, onMessage = _a.onMessage, onShouldStartLoadWithRequestProp = _a.onShouldStartLoadWithRequest, originWhitelist = _a.originWhitelist, renderError = _a.renderError, renderLoading = _a.renderLoading, style = _a.style, containerStyle = _a.containerStyle, otherProps = __rest(_a, ["nativeConfig", "onMessage", "onShouldStartLoadWithRequest", "originWhitelist", "renderError", "renderLoading", "style", "containerStyle"]);
|
|
155
|
+
var otherView = null;
|
|
156
|
+
if (this.state.viewState === 'LOADING') {
|
|
157
|
+
otherView = this.props.renderLoading && this.props.renderLoading();
|
|
158
|
+
}
|
|
159
|
+
else if (this.state.viewState === 'ERROR') {
|
|
160
|
+
var errorEvent = this.state.lastErrorEvent;
|
|
161
|
+
otherView = this.props.renderError
|
|
162
|
+
&& this.props.renderError(errorEvent.domain, errorEvent.code, errorEvent.description);
|
|
163
|
+
}
|
|
164
|
+
else if (this.state.viewState !== 'IDLE') {
|
|
165
|
+
console.error('RCTWebView invalid state encountered: ', this.state.viewState);
|
|
166
|
+
}
|
|
167
|
+
var webViewStyles = [styles.container, this.props.style];
|
|
168
|
+
if (this.state.viewState === 'LOADING'
|
|
169
|
+
|| this.state.viewState === 'ERROR') {
|
|
170
|
+
// if we're in either LOADING or ERROR states, don't show the webView
|
|
171
|
+
webViewStyles.push(styles.hidden);
|
|
172
|
+
}
|
|
173
|
+
var onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(function () { },
|
|
174
|
+
// casting cause it's in the default props
|
|
175
|
+
originWhitelist, onShouldStartLoadWithRequestProp);
|
|
176
|
+
var NativeWebView = nativeConfig.component
|
|
177
|
+
|| RCTWebView;
|
|
178
|
+
var webView = (<NativeWebView ref={this.webViewRef} key="webViewKey" {...otherProps} messagingEnabled={typeof onMessage === 'function'} onLoadingError={this.onLoadingError} onLoadingFinish={this.onLoadingFinish} onLoadingProgress={this.onLoadingProgress} onLoadingStart={this.onLoadingStart} onHttpError={this.onHttpError} onMessage={this.onMessage} onScroll={this.props.onScroll} onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} source={resolveAssetSource(this.props.source)} style={webViewStyles} {...nativeConfig.props}/>);
|
|
179
|
+
return (<View style={styles.container}>
|
|
180
|
+
{webView}
|
|
181
|
+
{otherView}
|
|
182
|
+
</View>);
|
|
183
|
+
};
|
|
184
|
+
WebView.defaultProps = {
|
|
185
|
+
javaScriptEnabled: true
|
|
186
|
+
};
|
|
187
|
+
return WebView;
|
|
188
|
+
}(React.Component));
|
|
189
|
+
export default WebView;
|
package/lib/WebViewShared.js
CHANGED
|
@@ -1 +1,61 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
|
|
3
|
+
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
4
|
+
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
5
|
+
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
6
|
+
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
7
|
+
r[k] = a[j];
|
|
8
|
+
return r;
|
|
9
|
+
};
|
|
10
|
+
import escapeStringRegexp from 'escape-string-regexp';
|
|
11
|
+
import React from 'react';
|
|
12
|
+
import { Linking, View, ActivityIndicator, Text } from 'react-native';
|
|
13
|
+
import styles from './WebView.styles';
|
|
14
|
+
var defaultOriginWhitelist = ['http://*', 'https://*'];
|
|
15
|
+
var extractOrigin = function (url) {
|
|
16
|
+
var result = /^[A-Za-z][A-Za-z0-9+\-.]+:(\/\/)?[^/]*/.exec(url);
|
|
17
|
+
return result === null ? '' : result[0];
|
|
18
|
+
};
|
|
19
|
+
var originWhitelistToRegex = function (originWhitelist) {
|
|
20
|
+
return "^" + escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*');
|
|
21
|
+
};
|
|
22
|
+
var passesWhitelist = function (compiledWhitelist, url) {
|
|
23
|
+
var origin = extractOrigin(url);
|
|
24
|
+
return compiledWhitelist.some(function (x) { return new RegExp(x).test(origin); });
|
|
25
|
+
};
|
|
26
|
+
var compileWhitelist = function (originWhitelist) {
|
|
27
|
+
return __spreadArrays(['about:blank'], (originWhitelist || [])).map(originWhitelistToRegex);
|
|
28
|
+
};
|
|
29
|
+
var createOnShouldStartLoadWithRequest = function (loadRequest, originWhitelist, onShouldStartLoadWithRequest) {
|
|
30
|
+
return function (_a) {
|
|
31
|
+
var nativeEvent = _a.nativeEvent;
|
|
32
|
+
var shouldStart = true;
|
|
33
|
+
var url = nativeEvent.url, lockIdentifier = nativeEvent.lockIdentifier;
|
|
34
|
+
if (!passesWhitelist(compileWhitelist(originWhitelist), url)) {
|
|
35
|
+
Linking.canOpenURL(url).then(function (supported) {
|
|
36
|
+
if (supported) {
|
|
37
|
+
return Linking.openURL(url);
|
|
38
|
+
}
|
|
39
|
+
console.warn("Can't open url: " + url);
|
|
40
|
+
return undefined;
|
|
41
|
+
})["catch"](function (e) {
|
|
42
|
+
console.warn('Error opening URL: ', e);
|
|
43
|
+
});
|
|
44
|
+
shouldStart = false;
|
|
45
|
+
}
|
|
46
|
+
else if (onShouldStartLoadWithRequest) {
|
|
47
|
+
shouldStart = onShouldStartLoadWithRequest(nativeEvent);
|
|
48
|
+
}
|
|
49
|
+
loadRequest(shouldStart, url, lockIdentifier);
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
var defaultRenderLoading = function () { return (<View style={styles.loadingOrErrorView}>
|
|
53
|
+
<ActivityIndicator />
|
|
54
|
+
</View>); };
|
|
55
|
+
var defaultRenderError = function (errorDomain, errorCode, errorDesc) { return (<View style={styles.loadingOrErrorView}>
|
|
56
|
+
<Text style={styles.errorTextTitle}>Error loading page</Text>
|
|
57
|
+
<Text style={styles.errorText}>{"Domain: " + errorDomain}</Text>
|
|
58
|
+
<Text style={styles.errorText}>{"Error Code: " + errorCode}</Text>
|
|
59
|
+
<Text style={styles.errorText}>{"Description: " + errorDesc}</Text>
|
|
60
|
+
</View>); };
|
|
61
|
+
export { defaultOriginWhitelist, createOnShouldStartLoadWithRequest, defaultRenderLoading, defaultRenderError, };
|