URI, method and body changes are reflected

Author: Minishlink

src/index.js

@@ -7,53 +7,73 @@ export default class extends Component {
 
   constructor(props) {
     super(props);
+    this.handleSource(props.source, props.newWindow);
+  }
+
+  handleSource = (source, newWindow) => {
+    if (!source.method) return;
+
+    if (newWindow) {
+      this.handleSourceInNewWindow(source);
+    } else {
+      this.handleSourceInIFrame(source);
+    }
+  };
 
-    const { source } = props;
-    if (source.method) {
-      if (props.newWindow) {
-        if (source.method === 'POST') {
-          const contentType = source.headers['Content-Type'];
-          let body = '';
-          if (contentType && contentType.includes('application/x-www-form-urlencoded')) {
-            body = Qs.parse(source.body);
-          } else {
-            console.warn(
-              '[WebView] When opening a new window, this content-type is not supported yet, please make a PR!',
-              contentType
-            );
-            return;
-          }
+  handleSourceInIFrame = source => {
+    const { uri, ...options } = source;
+    const baseUrl = uri.substr(0, uri.lastIndexOf('/') + 1);
+    fetch(uri, options)
+      .then(response => response.text())
+      .then(html => this.setState({ html: `<base href="${baseUrl}" />` + html }));
+  };
 
-          window.open(
-            require('./postMock.html') +
-              '?' +
-              Qs.stringify({
-                uri: source.uri,
-                body: JSON.stringify(body),
-              })
-          );
-        } else {
-          console.warn(
-            '[WebView] When opening a new window, this method is not supported yet, please make a PR!',
-            source.method
-          );
-        }
+  handleSourceInNewWindow = source => {
+    if (source.method === 'POST') {
+      const contentType = source.headers['Content-Type'];
+      let body = '';
+      if (contentType && contentType.includes('application/x-www-form-urlencoded')) {
+        body = Qs.parse(source.body);
       } else {
-        const { uri, ...options } = source;
-        const baseUrl = uri.substr(0, uri.lastIndexOf('/') + 1);
-        fetch(uri, options)
-          .then(response => response.text())
-          .then(html => this.setState({ html: `<base href="${baseUrl}" />` + html }));
+        console.warn(
+          '[WebView] When opening a new window, this content-type is not supported yet, please make a PR!',
+          contentType
+        );
+        return;
       }
+
+      window.open(
+        require('./postMock.html') +
+          '?' +
+          Qs.stringify({
+            uri: source.uri,
+            body: JSON.stringify(body),
+          })
+      );
+    } else {
+      console.warn(
+        '[WebView] When opening a new window, this method is not supported yet, please make a PR!',
+        source.method
+      );
     }
-  }
+  };
 
   componentDidMount() {
     if (this.props.onMessage) {
       window.addEventListener('message', this.onMessage, true);
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (
+      this.props.source.uri !== nextProps.source.uri ||
+      this.props.source.method !== nextProps.source.method ||
+      this.props.source.body !== nextProps.source.body
+    ) {
+      this.handleSource(nextProps.source, nextProps.newWindow);
+    }
+  }
+
   componentWillUnmount() {
     if (this.props.onMessage) {
       window.removeEventListener('message', this.onMessage, true);