Browse Source

Clean up code styles

iou90 3 years ago
parent
commit
32ebcc2a1b
4 changed files with 81 additions and 53 deletions
  1. 0
    4
      .prettierrc
  2. 6
    0
      .prettierrc.js
  3. 36
    27
      autoHeightWebView/index.js
  4. 39
    22
      autoHeightWebView/utils.js

+ 0
- 4
.prettierrc View File

1
-{
2
-  "printWidth": 120,
3
-  "singleQuote": true
4
-}

+ 6
- 0
.prettierrc.js View File

1
+module.exports = {
2
+  bracketSpacing: false,
3
+  jsxBracketSameLine: true,
4
+  singleQuote: true,
5
+  trailingComma: 'all',
6
+};

+ 36
- 27
autoHeightWebView/index.js View File

1
 'use strict';
1
 'use strict';
2
 
2
 
3
-import React, { useState, useEffect, forwardRef } from 'react';
3
+import React, {useState, useEffect, forwardRef} from 'react';
4
 
4
 
5
-import { StyleSheet, Platform, ViewPropTypes } from 'react-native';
5
+import {StyleSheet, Platform, ViewPropTypes} from 'react-native';
6
 
6
 
7
 import PropTypes from 'prop-types';
7
 import PropTypes from 'prop-types';
8
 
8
 
9
-import { WebView } from 'react-native-webview';
9
+import {WebView} from 'react-native-webview';
10
 
10
 
11
-import { reduceData, getWidth, isSizeChanged, shouldUpdate } from './utils';
11
+import {reduceData, getWidth, isSizeChanged, shouldUpdate} from './utils';
12
 
12
 
13
 const AutoHeightWebView = React.memo(
13
 const AutoHeightWebView = React.memo(
14
   forwardRef((props, ref) => {
14
   forwardRef((props, ref) => {
15
-    const { style, onMessage, onSizeUpdated, scrollEnabledWithZoomedin, scrollEnabled } = props;
15
+    const {
16
+      style,
17
+      onMessage,
18
+      onSizeUpdated,
19
+      scrollEnabledWithZoomedin,
20
+      scrollEnabled,
21
+    } = props;
16
 
22
 
17
     const [size, setSize] = useState({
23
     const [size, setSize] = useState({
18
       height: style && style.height ? style.height : 0,
24
       height: style && style.height ? style.height : 0,
19
-      width: getWidth(style)
25
+      width: getWidth(style),
20
     });
26
     });
21
     const [scrollable, setScrollable] = useState(false);
27
     const [scrollable, setScrollable] = useState(false);
22
-    const handleMessage = event => {
28
+    const handleMessage = (event) => {
23
       onMessage && onMessage(event);
29
       onMessage && onMessage(event);
24
       if (!event.nativeEvent) {
30
       if (!event.nativeEvent) {
25
         return;
31
         return;
32
         console.error(error);
38
         console.error(error);
33
         return;
39
         return;
34
       }
40
       }
35
-      const { height, width, zoomedin } = data;
41
+      const {height, width, zoomedin} = data;
36
       !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(!!zoomedin);
42
       !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(!!zoomedin);
37
-      const { height: previousHeight, width: previousWidth } = size;
38
-      isSizeChanged({ height, previousHeight, width, previousWidth }) &&
43
+      const {height: previousHeight, width: previousWidth} = size;
44
+      isSizeChanged({height, previousHeight, width, previousWidth}) &&
39
         setSize({
45
         setSize({
40
           height,
46
           height,
41
-          width
47
+          width,
42
         });
48
         });
43
     };
49
     };
44
 
50
 
45
-    const currentScrollEnabled = scrollEnabled === false && scrollEnabledWithZoomedin ? scrollable : scrollEnabled;
51
+    const currentScrollEnabled =
52
+      scrollEnabled === false && scrollEnabledWithZoomedin
53
+        ? scrollable
54
+        : scrollEnabled;
46
 
55
 
47
-    const { currentSource, script } = reduceData(props);
56
+    const {currentSource, script} = reduceData(props);
48
 
57
 
49
-    const { width, height } = size;
58
+    const {width, height} = size;
50
     useEffect(
59
     useEffect(
51
       () =>
60
       () =>
52
         onSizeUpdated &&
61
         onSizeUpdated &&
53
         onSizeUpdated({
62
         onSizeUpdated({
54
           height,
63
           height,
55
-          width
64
+          width,
56
         }),
65
         }),
57
-      [width, height, onSizeUpdated]
66
+      [width, height, onSizeUpdated],
58
     );
67
     );
59
 
68
 
60
     return (
69
     return (
66
           styles.webView,
75
           styles.webView,
67
           {
76
           {
68
             width,
77
             width,
69
-            height
78
+            height,
70
           },
79
           },
71
-          style
80
+          style,
72
         ]}
81
         ]}
73
         injectedJavaScript={script}
82
         injectedJavaScript={script}
74
         source={currentSource}
83
         source={currentSource}
76
       />
85
       />
77
     );
86
     );
78
   }),
87
   }),
79
-  (prevProps, nextProps) => !shouldUpdate({ prevProps, nextProps })
88
+  (prevProps, nextProps) => !shouldUpdate({prevProps, nextProps}),
80
 );
89
 );
81
 
90
 
82
 AutoHeightWebView.propTypes = {
91
 AutoHeightWebView.propTypes = {
85
     PropTypes.shape({
94
     PropTypes.shape({
86
       href: PropTypes.string,
95
       href: PropTypes.string,
87
       type: PropTypes.string,
96
       type: PropTypes.string,
88
-      rel: PropTypes.string
89
-    })
97
+      rel: PropTypes.string,
98
+    }),
90
   ),
99
   ),
91
   style: ViewPropTypes.style,
100
   style: ViewPropTypes.style,
92
   customScript: PropTypes.string,
101
   customScript: PropTypes.string,
97
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
106
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
98
   onMessage: PropTypes.func,
107
   onMessage: PropTypes.func,
99
   scalesPageToFit: PropTypes.bool,
108
   scalesPageToFit: PropTypes.bool,
100
-  source: PropTypes.object
109
+  source: PropTypes.object,
101
 };
110
 };
102
 
111
 
103
 let defaultProps = {
112
 let defaultProps = {
104
   showsVerticalScrollIndicator: false,
113
   showsVerticalScrollIndicator: false,
105
   showsHorizontalScrollIndicator: false,
114
   showsHorizontalScrollIndicator: false,
106
-  originWhitelist: ['*']
115
+  originWhitelist: ['*'],
107
 };
116
 };
108
 
117
 
109
 Platform.OS === 'android' &&
118
 Platform.OS === 'android' &&
110
   Object.assign(defaultProps, {
119
   Object.assign(defaultProps, {
111
-    scalesPageToFit: false
120
+    scalesPageToFit: false,
112
   });
121
   });
113
 
122
 
114
 Platform.OS === 'ios' &&
123
 Platform.OS === 'ios' &&
115
   Object.assign(defaultProps, {
124
   Object.assign(defaultProps, {
116
-    viewportContent: 'width=device-width'
125
+    viewportContent: 'width=device-width',
117
   });
126
   });
118
 
127
 
119
 AutoHeightWebView.defaultProps = defaultProps;
128
 AutoHeightWebView.defaultProps = defaultProps;
120
 
129
 
121
 const styles = StyleSheet.create({
130
 const styles = StyleSheet.create({
122
   webView: {
131
   webView: {
123
-    backgroundColor: 'transparent'
124
-  }
132
+    backgroundColor: 'transparent',
133
+  },
125
 });
134
 });
126
 
135
 
127
 export default AutoHeightWebView;
136
 export default AutoHeightWebView;

+ 39
- 22
autoHeightWebView/utils.js View File

1
 'use strict';
1
 'use strict';
2
 
2
 
3
-import { Dimensions } from 'react-native';
3
+import {Dimensions} from 'react-native';
4
 
4
 
5
 const domMutationObserveScript = `
5
 const domMutationObserveScript = `
6
   var MutationObserver =
6
   var MutationObserver =
62
   }
62
   }
63
   `;
63
   `;
64
 
64
 
65
-const setViewportContent = content => {
65
+const setViewportContent = (content) => {
66
   if (!content) {
66
   if (!content) {
67
     return '';
67
     return '';
68
   }
68
   }
110
   });
110
   });
111
 `;
111
 `;
112
 
112
 
113
-const getBaseScript = ({ viewportContent, scalesPageToFit, scrollEnabledWithZoomedin }) =>
113
+const getBaseScript = ({
114
+  viewportContent,
115
+  scalesPageToFit,
116
+  scrollEnabledWithZoomedin,
117
+}) =>
114
   `
118
   `
115
   ;
119
   ;
116
   if (!document.getElementById("rnahw-wrapper")) {
120
   if (!document.getElementById("rnahw-wrapper")) {
130
   updateSize();
134
   updateSize();
131
   `;
135
   `;
132
 
136
 
133
-const appendFilesToHead = ({ files, script }) =>
137
+const appendFilesToHead = ({files, script}) =>
134
   files.reduceRight((combinedScript, file) => {
138
   files.reduceRight((combinedScript, file) => {
135
-    const { rel, type, href } = file;
139
+    const {rel, type, href} = file;
136
     return `
140
     return `
137
       var link  = document.createElement('link');
141
       var link  = document.createElement('link');
138
       link.rel  = '${rel}';
142
       link.rel  = '${rel}';
152
   }
156
   }
153
 `;
157
 `;
154
 
158
 
155
-const appendStylesToHead = ({ style, script }) => {
159
+const appendStylesToHead = ({style, script}) => {
156
   const currentStyles = style ? bodyStyle + style : bodyStyle;
160
   const currentStyles = style ? bodyStyle + style : bodyStyle;
157
   // Escape any single quotes or newlines in the CSS with .replace()
161
   // Escape any single quotes or newlines in the CSS with .replace()
158
   const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
162
   const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
164
   `;
168
   `;
165
 };
169
 };
166
 
170
 
167
-const getInjectedSource = ({ html, script }) => `
171
+const getInjectedSource = ({html, script}) => `
168
   ${html}
172
   ${html}
169
   <script>
173
   <script>
170
   // prevents code colissions with global scope
174
   // prevents code colissions with global scope
181
   style,
185
   style,
182
   viewportContent,
186
   viewportContent,
183
   scalesPageToFit,
187
   scalesPageToFit,
184
-  scrollEnabledWithZoomedin
188
+  scrollEnabledWithZoomedin,
185
 }) => {
189
 }) => {
186
-  let script = getBaseScript({ viewportContent, scalesPageToFit, scrollEnabledWithZoomedin });
187
-  script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
188
-  script = appendStylesToHead({ style: customStyle, script });
190
+  let script = getBaseScript({
191
+    viewportContent,
192
+    scalesPageToFit,
193
+    scrollEnabledWithZoomedin,
194
+  });
195
+  script =
196
+    files && files.length > 0 ? appendFilesToHead({files, script}) : script;
197
+  script = appendStylesToHead({style: customStyle, script});
189
   customScript && (script = customScript + script);
198
   customScript && (script = customScript + script);
190
   return script;
199
   return script;
191
 };
200
 };
192
 
201
 
193
-export const getWidth = style => {
202
+export const getWidth = (style) => {
194
   return style && style.width ? style.width : screenWidth;
203
   return style && style.width ? style.width : screenWidth;
195
 };
204
 };
196
 
205
 
197
-export const isSizeChanged = ({ height, previousHeight, width, previousWidth }) => {
206
+export const isSizeChanged = ({
207
+  height,
208
+  previousHeight,
209
+  width,
210
+  previousWidth,
211
+}) => {
198
   if (!height || !width) {
212
   if (!height || !width) {
199
     return;
213
     return;
200
   }
214
   }
201
   return height !== previousHeight || width !== previousWidth;
215
   return height !== previousHeight || width !== previousWidth;
202
 };
216
 };
203
 
217
 
204
-export const reduceData = props => {
205
-  const { source } = props;
218
+export const reduceData = (props) => {
219
+  const {source} = props;
206
   const script = getScript(props);
220
   const script = getScript(props);
207
-  const { html, baseUrl } = source;
221
+  const {html, baseUrl} = source;
208
   if (html) {
222
   if (html) {
209
     return {
223
     return {
210
-      currentSource: { baseUrl, html: getInjectedSource({ html, script }) }
224
+      currentSource: {baseUrl, html: getInjectedSource({html, script})},
211
     };
225
     };
212
   } else {
226
   } else {
213
     return {
227
     return {
214
       currentSource: source,
228
       currentSource: source,
215
-      script
229
+      script,
216
     };
230
     };
217
   }
231
   }
218
 };
232
 };
219
 
233
 
220
-export const shouldUpdate = ({ prevProps, nextProps }) => {
234
+export const shouldUpdate = ({prevProps, nextProps}) => {
221
   if (!(prevProps && nextProps)) {
235
   if (!(prevProps && nextProps)) {
222
     return true;
236
     return true;
223
   }
237
   }
224
   for (const prop in nextProps) {
238
   for (const prop in nextProps) {
225
     if (nextProps[prop] !== prevProps[prop]) {
239
     if (nextProps[prop] !== prevProps[prop]) {
226
-      if (typeof nextProps[prop] === 'object' && typeof prevProps[prop] === 'object') {
240
+      if (
241
+        typeof nextProps[prop] === 'object' &&
242
+        typeof prevProps[prop] === 'object'
243
+      ) {
227
         if (
244
         if (
228
           shouldUpdate({
245
           shouldUpdate({
229
             prevProps: prevProps[prop],
246
             prevProps: prevProps[prop],
230
-            nextProps: nextProps[prop]
247
+            nextProps: nextProps[prop],
231
           })
248
           })
232
         ) {
249
         ) {
233
           return true;
250
           return true;
238
     }
255
     }
239
   }
256
   }
240
   return false;
257
   return false;
241
-};
258
+};