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,4 +0,0 @@
1
-{
2
-  "printWidth": 120,
3
-  "singleQuote": true
4
-}

+ 6
- 0
.prettierrc.js View File

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

+ 36
- 27
autoHeightWebView/index.js View File

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

+ 39
- 22
autoHeightWebView/utils.js View File

@@ -1,6 +1,6 @@
1 1
 'use strict';
2 2
 
3
-import { Dimensions } from 'react-native';
3
+import {Dimensions} from 'react-native';
4 4
 
5 5
 const domMutationObserveScript = `
6 6
   var MutationObserver =
@@ -62,7 +62,7 @@ const updateSizeWithMessage = (element, scalesPageToFit) =>
62 62
   }
63 63
   `;
64 64
 
65
-const setViewportContent = content => {
65
+const setViewportContent = (content) => {
66 66
   if (!content) {
67 67
     return '';
68 68
   }
@@ -110,7 +110,11 @@ const detectZoomChanged = `
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 120
   if (!document.getElementById("rnahw-wrapper")) {
@@ -130,9 +134,9 @@ const getBaseScript = ({ viewportContent, scalesPageToFit, scrollEnabledWithZoom
130 134
   updateSize();
131 135
   `;
132 136
 
133
-const appendFilesToHead = ({ files, script }) =>
137
+const appendFilesToHead = ({files, script}) =>
134 138
   files.reduceRight((combinedScript, file) => {
135
-    const { rel, type, href } = file;
139
+    const {rel, type, href} = file;
136 140
     return `
137 141
       var link  = document.createElement('link');
138 142
       link.rel  = '${rel}';
@@ -152,7 +156,7 @@ const bodyStyle = `
152 156
   }
153 157
 `;
154 158
 
155
-const appendStylesToHead = ({ style, script }) => {
159
+const appendStylesToHead = ({style, script}) => {
156 160
   const currentStyles = style ? bodyStyle + style : bodyStyle;
157 161
   // Escape any single quotes or newlines in the CSS with .replace()
158 162
   const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
@@ -164,7 +168,7 @@ const appendStylesToHead = ({ style, script }) => {
164 168
   `;
165 169
 };
166 170
 
167
-const getInjectedSource = ({ html, script }) => `
171
+const getInjectedSource = ({html, script}) => `
168 172
   ${html}
169 173
   <script>
170 174
   // prevents code colissions with global scope
@@ -181,53 +185,66 @@ const getScript = ({
181 185
   style,
182 186
   viewportContent,
183 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 198
   customScript && (script = customScript + script);
190 199
   return script;
191 200
 };
192 201
 
193
-export const getWidth = style => {
202
+export const getWidth = (style) => {
194 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 212
   if (!height || !width) {
199 213
     return;
200 214
   }
201 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 220
   const script = getScript(props);
207
-  const { html, baseUrl } = source;
221
+  const {html, baseUrl} = source;
208 222
   if (html) {
209 223
     return {
210
-      currentSource: { baseUrl, html: getInjectedSource({ html, script }) }
224
+      currentSource: {baseUrl, html: getInjectedSource({html, script})},
211 225
     };
212 226
   } else {
213 227
     return {
214 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 235
   if (!(prevProps && nextProps)) {
222 236
     return true;
223 237
   }
224 238
   for (const prop in nextProps) {
225 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 244
         if (
228 245
           shouldUpdate({
229 246
             prevProps: prevProps[prop],
230
-            nextProps: nextProps[prop]
247
+            nextProps: nextProps[prop],
231 248
           })
232 249
         ) {
233 250
           return true;
@@ -238,4 +255,4 @@ export const shouldUpdate = ({ prevProps, nextProps }) => {
238 255
     }
239 256
   }
240 257
   return false;
241
-};
258
+};