add memoize; apply memoize for common & index.ios; add onMessage to index.ios

autoHeightWebView/common.js

@@ -47,8 +47,9 @@ function appendStylesToHead(styles, script) {
 }
 
 function getReloadRelatedData(props) {
-  const { hasIframe, files, customStyle, customScript, style } = props;
+  const { hasIframe, files, customStyle, customScript, style, source } = props;
   return {
+    source,
     hasIframe,
     files,
     customStyle,
@@ -71,23 +72,55 @@ function getScript(props, getBaseScript, getIframeBaseScript) {
   return script;
 }
 
-function getSize(nextStyle, prevStyle) {
-  if (!nextStyle) {
-    return null;
-  }
-  if (isChanged(nextStyle, prevStyle)) {
-    let size = null;
-    const { height, width } = nextStyle;
-    height && Object.assign(size, { height });
-    width && Object.assign(size, { width });
-    return size;
+function isEqual(newProps, oldProps) {
+  return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
+}
+
+function insertStringAfterAnotherString(raw, searchValue, insertValue) {
+  const position = raw.indexOf(searchValue) + searchValue.length;
+  return [raw.slice(0, position), insertValue, raw.slice(position)].join('');
+}
+
+function getInjectedSource(html, script) {
+  const scriptString = `
+  <script>
+  ${script}
+  </script>
+  `;
+  if (html.startsWith('<html')) {
+    return insertStringAfterAnotherString(html, '>', scriptString);
   } else {
-    return null;
+    return `
+    ${html}
+    ${scriptString}
+    `;
   }
 }
 
-function isScriptChanged(nextProps, props) {
-  return nextProps && props && isChanged(getReloadRelatedData(nextProps), getReloadRelatedData(props));
+function setState(props, getBaseScript, getIframeBaseScript) {
+  const { source, style } = props;
+  const script = getScript(props, getBaseScript, getIframeBaseScript);
+  let state = {
+    height: style && style.height ? style.height : 0,
+    width: getWidth(style)
+  };
+  if (source.html) {
+    Object.assign(state, {
+      source: Object.assign(
+        {},
+        {
+          html: getInjectedSource(source.html, script),
+          baseUrl: 'web/'
+        }
+      )
+    });
+  } else {
+    Object.assign(state, {
+      source: Object.assign({}, source, { baseUrl: 'web/' }),
+      script
+    });
+  }
+  return state;
 }
 
 function handleSizeUpdated(height, width, onSizeUpdated) {
@@ -98,6 +131,19 @@ function handleSizeUpdated(height, width, onSizeUpdated) {
     });
 }
 
+function getSize(newHeight, newWidth, height, width, updatingSize, calledOnce) {
+  if (!calledOnce || updatingSize) {
+    return {
+      h: height,
+      w: width
+    };
+  }
+  return {
+    h: height,
+    w: width
+  };
+}
+
 const domMutationObserveScript = `
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 var observer = new MutationObserver(updateSize);
@@ -107,4 +153,4 @@ observer.observe(document, {
 });
 `;
 
-export { getSize, isScriptChanged, getWidth, getScript, handleSizeUpdated, domMutationObserveScript };
+export { isEqual, setState, getWidth, handleSizeUpdated, domMutationObserveScript, getSize };

autoHeightWebView/index.ios.js

@@ -6,11 +6,14 @@ import { Animated, StyleSheet, ViewPropTypes, WebView } from 'react-native';
 
 import PropTypes from 'prop-types';
 
-import { isScriptChanged, getSize, getWidth, getScript, handleSizeUpdated, domMutationObserveScript } from './common.js';
+import { getSize, isEqual, setState, getWidth, handleSizeUpdated, domMutationObserveScript } from './common.js';
+
+import momoize from './momoize';
 
 export default class AutoHeightWebView extends PureComponent {
   static propTypes = {
     hasIframe: PropTypes.bool,
+    onMessage: PropTypes.func,
     source: WebView.propTypes.source,
     customScript: PropTypes.string,
     customStyle: PropTypes.string,
@@ -52,20 +55,14 @@ export default class AutoHeightWebView extends PureComponent {
     super(props);
     const { enableAnimation, style } = props;
     enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
+    this.webView = React.createRef();
     this.state = {
-      isScriptChanged: false,
       width: getWidth(style),
-      height: style && style.height ? style.height : 0,
-      script: getScript(props, getBaseScript, getIframeBaseScript)
+      height: style && style.height ? style.height : 0
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    const size = getSize(nextProps, this.props);
-    size && this.setState(size); 
-    this.isScriptChanged = isScriptChanged(nextProps, this.props);
-    this.isScriptChanged && this.setState({ script: getScript(nextProps, getBaseScript, getIframeBaseScript) });
-  }
+  getUpdatedState = momoize(setState, isEqual);
 
   handleNavigationStateChange = navState => {
     const { title } = navState;
@@ -77,35 +74,40 @@ export default class AutoHeightWebView extends PureComponent {
     const height = Number(heightValue);
     const { height: oldHeight, width: oldWidth } = this.state;
     if ((height && height !== oldHeight) || (width && width !== oldWidth)) {
-      // if ((height && height !== oldHeight)) {
       const { enableAnimation, animationDuration, onSizeUpdated } = this.props;
       enableAnimation && this.opacityAnimatedValue.setValue(0);
+      this.updatingSize = true;
       this.setState(
         {
           height,
           width
         },
         () => {
-          enableAnimation
-            ? Animated.timing(this.opacityAnimatedValue, {
-                toValue: 1,
-                duration: animationDuration
-              }).start(() => handleSizeUpdated(height, width, onSizeUpdated))
-            : handleSizeUpdated(height, width, onSizeUpdated);
+          if (enableAnimation) {
+            Animated.timing(this.opacityAnimatedValue, {
+              toValue: 1,
+              duration: animationDuration
+            }).start(() => {
+              handleSizeUpdated(height, width, onSizeUpdated);
+              this.updatingSize = false;
+            });
+          } else {
+            handleSizeUpdated(height, width, onSizeUpdated);
+            this.updatingSize = false;
+          }
         }
       );
     }
   };
 
-  getWebView = webView => (this.webView = webView);
-
   stopLoading() {
     this.webView.stopLoading();
   }
 
   render() {
-    const { height, width, script } = this.state;
+    const { height, width } = this.state;
     const {
+      onMessage,
       onError,
       onLoad,
       onLoadStart,
@@ -113,41 +115,43 @@ export default class AutoHeightWebView extends PureComponent {
       onShouldStartLoadWithRequest,
       scalesPageToFit,
       enableAnimation,
-      source,
       heightOffset,
       style,
       scrollEnabled
     } = this.props;
-    let webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
-    if (this.isScriptChanged) {
-      this.changeSourceFlag = !this.changeSourceFlag;
-      webViewSource = Object.assign(webViewSource, { changeSourceFlag: this.changeSourceFlag });
-    }
+    const { height: newHeight, width: newWidth, source, script } = this.getUpdatedState(
+      this.props,
+      getBaseScript,
+      getIframeBaseScript
+    );
+    const { w, h } = getSize(newHeight, newWidth, height, width, this.updatingSize, this.calledOnce);
+    this.calledOnce = true;
     return (
       <Animated.View
         style={[
           styles.container,
           {
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
-            width,
-            height: height + heightOffset
+            width: w,
+            height: h + heightOffset
           },
           style
         ]}
       >
         <WebView
           originWhitelist={['*']}
-          ref={this.getWebView}
+          ref={this.webView}
+          onMessage={onMessage}
           onError={onError}
           onLoad={onLoad}
           onLoadStart={onLoadStart}
           onLoadEnd={onLoadEnd}
           onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
           style={styles.webView}
-          injectedJavaScript={script}
           scrollEnabled={!!scrollEnabled}
           scalesPageToFit={scalesPageToFit}
-          source={webViewSource}
+          injectedJavaScript={script}
+          source={source}
           onNavigationStateChange={this.handleNavigationStateChange}
         />
       </Animated.View>

autoHeightWebView/momoize.js

@@ -0,0 +1,22 @@
+'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;
+}