Explorar el Código

add auto height related data to config.js & add auto with feature for demo

iou90 hace 6 años
padre
commit
7de5b07094
Se han modificado 2 ficheros con 80 adiciones y 34 borrados
  1. 62
    22
      demo/App.js
  2. 18
    12
      demo/config.js

+ 62
- 22
demo/App.js Ver fichero

@@ -10,21 +10,28 @@ import {
10 10
   autoHeightHtml0,
11 11
   autoHeightHtml1,
12 12
   autoHeightScript,
13
-  autoHeightStyle0,
14 13
   autoWidthHtml0,
15 14
   autoWidthHtml1,
16 15
   autoWidthScript,
17
-  autoWidthStyle0
16
+  style0,
17
+  inlineBodyStyle
18 18
 } from './config';
19 19
 
20 20
 export default class Explorer extends Component {
21 21
   constructor(props) {
22 22
     super(props);
23 23
     this.state = {
24
-      html: autoHeightHtml0,
25
-      script: null,
26
-      webViewStyle: null,
27
-      size: {
24
+      heightHtml: autoHeightHtml0,
25
+      heightScript: null,
26
+      heightStyle: null,
27
+      heightSize: {
28
+        height: 0,
29
+        width: 0
30
+      },
31
+      widthHtml: autoWidthHtml0,
32
+      widthScript: null,
33
+      widthStyle: inlineBodyStyle,
34
+      widthSize: {
28 35
         height: 0,
29 36
         width: 0
30 37
       }
@@ -33,27 +40,40 @@ export default class Explorer extends Component {
33 40
 
34 41
   changeSource = () => {
35 42
     this.setState(prevState => ({
36
-      html: prevState.html === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
43
+      widthHtml: prevState.widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
44
+      heightHtml: prevState.heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
37 45
     }));
38 46
   };
39 47
 
40 48
   changeStyle = () => {
41 49
     this.setState(prevState => ({
42
-      webViewStyle: prevState.webViewStyle == null ? autoHeightStyle0 : null
50
+      widthStyle: prevState.widthStyle == inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
51
+      heightStyle: prevState.heightStyle == null ? style0 : null
43 52
     }));
44 53
   };
45 54
 
46 55
   changeScript = () => {
47 56
     this.setState(prevState => ({
48
-      script: prevState.script === null ? autoHeightScript : null
57
+      widthScript: prevState.widthScript === null ? autoWidthScript : null,
58
+      heightScript: prevState.heightScript === null ? autoHeightScript : null
49 59
     }));
50 60
   };
51 61
 
52 62
   render() {
53
-    const { html, size, webViewStyle, script } = this.state;
63
+    const {
64
+      heightHtml,
65
+      heightSize,
66
+      heightStyle,
67
+      heightScript,
68
+      widthHtml,
69
+      widthSize,
70
+      widthStyle,
71
+      widthScript
72
+    } = this.state;
54 73
     return (
55 74
       <ScrollView
56 75
         style={{
76
+          paddingTop: 45,
57 77
           backgroundColor: 'lightyellow'
58 78
         }}
59 79
         contentContainerStyle={{
@@ -62,19 +82,42 @@ export default class Explorer extends Component {
62 82
         }}
63 83
       >
64 84
         <AutoHeightWebView
65
-          customStyle={webViewStyle}
66
-          onError={() => console.log('on error')}
67
-          onLoad={() => console.log('on load')}
68
-          onLoadStart={() => console.log('on load start')}
69
-          onLoadEnd={() => console.log('on load end')}
85
+          customStyle={heightStyle}
86
+          onError={() => console.log('height on error')}
87
+          onLoad={() => console.log('height on load')}
88
+          onLoadStart={() => console.log('height on load start')}
89
+          onLoadEnd={() => console.log('height on load end')}
70 90
           onShouldStartLoadWithRequest={result => {
71 91
             console.log(result);
72 92
             return true;
73 93
           }}
74
-          onSizeUpdated={size => this.setState({ size })}
75
-          source={{ html }}
76
-          customScript={script}
94
+          onSizeUpdated={heightSize => this.setState({ heightSize })}
95
+          source={{ html: heightHtml }}
96
+          customScript={heightScript}
77 97
         />
98
+        <Text style={{ padding: 5 }}>
99
+          height: {heightSize.height}, width: {heightSize.width}
100
+        </Text>
101
+        <AutoHeightWebView
102
+          style={{
103
+            marginTop: 15
104
+          }}
105
+          customStyle={widthStyle}
106
+          onError={() => console.log('width on error')}
107
+          onLoad={() => console.log('width on load')}
108
+          onLoadStart={() => console.log('width on load start')}
109
+          onLoadEnd={() => console.log('width on load end')}
110
+          onShouldStartLoadWithRequest={result => {
111
+            console.log(result);
112
+            return true;
113
+          }}
114
+          onSizeUpdated={widthSize => this.setState({ widthSize })}
115
+          source={{ html: widthHtml }}
116
+          customScript={widthScript}
117
+        />
118
+        <Text style={{ padding: 5 }}>
119
+          height: {widthSize.height}, width: {widthSize.width}
120
+        </Text>
78 121
         <TouchableOpacity onPress={this.changeSource} style={styles.button}>
79 122
           <Text>change source</Text>
80 123
         </TouchableOpacity>
@@ -82,11 +125,8 @@ export default class Explorer extends Component {
82 125
           <Text>change style</Text>
83 126
         </TouchableOpacity>
84 127
         <TouchableOpacity onPress={this.changeScript} style={styles.button}>
85
-          <Text>change script (have to change source to reload on android)</Text>
128
+          <Text>change heightScript</Text>
86 129
         </TouchableOpacity>
87
-        <Text style={{ padding: 5 }}>
88
-          height: {size.height}, width: {size.width}
89
-        </Text>
90 130
       </ScrollView>
91 131
     );
92 132
   }

+ 18
- 12
demo/config.js Ver fichero

@@ -4,42 +4,48 @@ const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size
4 4
 
5 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”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.`;
6 6
 
7
-const autoHeightStyle0 = `
7
+const style0 = `
8 8
     p {
9 9
         font-size: 25px !important;
10 10
     }
11 11
 `;
12 12
 
13
-const autoHeightStyle1 = `
13
+const style1 = `
14 14
     p {
15 15
         font-size: 12px !important;
16 16
     }
17 17
 `;
18 18
 
19
+const inlineBodyStyle = `
20
+    body {
21
+    display: inline-block 
22
+    }
23
+`;
24
+
19 25
 const autoHeightScript = `
20 26
 var styleElement = document.createElement('style');
21
-styleElement.innerHTML = '${autoHeightStyle1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
27
+styleElement.innerHTML = '${style1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
22 28
 document.head.appendChild(styleElement);
23 29
 document.body.style.background = 'cornflowerblue';
24 30
 `;
25 31
 
26
-const autoWidthHtml0 = ``;
27
-
28
-const autoWidthHtml1 = ``;
32
+const autoWidthHtml0 = `<p style="display: inline-block;background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">hey</p>`;
29 33
 
30
-const autoWidthStyle0 = ``;
34
+const autoWidthHtml1 = `<p style="display: inline-block;background-color: transparent !important;font-size: 35px;">hey</p>`;
31 35
 
32
-const autoWidthStyle1 = ``;
33
-
34
-const autoWidthScript = ``;
36
+const autoWidthScript = `
37
+var styleElement = document.createElement('style');
38
+styleElement.innerHTML = '${style1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
39
+document.head.appendChild(styleElement);
40
+`;
35 41
 
36 42
 export {
37 43
   autoHeightHtml0,
38 44
   autoHeightHtml1,
39
-  autoHeightStyle0,
45
+  style0,
40 46
   autoHeightScript,
41 47
   autoWidthHtml0,
42 48
   autoWidthHtml1,
43 49
   autoWidthScript,
44
-  autoWidthStyle0
50
+  inlineBodyStyle
45 51
 };