rewrite with Hooks

autoHeightWebView/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React, { PureComponent } from 'react';
+import React, { useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
 
 import { StyleSheet, Platform, ViewPropTypes } from 'react-native';
 
@@ -8,68 +8,21 @@ import PropTypes from 'prop-types';
 
 import { WebView } from 'react-native-webview';
 
-import {
-  isEqual,
-  setState,
-  getWidth,
-  isSizeChanged,
-  handleSizeUpdated,
-  getStateFromProps,
-  getBaseScript
-} from './utils';
-
-import momoize from './momoize';
-
-export default class AutoHeightWebView extends PureComponent {
-  static propTypes = {
-    onSizeUpdated: PropTypes.func,
-    // 'web/' by default on iOS
-    // 'file:///android_asset/web/' by default on Android
-    baseUrl: PropTypes.string,
-    // add baseUrl/files... to android/app/src/assets/ on android
-    // add baseUrl/files... to project root on iOS
-    files: PropTypes.arrayOf(
-      PropTypes.shape({
-        href: PropTypes.string,
-        type: PropTypes.string,
-        rel: PropTypes.string
-      })
-    ),
-    style: ViewPropTypes.style,
-    customScript: PropTypes.string,
-    customStyle: PropTypes.string,
-    // webview props
-    originWhitelist: PropTypes.arrayOf(PropTypes.string),
-    onMessage: PropTypes.func
-  };
-
-  static defaultProps = {
-    baseUrl: Platform.OS === 'ios' ? 'web/' : 'file:///android_asset/web/'
-  };
-
-  constructor(props) {
-    super(props);
-    const { style } = props;
-    this.webView = React.createRef();
-    const width = getWidth(style);
-    const height = style && style.height ? style.height : 1;
-    this.size = {
-      oldWidth: width,
-      oldHeight: height
-    };
-    this.state = {
-      width,
-      height
-    };
-  }
+import { getMemoInputProps, getMemoResult, getWidth, isSizeChanged } from './utils';
 
-  getUpdatedState = momoize(setState, isEqual);
+const AutoHeightWebView = forwardRef((props, ref) => {
+  let webView = useRef();
+  useImperativeHandle(ref, () => ({
+    stopLoading: () => webView.current.stopLoading()
+  }));
 
-  static getDerivedStateFromProps(props, state) {
-    return getStateFromProps(props, state);
-  }
+  const { style, onMessage, onSizeUpdated } = props;
 
-  onMessage = event => {
+  const [size, setSize] = useState(() => ({
+    height: style && style.height ? style.height : 1,
+    width: getWidth(style)
+  }));
+  const hanldeMessage = event => {
     if (!event.nativeEvent) {
       return;
     }
@@ -82,55 +35,86 @@ export default class AutoHeightWebView extends PureComponent {
       return;
     }
     const { height, width } = data;
-    const { oldHeight, oldWidth } = this.size;
-    if (isSizeChanged(height, oldHeight, width, oldWidth)) {
-      this.size = {
-        oldHeight: height,
-        oldWidth: width
-      };
-      this.setState(
-        {
-          height,
-          width
-        },
-        () => handleSizeUpdated(height, width, this.props.onSizeUpdated)
-      );
-    }
-    const { onMessage } = this.props;
+    const { height: previousHeight, width: previousWidth } = size;
+    isSizeChanged({ height, previousHeight, width, previousWidth }) &&
+      setSize({
+        height,
+        width
+      });
     onMessage && onMessage(event);
   };
 
-  stopLoading() {
-    this.webView.current.stopLoading();
-  }
+  const { source, script } = useMemo(() => getMemoResult(props), [getMemoInputProps(props)]);
 
-  render() {
-    const { height, width } = this.state;
-    const { style, originWhitelist } = this.props;
-    const { source, script } = this.getUpdatedState(this.props, getBaseScript);
-    return (
-      <WebView
-        {...this.props}
-        originWhitelist={originWhitelist || ['*']}
-        ref={this.webView}
-        onMessage={this.onMessage}
-        style={[
-          styles.webView,
-          {
-            width,
-            height
-          },
-          style
-        ]}
-        injectedJavaScript={script}
-        source={source}
-      />
-    );
-  }
-}
+  const { width, height } = size;
+  useEffect(
+    () =>
+      onSizeUpdated &&
+      onSizeUpdated({
+        height,
+        width
+      }),
+    [width, height]
+  );
+  return (
+    <WebView
+      {...props}
+      ref={webView}
+      onMessage={hanldeMessage}
+      style={[
+        styles.webView,
+        {
+          width,
+          height
+        },
+        style
+      ]}
+      injectedJavaScript={script}
+      source={source}
+    />
+  );
+});
+
+AutoHeightWebView.propTypes = {
+  onSizeUpdated: PropTypes.func,
+  // 'web/' by default on iOS
+  // 'file:///android_asset/web/' by default on Android
+  baseUrl: PropTypes.string,
+  // add baseUrl/files... to android/app/src/assets/ on android
+  // add baseUrl/files... to project root on iOS
+  files: PropTypes.arrayOf(
+    PropTypes.shape({
+      href: PropTypes.string,
+      type: PropTypes.string,
+      rel: PropTypes.string
+    })
+  ),
+  style: ViewPropTypes.style,
+  customScript: PropTypes.string,
+  customStyle: PropTypes.string,
+  // webview props
+  originWhitelist: PropTypes.arrayOf(PropTypes.string),
+  onMessage: PropTypes.func
+};
+
+let defaultProps = {
+  originWhitelist: ['*'],
+  baseUrl: 'web/'
+};
+
+Platform.OS === 'android' &&
+  Object.assign(defaultProps, {
+    baseUrl: 'file:///android_asset/web/',
+    // if set to true may cause some layout issues (width of container will be than width of screen) on android
+    scalesPageToFit: false
+  });
+
+AutoHeightWebView.defaultProps = defaultProps;
 
 const styles = StyleSheet.create({
   webView: {
     backgroundColor: 'transparent'
   }
 });
+
+export default AutoHeightWebView;

autoHeightWebView/momoize.js

@@ -1,22 +0,0 @@
-'use strict';
-
-function defaultIsNewArgEqualToLast(newArgs, lastArgs) {
-    return newArgs.length === lastArgs.length && newArgs.every((arg, index) => arg === lastArgs[index]);
-}
-
-export default function memoize(resultCallback, isNewArgEqualToLast) {
-  let lastArgs = [];
-  let lastResult;
-  let calledOnce = false;
-  const isEqual = isNewArgEqualToLast || defaultIsNewArgEqualToLast;
-  const result = function(...newArgs) {
-    if (calledOnce && isEqual(newArgs, lastArgs)) {
-      return lastResult;
-    }
-    calledOnce = true;
-    lastArgs = newArgs;
-    lastResult = resultCallback.apply(this, newArgs);
-    return lastResult;
-  };
-  return result;
-}

autoHeightWebView/utils.js

@@ -2,119 +2,7 @@
 
 import { Dimensions, Platform } from 'react-native';
 
-import Immutable from 'immutable';
-
-function appendFilesToHead(files, script) {
-  return files.reduceRight((combinedScript, file) => {
-    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);
-}
-
-const screenWidth = Dimensions.get('window').width;
-
-const bodyStyle = `
-body {
-  margin: 0;
-  padding: 0;
-}
-`;
-
-function appendStylesToHead(styles, script) {
-  const currentStyles = styles ? bodyStyle + styles : bodyStyle;
-  // Escape any single quotes or newlines in the CSS with .replace()
-  const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
-  return `
-          var styleElement = document.createElement('style');
-          styleElement.innerHTML = '${escaped}';
-          document.head.appendChild(styleElement);
-          ${script}
-        `;
-}
-
-function getReloadRelatedData(props) {
-  const { files, customStyle, customScript, style, source } = props;
-  return {
-    source,
-    files,
-    customStyle,
-    customScript,
-    style
-  };
-}
-
-function isChanged(newValue, oldValue) {
-  return !Immutable.is(Immutable.fromJS(newValue), Immutable.fromJS(oldValue));
-}
-
-function getInjectedSource(html, script) {
-  return `
-    ${html}
-    <script>
-    ${script}
-    </script>
-    `;
-}
-
-function getScript(props, getScript) {
-  const { files, customStyle, customScript, style } = getReloadRelatedData(props);
-  let script = getScript(style);
-  script = files && files.length > 0 ? appendFilesToHead(files, script) : script;
-  script = appendStylesToHead(customStyle, script);
-  customScript && (script = customScript + script);
-  return script;
-}
-
-export function getWidth(style) {
-  return style && style.width ? style.width : screenWidth;
-}
-
-export function isEqual(newProps, oldProps) {
-  return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
-}
-
-export function setState(props, getBaseScript) {
-  const { source, baseUrl } = props;
-  const script = getScript(props, getBaseScript);
-  let state = {};
-  if (source.html) {
-    let currentSource = { html: getInjectedSource(source.html, script) };
-    baseUrl && Object.assign(currentSource, { baseUrl });
-    Object.assign(state, { source: currentSource });
-  } else {
-    let currentSource = Object.assign({}, source);
-    baseUrl && Object.assign(currentSource, { baseUrl });
-    Object.assign(state, {
-      source: currentSource,
-      script
-    });
-  }
-  return state;
-}
-
-export function handleSizeUpdated(height, width, onSizeUpdated) {
-  onSizeUpdated &&
-    onSizeUpdated({
-      height,
-      width
-    });
-}
-
-export function isSizeChanged(height, oldHeight, width, oldWidth) {
-  if (!height || !width) {
-    return;
-  }
-  return height !== oldHeight || width !== oldWidth;
-}
-
-export const domMutationObserveScript = `
+const domMutationObserveScript = `
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 var observer = new MutationObserver(updateSize);
 observer.observe(document, {
@@ -123,8 +11,8 @@ observer.observe(document, {
 });
 `;
 
-export function updateSizeWithMessage(element) {
-  return `
+const updateSizeWithMessage = element =>
+  `
   var updateSizeInterval = null;
   var height = 0;
   function updateSize(event) {
@@ -138,21 +26,6 @@ export function updateSizeWithMessage(element) {
     window.ReactNativeWebView.postMessage(JSON.stringify({ width: width, height: height, event: event }));
   }
   `;
-}
-
-export function getStateFromProps(props, state) {
-  const { height: oldHeight, width: oldWidth } = state;
-  const height = props.style ? props.style.height : null;
-  const width = props.style ? props.style.width : null;
-  if (isSizeChanged(height, oldHeight, width, oldWidth)) {
-    return {
-      height: height || oldHeight,
-      width: width || oldWidth,
-      isSizeChanged: true
-    };
-  }
-  return null;
-}
 
 // add viewport setting to meta for WKWebView
 const makeScalePageToFit = `
@@ -161,8 +34,8 @@ meta.setAttribute('name', 'viewport');
 meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
 `;
 
-export function getBaseScript(style) {
-  return `
+const getBaseScript = style =>
+  `
   ;
   if (!document.getElementById("rnahw-wrapper")) {
     var wrapper = document.createElement('div');
@@ -180,4 +53,86 @@ export function getBaseScript(style) {
   ${Platform.OS === 'ios' ? makeScalePageToFit : ''}
   updateSize();
   `;
+
+const appendFilesToHead = ({ files, script }) =>
+  files.reduceRight((combinedScript, file) => {
+    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);
+
+const screenWidth = Dimensions.get('window').width;
+
+const bodyStyle = `
+body {
+  margin: 0;
+  padding: 0;
 }
+`;
+
+const appendStylesToHead = ({ style, script }) => {
+  const currentStyles = style ? bodyStyle + style : bodyStyle;
+  // Escape any single quotes or newlines in the CSS with .replace()
+  const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
+  return `
+          var styleElement = document.createElement('style');
+          styleElement.innerHTML = '${escaped}';
+          document.head.appendChild(styleElement);
+          ${script}
+        `;
+};
+
+const getInjectedSource = ({ html, script }) => `
+${html}
+<script>
+${script}
+</script>
+`;
+
+const getScript = props => {
+  const { files, customStyle, customScript, style } = props;
+  let script = getBaseScript(style);
+  script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
+  script = appendStylesToHead({ style: customStyle, script });
+  customScript && (script = customScript + script);
+  return script;
+};
+
+export const getWidth = style => {
+  return style && style.width ? style.width : screenWidth;
+};
+
+export const isSizeChanged = ({ height, previousHeight, width, previousWidth }) => {
+  if (!height || !width) {
+    return;
+  }
+  return height !== previousHeight || width !== previousWidth;
+}
+
+export const getMemoInputProps = props => {
+  const { files, customStyle, customScript, style, source, baseUrl } = props;
+  return [files, customStyle, customScript, style, source, baseUrl];
+};
+
+export const getMemoResult = props => {
+  const { source, baseUrl } = props;
+  const script = getScript(props);
+  if (source.html) {
+    let currentSource = { html: getInjectedSource({ html: source.html, script }) };
+    baseUrl && Object.assign(currentSource, { baseUrl });
+    return { source: currentSource };
+  } else {
+    let currentSource = Object.assign({}, source);
+    baseUrl && Object.assign(currentSource, { baseUrl });
+    return {
+      source: currentSource,
+      script
+    };
+  }
+};