npm
/
react-native-autoheight-webview
Watch 10
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 23 Wiki Activity
Browse Source

Merge pull request #22 from piemonkey/add-support-for-custom-css 

Add support for custom css
iou90 7 years ago
parent
e46ae20c25 5fe9089930
commit
310081e250
No account linked to committer's email address
3 changed files with 75 additions and 31 deletions
Split View Show Diff Stats
  1. 11
    1
      README.md
  2. 30
    18
      autoHeightWebView/index.android.js
  3. 34
    12
      autoHeightWebView/index.ios.js

+ 11
- 1
README.md View File 

@@ -50,7 +50,17 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
50 50 
         rel: 'stylesheet'
51 51 
     }]}
52 52 
     // change script (have to change source to reload on android)
53 
-    customScript={`document.body.style.background = 'lightyellow';`} />
53 
+    customScript={`document.body.style.background = 'lightyellow';`}
54 
+    // add custom CSS to the page's <head>
55 
+    customStyle={`
56 
+      * {
57 
+        font-family: 'Times New Roman';
58 
+      }
59 
+      p {
60 
+        font-size: 16px;
61 
+      }
62 
+    `}
63 
+  />
54 64 
 ```
55 65
56 66 
 # demo

+ 30
- 18
autoHeightWebView/index.android.js View File 

@@ -31,6 +31,7 @@ export default class AutoHeightWebView extends PureComponent {
31 31 
     source: WebView.propTypes.source,
32 32 
     onHeightUpdated: PropTypes.func,
33 33 
     customScript: PropTypes.string,
34 
+    customStyle: PropTypes.string,
34 35 
     enableAnimation: PropTypes.bool,
35 36 
     // if set to false may cause some layout issues (width of container will be than width of screen)
36 37 
     scalesPageToFit: PropTypes.bool,
 
@@ -70,9 +71,12 @@ export default class AutoHeightWebView extends PureComponent {
70 71 
         this
71 72 
       );
72 73 
     }
73 
-    const initialScript = props.files
74 
+    let initialScript = props.files
74 75 
       ? this.appendFilesToHead(props.files, BaseScript)
75 76 
       : BaseScript;
77 
+    initialScript = props.customStyle
78 
+      ? this.appendStylesToHead(props.customStyle, initialScript)
79 
+      : initialScript;
76 80 
     this.state = {
77 81 
       isChangingSource: false,
78 82 
       height: 0,
 
@@ -120,6 +124,9 @@ export default class AutoHeightWebView extends PureComponent {
120 124 
     if (nextProps.files) {
121 125 
       currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
122 126 
     }
127 
+    currentScript = nextProps.customStyle
128 
+      ? this.appendStylesToHead(nextProps.customStyle, currentScript)
129 
+      : currentScript;
123 130 
     this.setState({ script: currentScript });
124 131 
   }
125 132 
 
@@ -209,24 +216,29 @@ export default class AutoHeightWebView extends PureComponent {
209 216 
     if (!files) {
210 217 
       return script;
211 218 
     }
212 
-    for (let file of files) {
213 
-      script =
214 
-        `
215 
-                var link  = document.createElement('link');
216 
-                link.rel  = '` +
217 
-        file.rel +
218 
-        `';
219 
-                link.type = '` +
220 
-        file.type +
221 
-        `';
222 
-                link.href = '` +
223 
-        file.href +
224 
-        `';
225 
-                document.head.appendChild(link);
226 
-                ` +
227 
-        script;
219 
+    return files.reduceRight((file, combinedScript) => `
220 
+      var link  = document.createElement('link');
221 
+      link.rel  = '${file.rel}';
222 
+      link.type = '${file.type}';
223 
+      link.href = '${file.href}';
224 
+      document.head.appendChild(link);
225 
+      ${combinedScript}
226 
+    `, script)
227 
+  }
228 
+
229 
+  appendStylesToHead(styles, script) {
230 
+    if (!styles) {
231 
+      return script;
228 232 
     }
229 
-    return script;
233 
+    // Escape any single quotes or newlines in the CSS with .replace()
234 
+    const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n')
235 
+    return `
236 
+      var styleElement = document.createElement('style');
237 
+      var styleText = document.createTextNode('${escaped}');
238 
+      styleElement.appendChild(styleText);
239 
+      document.head.appendChild(styleElement);
240 
+      ${script}
241 
+    `
230 242 
   }
231 243
232 244 
   render() {

+ 34
- 12
autoHeightWebView/index.ios.js View File 

@@ -19,6 +19,7 @@ export default class AutoHeightWebView extends PureComponent {
19 19 
         source: WebView.propTypes.source,
20 20 
         onHeightUpdated: PropTypes.func,
21 21 
         customScript: PropTypes.string,
22 
+        customStyle: PropTypes.string,
22 23 
         enableAnimation: PropTypes.bool,
23 24 
         // if set to true may cause some layout issues (smaller font size)
24 25 
         scalesPageToFit: PropTypes.bool,
 
@@ -48,7 +49,13 @@ export default class AutoHeightWebView extends PureComponent {
48 49 
         if (this.props.enableAnimation) {
49 50 
             this.opacityAnimatedValue = new Animated.Value(0);
50 51 
         }
51 
-        const initialScript = props.files ? this.appendFilesToHead(props.files, props.hasIframe ? IframeBaseScript : BaseScript) : props.hasIframe ? IframeBaseScript : BaseScript;
52 
+        let initialScript = props.hasIframe ? IframeBaseScript : BaseScript;
53 
+        initialScript = props.files
54 
+          ? this.appendFilesToHead(props.files, BaseScript)
55 
+          : BaseScript;
56 
+        initialScript = props.customStyle
57 
+          ? this.appendStylesToHead(props.customStyle, initialScript)
58 
+          : initialScript;
52 59 
         this.state = {
53 60 
             height: 0,
54 61 
             script: initialScript
 
@@ -58,8 +65,11 @@ export default class AutoHeightWebView extends PureComponent {
58 65 
     componentWillReceiveProps(nextProps) {
59 66 
         let currentScript = nextProps.hasIframe ? IframeBaseScript : BaseScript;
60 67 
         if (nextProps.files) {
61 
-            currentScript = this.appendFilesToHead(nextProps.files, nextProps.hasIframe ? IframeBaseScript : BaseScript);
68 
+            currentScript = this.appendFilesToHead(nextProps.files, currentScript);
62 69 
         }
70 
+        currentScript = nextProps.customStyle
71 
+          ? this.appendStylesToHead(nextProps.customStyle, currentScript)
72 
+          : currentScript;
63 73 
         this.setState({ script: currentScript });
64 74 
     }
65 75 
 
@@ -67,17 +77,29 @@ export default class AutoHeightWebView extends PureComponent {
67 77 
         if (!files) {
68 78 
             return script;
69 79 
         }
70 
-        for (let file of files) {
71 
-            script =
72 
-                `
73 
-                var link  = document.createElement('link');
74 
-                link.rel  = '` + file.rel + `';
75 
-                link.type = '` + file.type + `';
76 
-                link.href = '` + file.href + `';
77 
-                document.head.appendChild(link);
78 
-                `+ script;
79 
-        }
80 
+        return files.reduceRight((file, combinedScript) => `
81 
+          var link  = document.createElement('link');
82 
+          link.rel  = '${file.rel}';
83 
+          link.type = '${file.type}';
84 
+          link.href = '${file.href}';
85 
+          document.head.appendChild(link);
86 
+          ${combinedScript}
87 
+        `, script)
88 
+    }
89 
+
90 
+    appendStylesToHead(styles, script) {
91 
+      if (!styles) {
80 92 
         return script;
93 
+      }
94 
+      // Escape any single quotes or newlines in the CSS with .replace()
95 
+      const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n')
96 
+      return `
97 
+        var styleElement = document.createElement('style');
98 
+        var styleText = document.createTextNode('${escaped}');
99 
+        styleElement.appendChild(styleText);
100 
+        document.head.appendChild(styleElement);
101 
+        ${script}
102 
+      `
81 103 
     }
82 104
83 105 
     onHeightUpdated(height) {