Merge pull request #56 from ShaMan123/master

Adding AutoWidth capability

autoHeightWebView/common.js

@@ -5,7 +5,7 @@ function appendFilesToHead(files, script) {
     return script;
   }
   return files.reduceRight((file, combinedScript) => {
-    const { rel, type, href } = file;
+      const { rel, type, href } = file;
     return `
             var link  = document.createElement('link');
             link.rel  = '${rel}';
@@ -17,12 +17,29 @@ function appendFilesToHead(files, script) {
   }, script);
 }
 
-function appendStylesToHead(styles, script) {
-  if (!styles) {
-    return script;
-  }
+function appendStylesToHead(styles, script, shouldResizeWidth) {
+    var bodyStyle;
+    if (shouldResizeWidth) {
+        bodyStyle = `
+            body {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }`;
+    }
+    else {
+        bodyStyle = '';
+    }
+    
+    if (!styles) {
+        styles = bodyStyle;
+    }
+    else {
+        styles += bodyStyle;
+    }
   // Escape any single quotes or newlines in the CSS with .replace()
-  const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
+    const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
+    
   return `
           var styleElement = document.createElement('style');
           var styleText = document.createTextNode('${escaped}');
@@ -33,10 +50,10 @@ function appendStylesToHead(styles, script) {
 }
 
 function getScript(props, baseScript, iframeBaseScript) {
-  const { hasIframe, files, customStyle } = props;
+    const { hasIframe, files, customStyle, shouldResizeWidth } = props;
   let script = hasIframe ? iframeBaseScript : baseScript;
   script = files ? appendFilesToHead(files, baseScript) : baseScript;
-  script = customStyle ? appendStylesToHead(customStyle, script) : script;
+    script = appendStylesToHead(customStyle, script, shouldResizeWidth);
   return script;
 }
 
@@ -44,6 +61,16 @@ function onHeightUpdated(height, props) {
   props.onHeightUpdated && props.onHeightUpdated(height);
 }
 
+function onWidthUpdated(width, props) {
+    props.onWidthUpdated && props.onWidthUpdated(width);
+}
+
+function onHeightWidthUpdated(height, width, props) {
+    onHeightUpdated(height, props);
+    onWidthUpdated(width, props);
+    props.onHeightWidthUpdated && props.onHeightWidthUpdated(height, width);
+}
+
 const domMutationObserveScript = 
 `
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
@@ -54,4 +81,4 @@ observer.observe(document, {
 });
 `;
 
-export { getScript, onHeightUpdated, domMutationObserveScript };
+export { getScript, onHeightUpdated, onWidthUpdated, onHeightWidthUpdated, domMutationObserveScript };

autoHeightWebView/index.android.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 
 import Immutable from 'immutable';
 
-import { getScript, onHeightUpdated, domMutationObserveScript, getHeight } from './common.js';
+import { getScript, onHeightUpdated, onWidthUpdated, onHeightWidthUpdated, domMutationObserveScript } from './common.js';
 
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
   nativeOnly: {
@@ -32,10 +32,15 @@ const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', Auto
   }
 });
 
+const screenWidth = Dimensions.get('window').width;
+
 export default class AutoHeightWebView extends PureComponent {
   static propTypes = {
     source: WebView.propTypes.source,
-    onHeightUpdated: PropTypes.func,
+      onHeightUpdated: PropTypes.func,
+      onWidthUpdated: PropTypes.func,
+      onHeightWidthUpdated: PropTypes.func,
+      shouldResizeWidth: PropTypes.bool,
     customScript: PropTypes.string,
     customStyle: PropTypes.string,
     enableAnimation: PropTypes.bool,
@@ -44,7 +49,8 @@ export default class AutoHeightWebView extends PureComponent {
     // only works on enable animation
     animationDuration: PropTypes.number,
     // offset of rn webView margin
-    heightOffset: PropTypes.number,
+      heightOffset: PropTypes.number,
+      widthOffset: PropTypes.number,
     // baseUrl not work in android 4.3 or below version
     enableBaseUrl: PropTypes.bool,
     style: ViewPropTypes.style,
@@ -68,7 +74,9 @@ export default class AutoHeightWebView extends PureComponent {
     enableBaseUrl: false,
     enableAnimation: true,
     animationDuration: 555,
-    heightOffset: 20
+      heightOffset: 20,
+      widthOffset: 20,
+      shouldResizeWidth: false
   };
 
   constructor(props) {
@@ -78,7 +86,9 @@ export default class AutoHeightWebView extends PureComponent {
     this.state = {
       isChangingSource: false,
       height: 0,
-      heightOffset: 0,
+        heightOffset: 0,
+        width: screenWidth,
+        widthOffset: 0,
       script: getScript(props, baseScript)
     };
   }
@@ -89,21 +99,24 @@ export default class AutoHeightWebView extends PureComponent {
 
   componentWillReceiveProps(nextProps) {
     // injectedJavaScript only works when webView reload (source changed)
-    if (Immutable.is(Immutable.fromJS(this.props.source), Immutable.fromJS(nextProps.source))) {
-      return;
-    } else {
-      this.setState(
-        {
-          isChangingSource: true,
-          height: 0,
-          heightOffset: 0
-        },
-        () => {
-          this.startInterval();
-          this.setState({ isChangingSource: false });
-        }
-      );
-    }
+      if (Immutable.is(Immutable.fromJS(this.props.source), Immutable.fromJS(nextProps.source))) {
+          return;
+      }
+      else {
+          this.setState(
+              {
+                  isChangingSource: true,
+                  height: 0,
+                  heightOffset: 0,
+                  width: 0,
+                  widthOffset: 0,
+              },
+              () => {
+                  this.startInterval();
+                  this.setState({ isChangingSource: false });
+              }
+          );
+      }
     this.setState({ script: getScript(nextProps, baseScript) });
   }
 
@@ -147,26 +160,29 @@ export default class AutoHeightWebView extends PureComponent {
   }
 
   onMessage = e => {
-    const height = parseInt(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
-    if (height && height !== this.state.height) {
-      const { enableAnimation, animationDuration, heightOffset } = this.props;
-      enableAnimation && this.opacityAnimatedValue.setValue(0);
-      this.stopInterval();
-      this.setState(
-        {
-          heightOffset,
-          height
-        },
-        () => {
-          enableAnimation
-            ? Animated.timing(this.opacityAnimatedValue, {
-                toValue: 1,
-                duration: animationDuration
-              }).start(() => onHeightUpdated(height, this.props))
-            : onHeightUpdated(height, this.props);
-        }
-      );
-    }
+      const { height, width } = JSON.parse(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
+      if (height && height !== this.state.height && width && width !== this.state.width) {
+          const { enableAnimation, animationDuration, heightOffset, widthOffset } = this.props;
+          enableAnimation && this.opacityAnimatedValue.setValue(0);
+          this.stopInterval();
+          
+          this.setState(
+              {
+                  heightOffset,
+                  height,
+                  widthOffset,
+                  width
+              },
+              () => {
+                  enableAnimation
+                      ? Animated.timing(this.opacityAnimatedValue, {
+                          toValue: 1,
+                          duration: animationDuration
+                      }).start(() => onHeightWidthUpdated(height, width, this.props))
+                      : onHeightWidthUpdated(height, width, this.props);
+              }
+          );
+      }
   };
 
   onLoadingStart = event => {
@@ -198,7 +214,7 @@ export default class AutoHeightWebView extends PureComponent {
   }
 
   render() {
-    const { height, script, isChangingSource, heightOffset } = this.state;
+      const { height, width, script, isChangingSource, heightOffset, widthOffset } = this.state;
     const { scalesPageToFit, enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
     let webViewSource = source;
     if (enableBaseUrl) {
@@ -206,13 +222,15 @@ export default class AutoHeightWebView extends PureComponent {
         baseUrl: 'file:///android_asset/web/'
       });
     }
+      
     return (
       <Animated.View
         style={[
           styles.container,
           {
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
-            height: height + heightOffset
+              height: height + heightOffset,
+              width: width + widthOffset
           },
           style
         ]}
@@ -239,13 +257,11 @@ export default class AutoHeightWebView extends PureComponent {
   }
 }
 
-const screenWidth = Dimensions.get('window').width;
-
 const isBelowKitKat = Platform.Version < 19;
 
 const styles = StyleSheet.create({
   container: {
-    width: screenWidth,
+    //width: screenWidth,
     backgroundColor: 'transparent'
   },
   webView: {
@@ -257,17 +273,38 @@ const styles = StyleSheet.create({
 const baseScript = isBelowKitKat
   ? `
     ; (function () {
+        var wrapper = document.createElement('div');
+        wrapper.id = 'wrapper';
+        while (document.body.firstChild instanceof Node) {
+            wrapper.appendChild(document.body.firstChild);
+        }
+        document.body.appendChild(wrapper);
+
         AutoHeightWebView.onMessage = function (message) {
-            AutoHeightWebView.send(String(document.body.offsetHeight));
+            var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
+            var width = Math.round(rect.width);
+            var height = Math.round(rect.height);
+            AutoHeightWebView.send(JSON.stringify({ width, height }));
         };
         ${domMutationObserveScript}
     } ());
     `
   : `
     ; (function () {
+        var wrapper = document.createElement('div');
+        wrapper.id = 'wrapper';
+        while (document.body.firstChild instanceof Node) {
+            wrapper.appendChild(document.body.firstChild);
+        }
+        document.body.appendChild(wrapper);
+
         document.addEventListener('message', function (e) {
-            window.postMessage(String(document.body.offsetHeight));
+            var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
+            var width = Math.round(rect.width);
+            var height = Math.round(rect.height);
+            window.postMessage(JSON.stringify({ width, height }));
         });
         ${domMutationObserveScript}
     } ());
     `;
+

autoHeightWebView/index.ios.js

@@ -6,13 +6,18 @@ import { Animated, Dimensions, StyleSheet, ViewPropTypes, WebView } from 'react-
 
 import PropTypes from 'prop-types';
 
-import { getScript, onHeightUpdated, domMutationObserveScript } from './common.js';
+import { getScript, onHeightUpdated, onWidthUpdated, onHeightWidthUpdated, domMutationObserveScript } from './common.js';
+
+const screenWidth = Dimensions.get('window').width;
 
 export default class AutoHeightWebView extends PureComponent {
   static propTypes = {
     hasIframe: PropTypes.bool,
     source: WebView.propTypes.source,
-    onHeightUpdated: PropTypes.func,
+      onHeightUpdated: PropTypes.func,
+      onWidthUpdated: PropTypes.func,
+      onHeightWidthUpdated: PropTypes.func,
+      shouldResizeWidth: PropTypes.bool,
     customScript: PropTypes.string,
     customStyle: PropTypes.string,
     enableAnimation: PropTypes.bool,
@@ -21,7 +26,8 @@ export default class AutoHeightWebView extends PureComponent {
     // only works on enable animation
     animationDuration: PropTypes.number,
     // offset of rn webview margin
-    heightOffset: PropTypes.number,
+      heightOffset: PropTypes.number,
+      widthOffset: PropTypes.number,
     style: ViewPropTypes.style,
     //  rn WebView callback
     onError: PropTypes.func,
@@ -43,14 +49,19 @@ export default class AutoHeightWebView extends PureComponent {
     scalesPageToFit: false,
     enableAnimation: true,
     animationDuration: 555,
-    heightOffset: 12
+      heightOffset: 12,
+      widthOffset: 12,
+      shouldResizeWidth: false
   };
 
   constructor(props) {
     super(props);
     props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
     this.state = {
-      height: 0,
+        height: 0,
+        //heightOffset: 0, //?? I added this
+        width: screenWidth,
+        //widthOffset: 0,
       script: getScript(props, baseScript, iframeBaseScript)
     };
   }
@@ -59,20 +70,22 @@ export default class AutoHeightWebView extends PureComponent {
     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) {
-      enableAnimation && this.opacityAnimatedValue.setValue(0);
-      this.setState({ height }, () => {
-        enableAnimation
-          ? Animated.timing(this.opacityAnimatedValue, {
-              toValue: 1,
-              duration: animationDuration
-            }).start(() => onHeightUpdated(height, this.props))
-          : onHeightUpdated(height, this.props);
-      });
-    }
+    handleNavigationStateChange = navState => {
+        var [width, height] = navState.title.split(',');
+        width = Number(width);
+        height = Number(height);
+        const { enableAnimation, animationDuration } = this.props;
+        if (height && height !== this.state.height) {       // ??? add to logic ??? width && width !== this.state.width
+            enableAnimation && this.opacityAnimatedValue.setValue(0);
+            this.setState({ height, width }, () => {
+                enableAnimation
+                    ? Animated.timing(this.opacityAnimatedValue, {
+                        toValue: 1,
+                        duration: animationDuration
+                    }).start(() => onHeightWidthUpdated(height, width, this.props))
+                    : onHeightWidthUpdated(height, width, this.props);
+            });
+        }
   };
 
   getWebView = webView => (this.webView = webView);
@@ -82,7 +95,7 @@ export default class AutoHeightWebView extends PureComponent {
   }
 
   render() {
-    const { height, script } = this.state;
+    const { height, width, script } = this.state;
     const {
       onError,
       onLoad,
@@ -93,6 +106,7 @@ export default class AutoHeightWebView extends PureComponent {
       enableAnimation,
       source,
       heightOffset,
+      widthOffset,
       customScript,
       style
     } = this.props;
@@ -103,7 +117,8 @@ export default class AutoHeightWebView extends PureComponent {
           styles.container,
           {
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
-            height: height + heightOffset
+              height: height + heightOffset,
+              width: width + widthOffset
           },
           style
         ]}
@@ -127,11 +142,8 @@ export default class AutoHeightWebView extends PureComponent {
   }
 }
 
-const screenWidth = Dimensions.get('window').width;
-
 const styles = StyleSheet.create({
   container: {
-    width: screenWidth,
     backgroundColor: 'transparent'
   },
   webView: {
@@ -141,36 +153,46 @@ const styles = StyleSheet.create({
 });
 
 const commonScript = `
-    updateHeight();
-    window.addEventListener('load', updateHeight);
-    window.addEventListener('resize', updateHeight);
+    updateSize();
+    window.addEventListener('load', updateSize);
+    window.addEventListener('resize', updateSize);
     `;
 
-const getHeight = `
+const _getter = `
     function getHeight(height) {
       if(height < 1) {
         return document.body.offsetHeight;
       }
       return height;
     }
+    function getWidth(width) {
+      if(width < 1) {
+        return document.body.clientWidth; // maybe should be .offsetWidth ??
+      }
+      return width;
+    }
     `;
-
 const baseScript = `
     ;
-    ${getHeight}
+    ${_getter}
     (function () {
         var i = 0;
         var height = 0;
+        var width = ${screenWidth};
         var wrapper = document.createElement('div');
         wrapper.id = 'height-wrapper';
         while (document.body.firstChild instanceof Node) {
             wrapper.appendChild(document.body.firstChild);
         }
         document.body.appendChild(wrapper);
-        function updateHeight() {
-            if(document.body.offsetHeight !== height) {
-                height = getHeight(wrapper.clientHeight);
-                document.title = height;
+        function updateSize() {
+            var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
+            var newWidth = Math.round(rect.width);
+            var newHeight = Math.round(rect.height);
+            if(newHeight !== height) {
+                //height = getHeight(wrapper.clientHeight);
+                //width = getWidth(wrapper.clientWidth);
+                document.title = newWidth + ',' + newHeight;
                 window.location.hash = ++i;
             }
         }
@@ -181,14 +203,19 @@ const baseScript = `
 
 const iframeBaseScript = `
     ;
-    ${getHeight}
+    ${_getter}
     (function () {
         var i = 0;
         var height = 0;
-        function updateHeight() {
-            if(document.body.offsetHeight !== height) {
-                height = getHeight(document.body.firstChild.clientHeight);
-                document.title = height;
+        var width = ${screenWidth};
+        function updateSize() {
+            var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
+            var newWidth = Math.round(rect.width);
+            var newHeight = Math.round(rect.height);
+            if(newHeight !== height) {
+                //height = getHeight(document.body.firstChild.clientHeight);
+                //width = getWidth(document.body.firstChild.clientHeight);
+                document.title = newWidth + ',' + newHeight;
                 window.location.hash = ++i;
             }
         }