Browse Source

Add scrollableWhenZoomin prop

iou90 5 years ago
parent
commit
dc7e18ba15
2 changed files with 13 additions and 10 deletions
  1. 9
    7
      autoHeightWebView/index.js
  2. 4
    3
      autoHeightWebView/utils.js

+ 9
- 7
autoHeightWebView/index.js View File

12
 
12
 
13
 const AutoHeightWebView = React.memo(
13
 const AutoHeightWebView = React.memo(
14
   forwardRef((props, ref) => {
14
   forwardRef((props, ref) => {
15
-    const { style, onMessage, onSizeUpdated, source } = props;
15
+    const { style, onMessage, onSizeUpdated, scrollableWhenZoomin, scrollEnabled, source } = props;
16
 
16
 
17
     if (!source) {
17
     if (!source) {
18
       return null;
18
       return null;
31
       height: style && style.height ? style.height : 0,
31
       height: style && style.height ? style.height : 0,
32
       width: getWidth(style)
32
       width: getWidth(style)
33
     });
33
     });
34
+    const [scrollable, setScrollable] = useState(false);
34
     const handleMessage = event => {
35
     const handleMessage = event => {
35
       onMessage && onMessage(event);
36
       onMessage && onMessage(event);
36
       if (!event.nativeEvent) {
37
       if (!event.nativeEvent) {
44
         console.error(error);
45
         console.error(error);
45
         return;
46
         return;
46
       }
47
       }
47
-      const { height, width } = data;
48
+      const { height, width, zoomin } = data;
49
+      !scrollEnabled && scrollableWhenZoomin && setScrollable(zoomin);
48
       const { height: previousHeight, width: previousWidth } = size;
50
       const { height: previousHeight, width: previousWidth } = size;
49
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
51
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
50
         setSize({
52
         setSize({
53
         });
55
         });
54
     };
56
     };
55
 
57
 
58
+    const currentScrollEnabled = scrollEnabled === false && scrollableWhenZoomin ? scrollable : scrollEnabled;
59
+
56
     const { currentSource, script } = reduceData(props);
60
     const { currentSource, script } = reduceData(props);
57
 
61
 
58
     const { width, height } = size;
62
     const { width, height } = size;
81
         ]}
85
         ]}
82
         injectedJavaScript={script}
86
         injectedJavaScript={script}
83
         source={currentSource}
87
         source={currentSource}
88
+        scrollEnabled={currentScrollEnabled}
84
       />
89
       />
85
     );
90
     );
86
   }),
91
   }),
89
 
94
 
90
 AutoHeightWebView.propTypes = {
95
 AutoHeightWebView.propTypes = {
91
   onSizeUpdated: PropTypes.func,
96
   onSizeUpdated: PropTypes.func,
92
-  // add files to android/app/src/main/assets/ (depends on baseUrl) on android
93
-  // add files to web/ (depends on baseUrl) on iOS
94
   files: PropTypes.arrayOf(
97
   files: PropTypes.arrayOf(
95
     PropTypes.shape({
98
     PropTypes.shape({
96
       href: PropTypes.string,
99
       href: PropTypes.string,
102
   customScript: PropTypes.string,
105
   customScript: PropTypes.string,
103
   customStyle: PropTypes.string,
106
   customStyle: PropTypes.string,
104
   zoomable: PropTypes.bool,
107
   zoomable: PropTypes.bool,
108
+  scrollableWhenZoomin: PropTypes.bool,
105
   // webview props
109
   // webview props
106
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
110
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
107
   onMessage: PropTypes.func,
111
   onMessage: PropTypes.func,
108
-  // baseUrl now contained by source
109
-  // 'web/' by default on iOS
110
-  // 'file:///android_asset/' by default on Android
112
+  scalesPageToFit: PropTypes.bool,
111
   source: PropTypes.object
113
   source: PropTypes.object
112
 };
114
 };
113
 
115
 

+ 4
- 3
autoHeightWebView/utils.js View File

91
   });
91
   });
92
 `
92
 `
93
 
93
 
94
-const getBaseScript = ({ style, zoomable, scalesPageToFit }) =>
94
+const getBaseScript = ({ style, zoomable, scalesPageToFit, scrollableWhenZoomin }) =>
95
   `
95
   `
96
   ;
96
   ;
97
   if (!document.getElementById("rnahw-wrapper")) {
97
   if (!document.getElementById("rnahw-wrapper")) {
107
   window.addEventListener('resize', updateSize);
107
   window.addEventListener('resize', updateSize);
108
   ${domMutationObserveScript}
108
   ${domMutationObserveScript}
109
   ${makeScalePageToFit(zoomable, scalesPageToFit)}
109
   ${makeScalePageToFit(zoomable, scalesPageToFit)}
110
+  ${scrollableWhenZoomin ? detectZoomChanged : ''}
110
   updateSize();
111
   updateSize();
111
   `;
112
   `;
112
 
113
 
154
   </script>
155
   </script>
155
 `;
156
 `;
156
 
157
 
157
-const getScript = ({ files, customStyle, customScript, style, zoomable, scalesPageToFit }) => {
158
-  let script = getBaseScript({ style, zoomable, scalesPageToFit });
158
+const getScript = ({ files, customStyle, customScript, style, zoomable, scalesPageToFit, scrollableWhenZoomin }) => {
159
+  let script = getBaseScript({ style, zoomable, scalesPageToFit, scrollableWhenZoomin });
159
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
160
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
160
   script = appendStylesToHead({ style: customStyle, script });
161
   script = appendStylesToHead({ style: customStyle, script });
161
   customScript && (script = customScript + script);
162
   customScript && (script = customScript + script);