Browse Source

clean up code style for demo

iou90 6 years ago
parent
commit
a0a7a7eac5
2 changed files with 29 additions and 74 deletions
  1. 17
    55
      demo/App.js
  2. 12
    19
      demo/config.js

+ 17
- 55
demo/App.js View File

2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
 
4
 
5
-import {
6
-  ScrollView,
7
-  StyleSheet,
8
-  Text,
9
-  TouchableOpacity,
10
-  Platform,
11
-  Linking
12
-} from 'react-native';
5
+import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform, Linking } from 'react-native';
13
 
6
 
14
 import AutoHeightWebView from 'react-native-autoheight-webview';
7
 import AutoHeightWebView from 'react-native-autoheight-webview';
15
 
8
 
20
   autoWidthHtml0,
13
   autoWidthHtml0,
21
   autoWidthHtml1,
14
   autoWidthHtml1,
22
   autoWidthScript,
15
   autoWidthScript,
23
-  autoDetectLinkHtml,
24
   autoDetectLinkScript,
16
   autoDetectLinkScript,
25
   style0,
17
   style0,
26
   inlineBodyStyle
18
   inlineBodyStyle
31
     super(props);
23
     super(props);
32
     this.state = {
24
     this.state = {
33
       heightHtml: autoHeightHtml0,
25
       heightHtml: autoHeightHtml0,
34
-      heightScript: null,
26
+      heightScript: autoDetectLinkScript,
35
       heightStyle: null,
27
       heightStyle: null,
36
       heightSize: {
28
       heightSize: {
37
         height: 0,
29
         height: 0,
49
 
41
 
50
   changeSource = () => {
42
   changeSource = () => {
51
     this.setState(prevState => ({
43
     this.setState(prevState => ({
52
-      widthHtml:
53
-        prevState.widthHtml === autoWidthHtml0
54
-          ? autoWidthHtml1
55
-          : autoWidthHtml0,
56
-      heightHtml:
57
-        prevState.heightHtml === autoHeightHtml0
58
-          ? autoHeightHtml1
59
-          : autoHeightHtml0
44
+      widthHtml: prevState.widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
45
+      heightHtml: prevState.heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
60
     }));
46
     }));
61
   };
47
   };
62
 
48
 
63
   changeStyle = () => {
49
   changeStyle = () => {
64
     this.setState(prevState => ({
50
     this.setState(prevState => ({
65
-      widthStyle:
66
-        prevState.widthStyle == inlineBodyStyle
67
-          ? style0 + inlineBodyStyle
68
-          : inlineBodyStyle,
51
+      widthStyle: prevState.widthStyle == inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
69
       heightStyle: prevState.heightStyle == null ? style0 : null
52
       heightStyle: prevState.heightStyle == null ? style0 : null
70
     }));
53
     }));
71
   };
54
   };
72
 
55
 
73
   changeScript = () => {
56
   changeScript = () => {
74
     this.setState(prevState => ({
57
     this.setState(prevState => ({
75
-      widthScript:
76
-        prevState.widthScript !== autoWidthScript ? autoWidthScript : null,
58
+      widthScript: prevState.widthScript !== autoWidthScript ? autoWidthScript : null,
77
       heightScript:
59
       heightScript:
78
-        prevState.heightScript !== autoHeightScript ? autoHeightScript : null
79
-    }));
80
-  };
81
-
82
-  changeTryBrowser = () => {
83
-    this.setState(_ => ({
84
-      widthHtml: autoWidthHtml0,
85
-      heightHtml: autoDetectLinkHtml,
86
-      widthScript: autoDetectLinkScript,
87
-      heightScript: autoDetectLinkScript
60
+        prevState.heightScript !== autoDetectLinkScript ? autoDetectLinkScript : autoHeightScript + autoDetectLinkScript
88
     }));
61
     }));
89
   };
62
   };
90
 
63
 
108
         contentContainerStyle={{
81
         contentContainerStyle={{
109
           justifyContent: 'center',
82
           justifyContent: 'center',
110
           alignItems: 'center'
83
           alignItems: 'center'
111
-        }}>
84
+        }}
85
+      >
112
         <AutoHeightWebView
86
         <AutoHeightWebView
113
           customStyle={heightStyle}
87
           customStyle={heightStyle}
114
           onError={() => console.log('height on error')}
88
           onError={() => console.log('height on error')}
124
           customScript={heightScript}
98
           customScript={heightScript}
125
           onMessage={event => {
99
           onMessage={event => {
126
             console.log('onMessage', event.nativeEvent.data);
100
             console.log('onMessage', event.nativeEvent.data);
127
-            let { data } = event.nativeEvent;
128
-
101
+            const { data } = event.nativeEvent;
102
+            let messageData;
129
             // maybe parse stringified JSON
103
             // maybe parse stringified JSON
130
             try {
104
             try {
131
-              data = JSON.parse(data);
105
+              messageData = JSON.parse(data);
132
             } catch (e) {
106
             } catch (e) {
133
               console.log(e.message);
107
               console.log(e.message);
134
             }
108
             }
135
-
136
-            if (typeof data === 'object') {
137
-              const { url } = data;
109
+            if (typeof messageData === 'object') {
110
+              const { url } = messageData;
138
               // check if this message concerns us
111
               // check if this message concerns us
139
               if (url && url.startsWith('http')) {
112
               if (url && url.startsWith('http')) {
140
-                Linking.openURL(url).catch(err =>
141
-                  console.error('An error occurred', err)
142
-                );
113
+                Linking.openURL(url).catch(error => console.error('An error occurred', error));
143
               }
114
               }
144
             }
115
             }
145
           }}
116
           }}
148
           height: {heightSize.height}, width: {heightSize.width}
119
           height: {heightSize.height}, width: {heightSize.width}
149
         </Text>
120
         </Text>
150
         <AutoHeightWebView
121
         <AutoHeightWebView
151
-          baseUrl={
152
-            Platform.OS === 'android'
153
-              ? 'file:///android_asset/webAssets/'
154
-              : 'webAssets/'
155
-          }
122
+          baseUrl={Platform.OS === 'android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
156
           style={{
123
           style={{
157
             marginTop: 15
124
             marginTop: 15
158
           }}
125
           }}
186
         <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
153
         <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
187
           <Text>change style</Text>
154
           <Text>change style</Text>
188
         </TouchableOpacity>
155
         </TouchableOpacity>
189
-        <TouchableOpacity onPress={this.changeTryBrowser} style={styles.button}>
190
-          <Text>try browser links</Text>
191
-        </TouchableOpacity>
192
-        <TouchableOpacity
193
-          onPress={this.changeScript}
194
-          style={[styles.button, { marginBottom: 100 }]}>
156
+        <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
195
           <Text>change script</Text>
157
           <Text>change script</Text>
196
         </TouchableOpacity>
158
         </TouchableOpacity>
197
       </ScrollView>
159
       </ScrollView>

+ 12
- 19
demo/config.js View File

1
 'use strict';
1
 'use strict';
2
 
2
 
3
-const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the tags "pets", "marriage", "career change", and "travel tips".</span></p>`;
3
+const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
4
 
4
 
5
 const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
5
 const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
6
 
6
 
24
     }
24
     }
25
 `;
25
 `;
26
 
26
 
27
+
28
+//https://medium.com/@elhardoum/opening-external-links-in-browser-in-react-native-webview-18fe6a66312a
29
+const autoDetectLinkScript = `
30
+!function(){
31
+  function isUrl(str){
32
+    return str.startsWith('http');
33
+  }
34
+  var e=function(e,n,t){if(n=n.replace(/^on/g,""),"addEventListener"in window)e.addEventListener(n,t,!1);else if("attachEvent"in window)e.attachEvent("on"+n,t);else{var o=e["on"+n];e["on"+n]=o?function(e){o(e),t(e)}:t}return e},n=document.querySelectorAll("a[href]");if(n)for(var t in n)n.hasOwnProperty(t)&&e(n[t],"onclick",function(e){!isUrl(this.href)||(e.preventDefault(),window.postMessage(JSON.stringify({url:this.href})))})
35
+}();
36
+`;
37
+
27
 const autoHeightScript = `
38
 const autoHeightScript = `
28
 var styleElement = document.createElement('style');
39
 var styleElement = document.createElement('style');
29
 styleElement.innerHTML = '${style1
40
 styleElement.innerHTML = '${style1
54
 document.head.appendChild(styleElement);
65
 document.head.appendChild(styleElement);
55
 `;
66
 `;
56
 
67
 
57
-const autoDetectLinkHtml = `
58
-  <p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">
59
-      <a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing.
60
-      <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span>
61
-  </p>
62
-`;
63
-
64
-//https://medium.com/@elhardoum/opening-external-links-in-browser-in-react-native-webview-18fe6a66312a
65
-const autoDetectLinkScript = `
66
-!function(){
67
-  function isUrl(str){
68
-    return str.startsWith('http');
69
-  }
70
-  var e=function(e,n,t){if(n=n.replace(/^on/g,""),"addEventListener"in window)e.addEventListener(n,t,!1);else if("attachEvent"in window)e.attachEvent("on"+n,t);else{var o=e["on"+n];e["on"+n]=o?function(e){o(e),t(e)}:t}return e},n=document.querySelectorAll("a[href]");if(n)for(var t in n)n.hasOwnProperty(t)&&e(n[t],"onclick",function(e){!isUrl(this.href)||(e.preventDefault(),window.postMessage(JSON.stringify({url:this.href})))})
71
-}();
72
-`;
73
-
74
 export {
68
 export {
75
   autoHeightHtml0,
69
   autoHeightHtml0,
76
   autoHeightHtml1,
70
   autoHeightHtml1,
80
   autoWidthHtml1,
74
   autoWidthHtml1,
81
   autoWidthScript,
75
   autoWidthScript,
82
   inlineBodyStyle,
76
   inlineBodyStyle,
83
-  autoDetectLinkHtml,
84
   autoDetectLinkScript
77
   autoDetectLinkScript
85
 };
78
 };