Browse Source

clean up code style for index.android, index.ios

iou90 6 years ago
parent
commit
78e5a9888f
3 changed files with 39 additions and 46 deletions
  1. 2
    2
      autoHeightWebView/common.js
  2. 24
    31
      autoHeightWebView/index.android.js
  3. 13
    13
      autoHeightWebView/index.ios.js

+ 2
- 2
autoHeightWebView/common.js View File

44
   props.onHeightUpdated && props.onHeightUpdated(height);
44
   props.onHeightUpdated && props.onHeightUpdated(height);
45
 }
45
 }
46
 
46
 
47
-const DomMutationObserveScript = 
47
+const domMutationObserveScript = 
48
 `
48
 `
49
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
49
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
50
 var observer = new MutationObserver(updateHeight);
50
 var observer = new MutationObserver(updateHeight);
54
 });
54
 });
55
 `
55
 `
56
 
56
 
57
-export { getScript, onHeightUpdated, DomMutationObserveScript };
57
+export { getScript, onHeightUpdated, domMutationObserveScript };

+ 24
- 31
autoHeightWebView/index.android.js View File

19
 
19
 
20
 import Immutable from 'immutable';
20
 import Immutable from 'immutable';
21
 
21
 
22
-import { getScript, onHeightUpdated, DomMutationObserveScript } from './common.js';
22
+import { getScript, onHeightUpdated, domMutationObserveScript } from './common.js';
23
 
23
 
24
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
24
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
25
   nativeOnly: {
25
   nativeOnly: {
74
   constructor(props) {
74
   constructor(props) {
75
     super(props);
75
     super(props);
76
     props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
76
     props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
77
+    isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
77
     this.state = {
78
     this.state = {
78
       isChangingSource: false,
79
       isChangingSource: false,
79
       height: 0,
80
       height: 0,
80
       heightOffset: 0,
81
       heightOffset: 0,
81
-      script: getScript(props, BaseScript)
82
+      script: getScript(props, baseScript)
82
     };
83
     };
83
   }
84
   }
84
 
85
 
85
-  componentWillMount() {
86
-    IsBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
87
-  }
88
-
89
   componentDidMount() {
86
   componentDidMount() {
90
     this.startInterval();
87
     this.startInterval();
91
   }
88
   }
107
         }
104
         }
108
       );
105
       );
109
     }
106
     }
110
-    this.setState({ script: getScript(nextProps, BaseScript) });
107
+    this.setState({ script: getScript(nextProps, baseScript) });
111
   }
108
   }
112
 
109
 
113
   componentWillUnmount() {
110
   componentWillUnmount() {
114
     this.stopInterval();
111
     this.stopInterval();
115
-    IsBelowKitKat && DeviceEventEmitter.removeListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
112
+    isBelowKitKat && DeviceEventEmitter.removeListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
116
   }
113
   }
117
 
114
 
118
   // below kitkat
115
   // below kitkat
139
     this.finishInterval = false;
136
     this.finishInterval = false;
140
     this.interval = setInterval(() => {
137
     this.interval = setInterval(() => {
141
       if (!this.finishInterval) {
138
       if (!this.finishInterval) {
142
-        IsBelowKitKat ? this.sendToWebView('getBodyHeight') : this.postMessage('getBodyHeight');
139
+        isBelowKitKat ? this.sendToWebView('getBodyHeight') : this.postMessage('getBodyHeight');
143
       }
140
       }
144
     }, 205);
141
     }, 205);
145
   }
142
   }
150
   }
147
   }
151
 
148
 
152
   onMessage = e => {
149
   onMessage = e => {
153
-    const height = parseInt(IsBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
154
-    if (height) {
150
+    const height = parseInt(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
151
+    if (height && height !== this.state.height) {
155
       const { enableAnimation, animationDuration, heightOffset } = this.props;
152
       const { enableAnimation, animationDuration, heightOffset } = this.props;
156
-      if (enableAnimation) {
157
-        this.opacityAnimatedValue.setValue(0);
158
-      }
153
+      enableAnimation && this.opacityAnimatedValue.setValue(0);
159
       this.stopInterval();
154
       this.stopInterval();
160
       this.setState(
155
       this.setState(
161
         {
156
         {
163
           height
158
           height
164
         },
159
         },
165
         () => {
160
         () => {
166
-          if (enableAnimation) {
167
-            Animated.timing(this.opacityAnimatedValue, {
168
-              toValue: 1,
169
-              duration: animationDuration
170
-            }).start(() => onHeightUpdated(height, this.props));
171
-          } else {
172
-            onHeightUpdated(height, this.props);
173
-          }
161
+          enableAnimation
162
+            ? Animated.timing(this.opacityAnimatedValue, {
163
+                toValue: 1,
164
+                duration: animationDuration
165
+              }).start(() => onHeightUpdated(height, this.props))
166
+            : onHeightUpdated(height, this.props);
174
         }
167
         }
175
       );
168
       );
176
     }
169
     }
216
     return (
209
     return (
217
       <Animated.View
210
       <Animated.View
218
         style={[
211
         style={[
219
-          Styles.container,
212
+          styles.container,
220
           {
213
           {
221
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
214
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
222
             height: height + heightOffset
215
             height: height + heightOffset
230
             onLoadingFinish={this.onLoadingFinish}
223
             onLoadingFinish={this.onLoadingFinish}
231
             onLoadingError={this.onLoadingError}
224
             onLoadingError={this.onLoadingError}
232
             ref={this.getWebView}
225
             ref={this.getWebView}
233
-            style={Styles.webView}
226
+            style={styles.webView}
234
             javaScriptEnabled={true}
227
             javaScriptEnabled={true}
235
             injectedJavaScript={script + customScript}
228
             injectedJavaScript={script + customScript}
236
             scalesPageToFit={scalesPageToFit}
229
             scalesPageToFit={scalesPageToFit}
246
   }
239
   }
247
 }
240
 }
248
 
241
 
249
-const ScreenWidth = Dimensions.get('window').width;
242
+const screenWidth = Dimensions.get('window').width;
250
 
243
 
251
-const IsBelowKitKat = Platform.Version < 19;
244
+const isBelowKitKat = Platform.Version < 19;
252
 
245
 
253
-const Styles = StyleSheet.create({
246
+const styles = StyleSheet.create({
254
   container: {
247
   container: {
255
-    width: ScreenWidth,
248
+    width: screenWidth,
256
     backgroundColor: 'transparent'
249
     backgroundColor: 'transparent'
257
   },
250
   },
258
   webView: {
251
   webView: {
261
   }
254
   }
262
 });
255
 });
263
 
256
 
264
-const BaseScript = IsBelowKitKat
257
+const baseScript = isBelowKitKat
265
   ? `
258
   ? `
266
     ; (function () {
259
     ; (function () {
267
         AutoHeightWebView.onMessage = function (message) {
260
         AutoHeightWebView.onMessage = function (message) {
268
             AutoHeightWebView.send(String(document.body.offsetHeight));
261
             AutoHeightWebView.send(String(document.body.offsetHeight));
269
         };
262
         };
270
-        ${DomMutationObserveScript}
263
+        ${domMutationObserveScript}
271
     } ());
264
     } ());
272
     `
265
     `
273
   : `
266
   : `
275
         document.addEventListener('message', function (e) {
268
         document.addEventListener('message', function (e) {
276
             window.postMessage(String(document.body.offsetHeight));
269
             window.postMessage(String(document.body.offsetHeight));
277
         });
270
         });
278
-        ${DomMutationObserveScript}
271
+        ${domMutationObserveScript}
279
     } ());
272
     } ());
280
     `;
273
     `;

+ 13
- 13
autoHeightWebView/index.ios.js View File

2
 
2
 
3
 import React, { PureComponent } from 'react';
3
 import React, { PureComponent } from 'react';
4
 
4
 
5
-import { Animated, Dimensions, StyleSheet, View, ViewPropTypes, WebView } from 'react-native';
5
+import { Animated, Dimensions, StyleSheet, ViewPropTypes, WebView } from 'react-native';
6
 
6
 
7
 import PropTypes from 'prop-types';
7
 import PropTypes from 'prop-types';
8
 
8
 
9
-import { getScript, onHeightUpdated, DomMutationObserveScript } from './common.js';
9
+import { getScript, onHeightUpdated, domMutationObserveScript } from './common.js';
10
 
10
 
11
 export default class AutoHeightWebView extends PureComponent {
11
 export default class AutoHeightWebView extends PureComponent {
12
   static propTypes = {
12
   static propTypes = {
51
     props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
51
     props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
52
     this.state = {
52
     this.state = {
53
       height: 0,
53
       height: 0,
54
-      script: getScript(props, BaseScript, IframeBaseScript)
54
+      script: getScript(props, baseScript, iframeBaseScript)
55
     };
55
     };
56
   }
56
   }
57
 
57
 
58
   componentWillReceiveProps(nextProps) {
58
   componentWillReceiveProps(nextProps) {
59
-    this.setState({ script: getScript(nextProps, BaseScript, IframeBaseScript) });
59
+    this.setState({ script: getScript(nextProps, baseScript, iframeBaseScript) });
60
   }
60
   }
61
 
61
 
62
   handleNavigationStateChange = navState => {
62
   handleNavigationStateChange = navState => {
100
     return (
100
     return (
101
       <Animated.View
101
       <Animated.View
102
         style={[
102
         style={[
103
-          Styles.container,
103
+          styles.container,
104
           {
104
           {
105
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
105
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
106
             height: height + heightOffset
106
             height: height + heightOffset
115
           onLoadStart={onLoadStart}
115
           onLoadStart={onLoadStart}
116
           onLoadEnd={onLoadEnd}
116
           onLoadEnd={onLoadEnd}
117
           onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
117
           onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
118
-          style={Styles.webView}
118
+          style={styles.webView}
119
           injectedJavaScript={script + customScript}
119
           injectedJavaScript={script + customScript}
120
           scrollEnabled={false}
120
           scrollEnabled={false}
121
           scalesPageToFit={scalesPageToFit}
121
           scalesPageToFit={scalesPageToFit}
127
   }
127
   }
128
 }
128
 }
129
 
129
 
130
-const ScreenWidth = Dimensions.get('window').width;
130
+const screenWidth = Dimensions.get('window').width;
131
 
131
 
132
-const Styles = StyleSheet.create({
132
+const styles = StyleSheet.create({
133
   container: {
133
   container: {
134
-    width: ScreenWidth,
134
+    width: screenWidth,
135
     backgroundColor: 'transparent'
135
     backgroundColor: 'transparent'
136
   },
136
   },
137
   webView: {
137
   webView: {
140
   }
140
   }
141
 });
141
 });
142
 
142
 
143
-const BaseScript = `
143
+const baseScript = `
144
     ;
144
     ;
145
     (function () {
145
     (function () {
146
         var i = 0;
146
         var i = 0;
158
                 window.location.hash = ++i;
158
                 window.location.hash = ++i;
159
             }
159
             }
160
         }
160
         }
161
-        ${DomMutationObserveScript}
161
+        ${domMutationObserveScript}
162
     } ());
162
     } ());
163
     `;
163
     `;
164
 
164
 
165
-const IframeBaseScript = `
165
+const iframeBaseScript = `
166
     ;
166
     ;
167
     (function () {
167
     (function () {
168
         var i = 0;
168
         var i = 0;
177
         updateHeight();
177
         updateHeight();
178
         window.addEventListener('load', updateHeight);
178
         window.addEventListener('load', updateHeight);
179
         window.addEventListener('resize', updateHeight);
179
         window.addEventListener('resize', updateHeight);
180
-        ${DomMutationObserveScript}
180
+        ${domMutationObserveScript}
181
     } ());
181
     } ());
182
     `;
182
     `;