Browse Source

update common.js to support auto width

iou90 6 years ago
parent
commit
b14666eae1
1 changed files with 33 additions and 43 deletions
  1. 33
    43
      autoHeightWebView/common.js

+ 33
- 43
autoHeightWebView/common.js View File

1
 'use strict';
1
 'use strict';
2
 
2
 
3
+import { Dimensions } from 'react-native';
4
+
3
 function appendFilesToHead(files, script) {
5
 function appendFilesToHead(files, script) {
4
   if (!files) {
6
   if (!files) {
5
     return script;
7
     return script;
6
   }
8
   }
7
   return files.reduceRight((file, combinedScript) => {
9
   return files.reduceRight((file, combinedScript) => {
8
-      const { rel, type, href } = file;
10
+    const { rel, type, href } = file;
9
     return `
11
     return `
10
             var link  = document.createElement('link');
12
             var link  = document.createElement('link');
11
             link.rel  = '${rel}';
13
             link.rel  = '${rel}';
17
   }, script);
19
   }, script);
18
 }
20
 }
19
 
21
 
20
-function appendStylesToHead(styles, script, shouldResizeWidth) {
21
-    var bodyStyle;
22
-    if (shouldResizeWidth) {
23
-        bodyStyle = `
24
-            body {
25
-                display: flex;
26
-                justify-content: center;
27
-                align-items: center;
28
-            }`;
29
-    }
30
-    else {
31
-        bodyStyle = '';
32
-    }
33
-    
34
-    if (!styles) {
35
-        styles = bodyStyle;
36
-    }
37
-    else {
38
-        styles += bodyStyle;
39
-    }
22
+const screenWidth = Dimensions.get('window').width;
23
+
24
+function getWidth(style) {
25
+  return style && style.width ? style.width : screenWidth;
26
+}
27
+
28
+const bodyStyle = `
29
+body {
30
+  margin: 0;
31
+  padding: 0;
32
+}
33
+`;
34
+
35
+function appendStylesToHead(styles, script) {
36
+  const currentStyles = bodyStyle + styles;
40
   // Escape any single quotes or newlines in the CSS with .replace()
37
   // Escape any single quotes or newlines in the CSS with .replace()
41
-    const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
42
-    
38
+  const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
43
   return `
39
   return `
44
           var styleElement = document.createElement('style');
40
           var styleElement = document.createElement('style');
45
           var styleText = document.createTextNode('${escaped}');
41
           var styleText = document.createTextNode('${escaped}');
49
         `;
45
         `;
50
 }
46
 }
51
 
47
 
52
-function getScript(props, baseScript, iframeBaseScript) {
53
-    const { hasIframe, files, customStyle, shouldResizeWidth } = props;
54
-  let script = hasIframe ? iframeBaseScript : baseScript;
48
+function getScript(props, getBaseScript, getIframeBaseScript) {
49
+  const { hasIframe, files, customStyle, resizeWidth } = props;
50
+  const baseScript = getBaseScript(props.style);
51
+  let script = hasIframe ? baseScript : getIframeBaseScript(props.style);
55
   script = files ? appendFilesToHead(files, baseScript) : baseScript;
52
   script = files ? appendFilesToHead(files, baseScript) : baseScript;
56
-    script = appendStylesToHead(customStyle, script, shouldResizeWidth);
53
+  script = appendStylesToHead(customStyle, script, resizeWidth);
57
   return script;
54
   return script;
58
 }
55
 }
59
 
56
 
60
-function onHeightUpdated(height, props) {
61
-  props.onHeightUpdated && props.onHeightUpdated(height);
62
-}
63
-
64
-function onWidthUpdated(width, props) {
65
-    props.onWidthUpdated && props.onWidthUpdated(width);
66
-}
67
-
68
-function onHeightWidthUpdated(height, width, props) {
69
-    onHeightUpdated(height, props);
70
-    onWidthUpdated(width, props);
71
-    props.onHeightWidthUpdated && props.onHeightWidthUpdated(height, width);
57
+function handleSizeUpdated(height, width, onSizeUpdated) {
58
+  onSizeUpdated &&
59
+    onSizeUpdated({
60
+      height,
61
+      width
62
+    });
72
 }
63
 }
73
 
64
 
74
-const domMutationObserveScript = 
75
-`
65
+const domMutationObserveScript = `
76
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
66
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
77
-var observer = new MutationObserver(updateHeight);
67
+var observer = new MutationObserver(updateSize);
78
 observer.observe(document, {
68
 observer.observe(document, {
79
     subtree: true,
69
     subtree: true,
80
     attributes: true
70
     attributes: true
81
 });
71
 });
82
 `;
72
 `;
83
 
73
 
84
-export { getScript, onHeightUpdated, onWidthUpdated, onHeightWidthUpdated, domMutationObserveScript };
74
+export { getWidth, getScript, handleSizeUpdated, domMutationObserveScript };