Thibault Malbranche 6 anni fa
parent
commit
757a2ad3cb
3 ha cambiato i file con 108 aggiunte e 80 eliminazioni
  1. 0
    1
      .eslintrc.js
  2. 21
    7
      src/WebView.android.tsx
  3. 87
    72
      src/WebView.ios.tsx

+ 0
- 1
.eslintrc.js Vedi File

@@ -32,7 +32,6 @@ module.exports = {
32 32
     'typescript/no-namespace': 'error',
33 33
     'typescript/no-non-null-assertion': 'error',
34 34
     'typescript/no-triple-slash-reference': 'error',
35
-    'typescript/no-type-alias': 'error',
36 35
     'typescript/prefer-namespace-keyword': 'error',
37 36
     'typescript/type-annotation-spacing': 'error',
38 37
 

+ 21
- 7
src/WebView.android.tsx Vedi File

@@ -168,15 +168,21 @@ export default class WebView extends React.Component<
168 168
 
169 169
   onLoadingStart = (event: WebViewNavigationEvent): void => {
170 170
     const { onLoadStart } = this.props;
171
-    onLoadStart && onLoadStart(event);
171
+    if (onLoadStart) {
172
+      onLoadStart(event);
173
+    }
172 174
     this.updateNavigationState(event);
173 175
   };
174 176
 
175 177
   onLoadingError = (event: WebViewErrorEvent): void => {
176 178
     event.persist(); // persist this event because we need to store it
177 179
     const { onError, onLoadEnd } = this.props;
178
-    onError && onError(event);
179
-    onLoadEnd && onLoadEnd(event);
180
+    if (onError) {
181
+      onError(event);
182
+    }
183
+    if (onLoadEnd) {
184
+      onLoadEnd(event);
185
+    }
180 186
     console.warn('Encountered an error loading page', event.nativeEvent);
181 187
 
182 188
     this.setState({
@@ -187,8 +193,12 @@ export default class WebView extends React.Component<
187 193
 
188 194
   onLoadingFinish = (event: WebViewNavigationEvent): void => {
189 195
     const { onLoad, onLoadEnd } = this.props;
190
-    onLoad && onLoad(event);
191
-    onLoadEnd && onLoadEnd(event);
196
+    if (onLoad) {
197
+      onLoad(event);
198
+    }
199
+    if (onLoadEnd) {
200
+      onLoadEnd(event);
201
+    }
192 202
     this.setState({
193 203
       viewState: WebViewState.IDLE,
194 204
     });
@@ -197,14 +207,18 @@ export default class WebView extends React.Component<
197 207
 
198 208
   onMessage = (event: WebViewMessageEvent): void => {
199 209
     const { onMessage } = this.props;
200
-    onMessage && onMessage(event);
210
+    if (onMessage) {
211
+      onMessage(event);
212
+    }
201 213
   };
202 214
 
203 215
   onLoadingProgress = (
204 216
     event: NativeSyntheticEvent<WebViewProgressEvent>,
205 217
   ): void => {
206 218
     const { onLoadProgress } = this.props;
207
-    onLoadProgress && onLoadProgress(event);
219
+    if (onLoadProgress) {
220
+      onLoadProgress(event);
221
+    }
208 222
   };
209 223
 
210 224
   render(): React.ReactNode {

+ 87
- 72
src/WebView.ios.tsx Vedi File

@@ -47,6 +47,42 @@ const { RNCWKWebViewManager, RNCUIWebViewManager } = NativeModules;
47 47
 
48 48
 const BGWASH = 'rgba(255,255,255,0.8)';
49 49
 
50
+const styles = StyleSheet.create({
51
+  container: {
52
+    flex: 1,
53
+  },
54
+  errorContainer: {
55
+    flex: 1,
56
+    justifyContent: 'center',
57
+    alignItems: 'center',
58
+    backgroundColor: BGWASH,
59
+  },
60
+  errorText: {
61
+    fontSize: 14,
62
+    textAlign: 'center',
63
+    marginBottom: 2,
64
+  },
65
+  errorTextTitle: {
66
+    fontSize: 15,
67
+    fontWeight: '500',
68
+    marginBottom: 10,
69
+  },
70
+  hidden: {
71
+    height: 0,
72
+    flex: 0, // disable 'flex:1' when hiding a View
73
+  },
74
+  loadingView: {
75
+    backgroundColor: BGWASH,
76
+    flex: 1,
77
+    justifyContent: 'center',
78
+    alignItems: 'center',
79
+    height: 100,
80
+  },
81
+  webView: {
82
+    backgroundColor: '#ffffff',
83
+  },
84
+});
85
+
50 86
 enum WebViewState {
51 87
   IDLE = 'IDLE',
52 88
   LOADING = 'LOADING',
@@ -135,7 +171,8 @@ export default class WebView extends React.Component<
135 171
 
136 172
   webViewRef = React.createRef<React.ComponentClass>();
137 173
 
138
-  UNSAFE_componentWillMount() {
174
+  // eslint-disable-next-line camelcase, react/sort-comp
175
+  UNSAFE_componentWillMount(): void {
139 176
     if (
140 177
       this.props.useWebKit === true
141 178
       && this.props.scalesPageToFit !== undefined
@@ -154,19 +191,20 @@ export default class WebView extends React.Component<
154 191
     }
155 192
   }
156 193
 
157
-  _getCommands(): {
158
-    goForward: () => void;
159
-    goBack: () => void;
160
-    reload: () => void;
161
-    stopLoading: () => void;
162
-    postMessage: () => void;
163
-    injectJavaScript: () => void;
164
-  } {
165
-    if (!this.props.useWebKit) {
166
-      return UIManager.RNCUIWebView.Commands;
194
+  componentDidUpdate(prevProps: WebViewSharedProps): void {
195
+    if (!(prevProps.useWebKit && this.props.useWebKit)) {
196
+      return;
167 197
     }
168 198
 
169
-    return UIManager.RNCWKWebView.Commands;
199
+    this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
200
+    this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
201
+    this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
202
+
203
+    if (this.props.scalesPageToFit !== undefined) {
204
+      console.warn(
205
+        'The scalesPageToFit property is not supported when useWebKit = true',
206
+      );
207
+    }
170 208
   }
171 209
 
172 210
   /**
@@ -180,6 +218,21 @@ export default class WebView extends React.Component<
180 218
     );
181 219
   };
182 220
 
221
+  _getCommands(): {
222
+    goForward: () => void;
223
+    goBack: () => void;
224
+    reload: () => void;
225
+    stopLoading: () => void;
226
+    postMessage: () => void;
227
+    injectJavaScript: () => void;
228
+  } {
229
+    if (!this.props.useWebKit) {
230
+      return UIManager.RNCUIWebView.Commands;
231
+    }
232
+
233
+    return UIManager.RNCWKWebView.Commands;
234
+  }
235
+
183 236
   /**
184 237
    * Go back one page in the web view's history.
185 238
    */
@@ -263,16 +316,22 @@ export default class WebView extends React.Component<
263 316
     findNodeHandle(this.webViewRef.current);
264 317
 
265 318
   _onLoadingStart = (event: WebViewNavigationEvent): void => {
266
-    const onLoadStart = this.props.onLoadStart;
267
-    onLoadStart && onLoadStart(event);
319
+    const { onLoadStart } = this.props;
320
+    if (onLoadStart) {
321
+      onLoadStart(event);
322
+    }
268 323
     this._updateNavigationState(event);
269 324
   };
270 325
 
271 326
   _onLoadingError = (event: WebViewErrorEvent): void => {
272 327
     event.persist(); // persist this event because we need to store it
273 328
     const { onError, onLoadEnd } = this.props;
274
-    onError && onError(event);
275
-    onLoadEnd && onLoadEnd(event);
329
+    if (onError) {
330
+      onError(event);
331
+    }
332
+    if (onLoadEnd) {
333
+      onLoadEnd(event);
334
+    }
276 335
     console.warn('Encountered an error loading page', event.nativeEvent);
277 336
 
278 337
     this.setState({
@@ -283,8 +342,12 @@ export default class WebView extends React.Component<
283 342
 
284 343
   _onLoadingFinish = (event: WebViewNavigationEvent): void => {
285 344
     const { onLoad, onLoadEnd } = this.props;
286
-    onLoad && onLoad(event);
287
-    onLoadEnd && onLoadEnd(event);
345
+    if (onLoad) {
346
+      onLoad(event);
347
+    }
348
+    if (onLoadEnd) {
349
+      onLoadEnd(event);
350
+    }
288 351
     this.setState({
289 352
       viewState: WebViewState.IDLE,
290 353
     });
@@ -293,31 +356,19 @@ export default class WebView extends React.Component<
293 356
 
294 357
   _onMessage = (event: WebViewMessageEvent): void => {
295 358
     const { onMessage } = this.props;
296
-    onMessage && onMessage(event);
359
+    if (onMessage) {
360
+      onMessage(event);
361
+    }
297 362
   };
298 363
 
299 364
   _onLoadingProgress = (
300 365
     event: NativeSyntheticEvent<WebViewProgressEvent>,
301 366
   ): void => {
302 367
     const { onLoadProgress } = this.props;
303
-    onLoadProgress && onLoadProgress(event);
304
-  };
305
-
306
-  componentDidUpdate(prevProps: WebViewSharedProps): void {
307
-    if (!(prevProps.useWebKit && this.props.useWebKit)) {
308
-      return;
309
-    }
310
-
311
-    this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
312
-    this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
313
-    this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
314
-
315
-    if (this.props.scalesPageToFit !== undefined) {
316
-      console.warn(
317
-        'The scalesPageToFit property is not supported when useWebKit = true',
318
-      );
368
+    if (onLoadProgress) {
369
+      onLoadProgress(event);
319 370
     }
320
-  }
371
+  };
321 372
 
322 373
   _showRedboxOnPropChanges(
323 374
     prevProps: WebViewSharedProps,
@@ -481,39 +532,3 @@ export default class WebView extends React.Component<
481 532
 
482 533
 const RNCUIWebView = requireNativeComponent('RNCUIWebView');
483 534
 const RNCWKWebView = requireNativeComponent('RNCWKWebView');
484
-
485
-const styles = StyleSheet.create({
486
-  container: {
487
-    flex: 1,
488
-  },
489
-  errorContainer: {
490
-    flex: 1,
491
-    justifyContent: 'center',
492
-    alignItems: 'center',
493
-    backgroundColor: BGWASH,
494
-  },
495
-  errorText: {
496
-    fontSize: 14,
497
-    textAlign: 'center',
498
-    marginBottom: 2,
499
-  },
500
-  errorTextTitle: {
501
-    fontSize: 15,
502
-    fontWeight: '500',
503
-    marginBottom: 10,
504
-  },
505
-  hidden: {
506
-    height: 0,
507
-    flex: 0, // disable 'flex:1' when hiding a View
508
-  },
509
-  loadingView: {
510
-    backgroundColor: BGWASH,
511
-    flex: 1,
512
-    justifyContent: 'center',
513
-    alignItems: 'center',
514
-    height: 100,
515
-  },
516
-  webView: {
517
-    backgroundColor: '#ffffff',
518
-  },
519
-});