|
@@ -1,25 +1,31 @@
|
1
|
1
|
'use strict';
|
2
|
2
|
|
3
|
|
-import React, { useState, useEffect, forwardRef } from 'react';
|
|
3
|
+import React, {useState, useEffect, forwardRef} from 'react';
|
4
|
4
|
|
5
|
|
-import { StyleSheet, Platform, ViewPropTypes } from 'react-native';
|
|
5
|
+import {StyleSheet, Platform, ViewPropTypes} from 'react-native';
|
6
|
6
|
|
7
|
7
|
import PropTypes from 'prop-types';
|
8
|
8
|
|
9
|
|
-import { WebView } from 'react-native-webview';
|
|
9
|
+import {WebView} from 'react-native-webview';
|
10
|
10
|
|
11
|
|
-import { reduceData, getWidth, isSizeChanged, shouldUpdate } from './utils';
|
|
11
|
+import {reduceData, getWidth, isSizeChanged, shouldUpdate} from './utils';
|
12
|
12
|
|
13
|
13
|
const AutoHeightWebView = React.memo(
|
14
|
14
|
forwardRef((props, ref) => {
|
15
|
|
- const { style, onMessage, onSizeUpdated, scrollEnabledWithZoomedin, scrollEnabled } = props;
|
|
15
|
+ const {
|
|
16
|
+ style,
|
|
17
|
+ onMessage,
|
|
18
|
+ onSizeUpdated,
|
|
19
|
+ scrollEnabledWithZoomedin,
|
|
20
|
+ scrollEnabled,
|
|
21
|
+ } = props;
|
16
|
22
|
|
17
|
23
|
const [size, setSize] = useState({
|
18
|
24
|
height: style && style.height ? style.height : 0,
|
19
|
|
- width: getWidth(style)
|
|
25
|
+ width: getWidth(style),
|
20
|
26
|
});
|
21
|
27
|
const [scrollable, setScrollable] = useState(false);
|
22
|
|
- const handleMessage = event => {
|
|
28
|
+ const handleMessage = (event) => {
|
23
|
29
|
onMessage && onMessage(event);
|
24
|
30
|
if (!event.nativeEvent) {
|
25
|
31
|
return;
|
|
@@ -32,29 +38,32 @@ const AutoHeightWebView = React.memo(
|
32
|
38
|
console.error(error);
|
33
|
39
|
return;
|
34
|
40
|
}
|
35
|
|
- const { height, width, zoomedin } = data;
|
|
41
|
+ const {height, width, zoomedin} = data;
|
36
|
42
|
!scrollEnabled && scrollEnabledWithZoomedin && setScrollable(!!zoomedin);
|
37
|
|
- const { height: previousHeight, width: previousWidth } = size;
|
38
|
|
- isSizeChanged({ height, previousHeight, width, previousWidth }) &&
|
|
43
|
+ const {height: previousHeight, width: previousWidth} = size;
|
|
44
|
+ isSizeChanged({height, previousHeight, width, previousWidth}) &&
|
39
|
45
|
setSize({
|
40
|
46
|
height,
|
41
|
|
- width
|
|
47
|
+ width,
|
42
|
48
|
});
|
43
|
49
|
};
|
44
|
50
|
|
45
|
|
- const currentScrollEnabled = scrollEnabled === false && scrollEnabledWithZoomedin ? scrollable : scrollEnabled;
|
|
51
|
+ const currentScrollEnabled =
|
|
52
|
+ scrollEnabled === false && scrollEnabledWithZoomedin
|
|
53
|
+ ? scrollable
|
|
54
|
+ : scrollEnabled;
|
46
|
55
|
|
47
|
|
- const { currentSource, script } = reduceData(props);
|
|
56
|
+ const {currentSource, script} = reduceData(props);
|
48
|
57
|
|
49
|
|
- const { width, height } = size;
|
|
58
|
+ const {width, height} = size;
|
50
|
59
|
useEffect(
|
51
|
60
|
() =>
|
52
|
61
|
onSizeUpdated &&
|
53
|
62
|
onSizeUpdated({
|
54
|
63
|
height,
|
55
|
|
- width
|
|
64
|
+ width,
|
56
|
65
|
}),
|
57
|
|
- [width, height, onSizeUpdated]
|
|
66
|
+ [width, height, onSizeUpdated],
|
58
|
67
|
);
|
59
|
68
|
|
60
|
69
|
return (
|
|
@@ -66,9 +75,9 @@ const AutoHeightWebView = React.memo(
|
66
|
75
|
styles.webView,
|
67
|
76
|
{
|
68
|
77
|
width,
|
69
|
|
- height
|
|
78
|
+ height,
|
70
|
79
|
},
|
71
|
|
- style
|
|
80
|
+ style,
|
72
|
81
|
]}
|
73
|
82
|
injectedJavaScript={script}
|
74
|
83
|
source={currentSource}
|
|
@@ -76,7 +85,7 @@ const AutoHeightWebView = React.memo(
|
76
|
85
|
/>
|
77
|
86
|
);
|
78
|
87
|
}),
|
79
|
|
- (prevProps, nextProps) => !shouldUpdate({ prevProps, nextProps })
|
|
88
|
+ (prevProps, nextProps) => !shouldUpdate({prevProps, nextProps}),
|
80
|
89
|
);
|
81
|
90
|
|
82
|
91
|
AutoHeightWebView.propTypes = {
|
|
@@ -85,8 +94,8 @@ AutoHeightWebView.propTypes = {
|
85
|
94
|
PropTypes.shape({
|
86
|
95
|
href: PropTypes.string,
|
87
|
96
|
type: PropTypes.string,
|
88
|
|
- rel: PropTypes.string
|
89
|
|
- })
|
|
97
|
+ rel: PropTypes.string,
|
|
98
|
+ }),
|
90
|
99
|
),
|
91
|
100
|
style: ViewPropTypes.style,
|
92
|
101
|
customScript: PropTypes.string,
|
|
@@ -97,31 +106,31 @@ AutoHeightWebView.propTypes = {
|
97
|
106
|
originWhitelist: PropTypes.arrayOf(PropTypes.string),
|
98
|
107
|
onMessage: PropTypes.func,
|
99
|
108
|
scalesPageToFit: PropTypes.bool,
|
100
|
|
- source: PropTypes.object
|
|
109
|
+ source: PropTypes.object,
|
101
|
110
|
};
|
102
|
111
|
|
103
|
112
|
let defaultProps = {
|
104
|
113
|
showsVerticalScrollIndicator: false,
|
105
|
114
|
showsHorizontalScrollIndicator: false,
|
106
|
|
- originWhitelist: ['*']
|
|
115
|
+ originWhitelist: ['*'],
|
107
|
116
|
};
|
108
|
117
|
|
109
|
118
|
Platform.OS === 'android' &&
|
110
|
119
|
Object.assign(defaultProps, {
|
111
|
|
- scalesPageToFit: false
|
|
120
|
+ scalesPageToFit: false,
|
112
|
121
|
});
|
113
|
122
|
|
114
|
123
|
Platform.OS === 'ios' &&
|
115
|
124
|
Object.assign(defaultProps, {
|
116
|
|
- viewportContent: 'width=device-width'
|
|
125
|
+ viewportContent: 'width=device-width',
|
117
|
126
|
});
|
118
|
127
|
|
119
|
128
|
AutoHeightWebView.defaultProps = defaultProps;
|
120
|
129
|
|
121
|
130
|
const styles = StyleSheet.create({
|
122
|
131
|
webView: {
|
123
|
|
- backgroundColor: 'transparent'
|
124
|
|
- }
|
|
132
|
+ backgroundColor: 'transparent',
|
|
133
|
+ },
|
125
|
134
|
});
|
126
|
135
|
|
127
|
136
|
export default AutoHeightWebView;
|