#172: Add possibility to rebuild input props for Google API HOC

Author: rangoo94

src/GoogleApiComponent.js

@@ -5,6 +5,10 @@ import {ScriptCache} from './lib/ScriptCache';
 import GoogleApi from './lib/GoogleApi';
 
 const defaultMapConfig = {};
+
+const serialize = obj => JSON.stringify(obj);
+const isSame = (obj1, obj2) => obj1 === obj2 || serialize(obj1) === serialize(obj2);
+
 const defaultCreateCache = options => {
   options = options || {};
   const apiKey = options.apiKey;
@@ -30,19 +34,57 @@ export const wrapper = input => WrappedComponent => {
   class Wrapper extends React.Component {
     constructor(props, context) {
       super(props, context);
+
+      // Build options from input
       const options = typeof input === 'function' ? input(props) : input;
+
+      // Initialize required Google scripts and other configured options
+      this.initialize(options);
+
+      this.state = {
+        loaded: false,
+        map: null,
+        google: null,
+        options: options
+      };
+    }
+
+    componentWillReceiveProps(props) {
+      // Do not update input if it's not dynamic
+      if (typeof input !== 'function') {
+        return;
+      }
+
+      // Get options to compare
+      const prevOptions = this.state.options;
+      const options = typeof input === 'function' ? input(props) : input;
+
+      // Ignore when options are not changed
+      if (isSame(options, prevOptions)) {
+        return;
+      }
+
+      // Initialize with new options
+      this.initialize(options);
+
+      // Save new options in component state
+      this.setState({ options: options });
+    }
+
+    initialize(options) {
+      // Load cache factory
       const createCache = options.createCache || defaultCreateCache;
 
+      // Build script
       this.scriptCache = createCache(options);
       this.scriptCache.google.onLoad(this.onLoad.bind(this));
+
+      // Store information about loading container
       this.LoadingContainer =
         options.LoadingContainer || DefaultLoadingContainer;
 
-      this.state = {
-        loaded: false,
-        map: null,
-        google: null
-      };
+      // Remove information about previous API handlers
+      this.setState({ loaded: false, google: null });
     }
 
     onLoad(err, tag) {