add common; clean code style for index.ios

autoHeightWebView/common.js

@@ -0,0 +1,57 @@
+'use strict';
+
+function appendFilesToHead(files, script) {
+  if (!files) {
+    return script;
+  }
+  return files.reduceRight((file, combinedScript) => {
+    const { rel, type, href } = file;
+    return `
+            var link  = document.createElement('link');
+            link.rel  = '${rel}';
+            link.type = '${type}';
+            link.href = '${href}';
+            document.head.appendChild(link);
+            ${combinedScript}
+          `;
+  }, script);
+}
+
+function appendStylesToHead(styles, script) {
+  if (!styles) {
+    return script;
+  }
+  // Escape any single quotes or newlines in the CSS with .replace()
+  const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
+  return `
+          var styleElement = document.createElement('style');
+          var styleText = document.createTextNode('${escaped}');
+          styleElement.appendChild(styleText);
+          document.head.appendChild(styleElement);
+          ${script}
+        `;
+}
+
+function getScript(props, baseScript, iframeBaseScript) {
+  const { hasIframe, files, customStyle } = props;
+  let script = hasIframe ? iframeBaseScript : baseScript;
+  script = files ? appendFilesToHead(files, baseScript) : baseScript;
+  script = customStyle ? appendStylesToHead(customStyle, script) : script;
+  return script;
+}
+
+function onHeightUpdated(height, props) {
+  props.onHeightUpdated && props.onHeightUpdated(height);
+}
+
+const DomMutationObserveScript = 
+`
+var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+var observer = new MutationObserver(updateHeight);
+observer.observe(document, {
+    subtree: true,
+    attributes: true
+});
+`
+
+export { getScript, onHeightUpdated, DomMutationObserveScript };

autoHeightWebView/index.ios.js

@@ -1,180 +1,143 @@
-'use strict'
+'use strict';
 
 import React, { PureComponent } from 'react';
 
-import {
-    Animated,
-    Dimensions,
-    StyleSheet,
-    View,
-    ViewPropTypes,
-    WebView
-} from 'react-native';
+import { Animated, Dimensions, StyleSheet, View, ViewPropTypes, WebView } from 'react-native';
 
 import PropTypes from 'prop-types';
 
-export default class AutoHeightWebView extends PureComponent {
-    static propTypes = {
-        hasIframe: PropTypes.bool,
-        source: WebView.propTypes.source,
-        onHeightUpdated: PropTypes.func,
-        customScript: PropTypes.string,
-        customStyle: PropTypes.string,
-        enableAnimation: PropTypes.bool,
-        // if set to true may cause some layout issues (smaller font size)
-        scalesPageToFit: PropTypes.bool,
-        // only works on enable animation
-        animationDuration: PropTypes.number,
-        // offset of rn webview margin
-        heightOffset: PropTypes.number,
-        style: ViewPropTypes.style,
-        //  rn WebView callback
-        onError: PropTypes.func,
-        onLoad: PropTypes.func,
-        onLoadStart: PropTypes.func,
-        onLoadEnd: PropTypes.func,
-        onShouldStartLoadWithRequest: PropTypes.func,
-        // add web/files... to project root
-        files: PropTypes.arrayOf(PropTypes.shape({
-            href: PropTypes.string,
-            type: PropTypes.string,
-            rel: PropTypes.string
-        }))
-    }
-
-    static defaultProps = {
-        scalesPageToFit: false,
-        enableAnimation: true,
-        animationDuration: 555,
-        heightOffset: 12
-    }
-
-    constructor(props) {
-        super(props);
-        this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
-        if (this.props.enableAnimation) {
-            this.opacityAnimatedValue = new Animated.Value(0);
-        }
-        let initialScript = props.hasIframe ? IframeBaseScript : BaseScript;
-        initialScript = props.files
-          ? this.appendFilesToHead(props.files, BaseScript)
-          : BaseScript;
-        initialScript = props.customStyle
-          ? this.appendStylesToHead(props.customStyle, initialScript)
-          : initialScript;
-        this.state = {
-            height: 0,
-            script: initialScript
-        };
-    }
-
-    componentWillReceiveProps(nextProps) {
-        let currentScript = nextProps.hasIframe ? IframeBaseScript : BaseScript;
-        if (nextProps.files) {
-            currentScript = this.appendFilesToHead(nextProps.files, currentScript);
-        }
-        currentScript = nextProps.customStyle
-          ? this.appendStylesToHead(nextProps.customStyle, currentScript)
-          : currentScript;
-        this.setState({ script: currentScript });
-    }
-
-    appendFilesToHead(files, script) {
-        if (!files) {
-            return script;
-        }
-        return files.reduceRight((file, combinedScript) => `
-          var link  = document.createElement('link');
-          link.rel  = '${file.rel}';
-          link.type = '${file.type}';
-          link.href = '${file.href}';
-          document.head.appendChild(link);
-          ${combinedScript}
-        `, script);
-    }
+import { getScript, onHeightUpdated, DomMutationObserveScript } from './common.js';
 
-    appendStylesToHead(styles, script) {
-      if (!styles) {
-        return script;
+export default class AutoHeightWebView extends PureComponent {
+  static propTypes = {
+    hasIframe: PropTypes.bool,
+    source: WebView.propTypes.source,
+    onHeightUpdated: PropTypes.func,
+    customScript: PropTypes.string,
+    customStyle: PropTypes.string,
+    enableAnimation: PropTypes.bool,
+    // if set to true may cause some layout issues (smaller font size)
+    scalesPageToFit: PropTypes.bool,
+    // only works on enable animation
+    animationDuration: PropTypes.number,
+    // offset of rn webview margin
+    heightOffset: PropTypes.number,
+    style: ViewPropTypes.style,
+    //  rn WebView callback
+    onError: PropTypes.func,
+    onLoad: PropTypes.func,
+    onLoadStart: PropTypes.func,
+    onLoadEnd: PropTypes.func,
+    onShouldStartLoadWithRequest: PropTypes.func,
+    // add web/files... to project root
+    files: PropTypes.arrayOf(
+      PropTypes.shape({
+        href: PropTypes.string,
+        type: PropTypes.string,
+        rel: PropTypes.string
+      })
+    )
+  };
+
+  static defaultProps = {
+    scalesPageToFit: false,
+    enableAnimation: true,
+    animationDuration: 555,
+    heightOffset: 12
+  };
+
+  constructor(props) {
+    super(props);
+    props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
+    this.state = {
+      height: 0,
+      script: getScript(props, BaseScript, IframeBaseScript)
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ script: getScript(nextProps, BaseScript, IframeBaseScript) });
+  }
+
+  handleNavigationStateChange = navState => {
+    const height = Number(navState.title);
+    const { enableAnimation, animationDuration } = this.props;
+    if (height && height !== this.state.height) {
+      if (enableAnimation) {
+        this.opacityAnimatedValue.setValue(0);
       }
-      // Escape any single quotes or newlines in the CSS with .replace()
-      const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n')
-      return `
-        var styleElement = document.createElement('style');
-        var styleText = document.createTextNode('${escaped}');
-        styleElement.appendChild(styleText);
-        document.head.appendChild(styleElement);
-        ${script}
-      `;
-    }
-
-    onHeightUpdated(height) {
-        if (this.props.onHeightUpdated) {
-            this.props.onHeightUpdated(height);
-        }
-    }
-
-    handleNavigationStateChange(navState) {
-        const height = Number(navState.title);
-        if (height && height !== this.state.height) {
-            if (this.props.enableAnimation) {
-                this.opacityAnimatedValue.setValue(0);
-            }
-            this.setState({ height }, () => {
-                if (this.props.enableAnimation) {
-                    Animated.timing(this.opacityAnimatedValue, {
-                        toValue: 1,
-                        duration: this.props.animationDuration
-                    }).start(() => this.onHeightUpdated(height));
-                }
-                else {
-                    this.onHeightUpdated(height);
-                }
-            });
+      this.setState({ height }, () => {
+        if (enableAnimation) {
+          Animated.timing(this.opacityAnimatedValue, {
+            toValue: 1,
+            duration: animationDuration
+          }).start(() => this.onHeightUpdated(height, this.props));
+        } else {
+          this.onHeightUpdated(height, this.props);
         }
+      });
     }
-
-    render() {
-        const { height, script } = this.state;
-        const { onError, onLoad, onLoadStart, onLoadEnd, onShouldStartLoadWithRequest, scalesPageToFit, enableAnimation, source, heightOffset, customScript, style } = this.props;
-        const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
-        return (
-            <Animated.View style={[Styles.container, {
-                opacity: enableAnimation ? this.opacityAnimatedValue : 1,
-                height: height + heightOffset,
-            }, style]}>
-                <WebView
-                    onError={onError}
-                    onLoad={onLoad}
-                    onLoadStart={onLoadStart}
-                    onLoadEnd={onLoadEnd}
-                    onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-                    style={Styles.webView}
-                    injectedJavaScript={script + customScript}
-                    scrollEnabled={false}
-                    scalesPageToFit={scalesPageToFit}
-                    source={webViewSource}
-                    onNavigationStateChange={this.handleNavigationStateChange} />
-            </Animated.View>
-        );
-    }
+  };
+
+  render() {
+    const { height, script } = this.state;
+    const {
+      onError,
+      onLoad,
+      onLoadStart,
+      onLoadEnd,
+      onShouldStartLoadWithRequest,
+      scalesPageToFit,
+      enableAnimation,
+      source,
+      heightOffset,
+      customScript,
+      style
+    } = this.props;
+    const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
+    return (
+      <Animated.View
+        style={[
+          Styles.container,
+          {
+            opacity: enableAnimation ? this.opacityAnimatedValue : 1,
+            height: height + heightOffset
+          },
+          style
+        ]}
+      >
+        <WebView
+          onError={onError}
+          onLoad={onLoad}
+          onLoadStart={onLoadStart}
+          onLoadEnd={onLoadEnd}
+          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+          style={Styles.webView}
+          injectedJavaScript={script + customScript}
+          scrollEnabled={false}
+          scalesPageToFit={scalesPageToFit}
+          source={webViewSource}
+          onNavigationStateChange={this.handleNavigationStateChange}
+        />
+      </Animated.View>
+    );
+  }
 }
 
 const ScreenWidth = Dimensions.get('window').width;
 
 const Styles = StyleSheet.create({
-    container: {
-        width: ScreenWidth,
-        backgroundColor: 'transparent'
-    },
-    webView: {
-        flex: 1,
-        backgroundColor: 'transparent'
-    }
+  container: {
+    width: ScreenWidth,
+    backgroundColor: 'transparent'
+  },
+  webView: {
+    flex: 1,
+    backgroundColor: 'transparent'
+  }
 });
 
-const BaseScript =
-    `
+const BaseScript = `
     ;
     (function () {
         var i = 0;
@@ -192,20 +155,11 @@ const BaseScript =
                 window.location.hash = ++i;
             }
         }
-        updateHeight();
-        window.addEventListener('load', updateHeight);
-        window.addEventListener('resize', updateHeight);
-        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-        var observer = new MutationObserver(updateHeight);
-        observer.observe(document, {
-            subtree: true,
-            attributes: true
-        });
+        ${DomMutationObserveScript}
     } ());
     `;
 
-const IframeBaseScript =
-    `
+const IframeBaseScript = `
     ;
     (function () {
         var i = 0;
@@ -220,11 +174,6 @@ const IframeBaseScript =
         updateHeight();
         window.addEventListener('load', updateHeight);
         window.addEventListener('resize', updateHeight);
-        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-        var observer = new MutationObserver(updateHeight);
-        observer.observe(document, {
-            subtree: true,
-            attributes: true
-        });
+        ${DomMutationObserveScript}
     } ());
     `;