feat(async/ScriptjsLoader): rename from async/ScriptjsGoogleMap

examples/gh-pages/scripts/components/AsyncGettingStarted.js

@@ -2,8 +2,8 @@ import {default as React, Component} from "react";
 import {default as update} from "react-addons-update";
 import {default as FaSpinner} from "react-icons/lib/fa/spinner";
 
-import {default as ScriptjsGoogleMap} from "react-google-maps/lib/async/ScriptjsGoogleMap";
-import {Marker} from "react-google-maps";
+import {default as ScriptjsLoader} from "react-google-maps/lib/async/ScriptjsLoader";
+import {GoogleMap, Marker} from "react-google-maps";
 
 /*
  * This is the modify version of:
@@ -69,7 +69,7 @@ export default class AsyncGettingStarted extends Component {
   render () {
     // <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" />
     return (
-      <ScriptjsGoogleMap
+      <ScriptjsLoader
         hostname={"maps.googleapis.com"}
         pathname={"/maps/api/js"}
         query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
@@ -89,25 +89,36 @@ export default class AsyncGettingStarted extends Component {
             />
           </div>
         }
-        // <GoogleMap> props
-        containerProps={{
-          ...this.props,
-          style: {
-            height: "100%",
-          },
-        }}
-        ref="map"
-        defaultZoom={3}
-        defaultCenter={{lat: -25.363882, lng: 131.044922}}
-        onClick={::this.handleMapClick}>
-        {this.state.markers.map((marker, index) => {
-          return (
-            <Marker
-              {...marker}
-              onRightclick={this.handleMarkerRightclick.bind(this, index)} />
-          );
-        })}
-      </ScriptjsGoogleMap>
+        googleMapElement={
+          <GoogleMap
+            containerProps={{
+              ...this.props,
+              style: {
+                height: "100%",
+              },
+            }}
+            ref={googleMap => {
+              // Wait until GoogleMap is fully loaded. Related to #133
+              setTimeout(() => {
+                console.log(googleMap)
+                console.log("Zoom: " + googleMap.getZoom());
+                console.log("Center: " + googleMap.getCenter());
+              }, 50);
+            }}
+            defaultZoom={3}
+            defaultCenter={{lat: -25.363882, lng: 131.044922}}
+            onClick={::this.handleMapClick}
+          >
+            {this.state.markers.map((marker, index) => {
+              return (
+                <Marker
+                  {...marker}
+                  onRightclick={this.handleMarkerRightclick.bind(this, index)} />
+              );
+            })}
+          </GoogleMap>
+        }
+      />
     );
   }
 }

src/async/ScriptjsGoogleMap.js

@@ -1,13 +1,8 @@
 import {
   default as React,
   Component,
-  PropTypes,
 } from "react";
 
-import {
-  default as canUseDOM,
-} from "can-use-dom";
-
 import {
   default as warning,
 } from "warning";
@@ -17,49 +12,35 @@ import {
 } from "../index";
 
 import {
-  default as makeUrl,
-  urlObjDefinition,
-  getUrlObjChangedKeys,
-} from "../utils/makeUrl";
+  default as ScriptjsLoader,
+} from "./ScriptjsLoader";
 
 export default class ScriptjsGoogleMap extends Component {
-  static propTypes = {
-    ...urlObjDefinition,
-    // PropTypes for ScriptjsGoogleMap
-    loadingElement: PropTypes.node,
-  }
-
-  state = {
-    isLoaded: false,
-  }
 
   componentWillMount () {
-    if (!canUseDOM) {
-      return;
-    }
-    const scriptjs = require("scriptjs");
-    const {protocol, hostname, port, pathname, query, ...restProps} = this.props;
-    const urlObj = {protocol, hostname, port, pathname, query};
-    const url =  makeUrl(urlObj);
-    scriptjs(url, () => this.setState({ isLoaded: true }));
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if ("production" !== process.env.NODE_ENV) {
-      const changedKeys = getUrlObjChangedKeys(this.props, nextProps);
-
-      warning(0 === changedKeys.length, `ScriptjsGoogleMap doesn't support mutating url related props after initial render. Changed props: %s`, `[${ changedKeys.join(", ") }]`);
-    }
+    warning(false,
+`"async/ScriptjsGoogleMap" is deprecated now and will be removed in next major release (5.0.0). Use "async/ScriptjsLoader" instead.
+See https://github.com/tomchentw/react-google-maps/pull/150 for more details.`
+    );
   }
 
   render () {
-    if (this.state.isLoaded) {
-      const {protocol, hostname, port, pathname, query, ...restProps} = this.props;
-      return (
-        <GoogleMap {...restProps} />
-      );
-    } else {
-      return this.props.loadingElement;
-    }
+    const {protocol, hostname, port, pathname, query, loadingElement, children, ...restProps} = this.props;
+
+    return (
+      <ScriptjsLoader
+        protocol={protocol}
+        hostname={hostname}
+        port={port}
+        pathname={pathname}
+        query={query}
+        loadingElement={loadingElement}
+        googleMapElement={
+          <GoogleMap {...restProps}>
+            {children}
+          </GoogleMap>
+        }
+      />
+    )
   }
 }

src/async/ScriptjsLoader.js

@@ -0,0 +1,69 @@
+import {
+  default as React,
+  Component,
+  PropTypes,
+} from "react";
+
+import {
+  default as canUseDOM,
+} from "can-use-dom";
+
+import {
+  default as warning,
+} from "warning";
+
+import {
+  GoogleMap,
+} from "../index";
+
+import {
+  default as makeUrl,
+  urlObjDefinition,
+  getUrlObjChangedKeys,
+} from "../utils/makeUrl";
+
+export default class ScriptjsLoader extends Component {
+  static propTypes = {
+    ...urlObjDefinition,
+    // PropTypes for ScriptjsLoader
+    loadingElement: PropTypes.node,
+    googleMapElement: PropTypes.element.isRequired,
+  }
+
+  state = {
+    isLoaded: false,
+  }
+
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    /*
+     * External commonjs require dependency -- begin
+     */
+    const scriptjs = require("scriptjs");
+    /*
+     * External commonjs require dependency -- end
+     */
+    const {protocol, hostname, port, pathname, query} = this.props;
+    const urlObj = {protocol, hostname, port, pathname, query};
+    const url = makeUrl(urlObj);
+    scriptjs(url, () => this.setState({ isLoaded: true }));
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if ("production" !== process.env.NODE_ENV) {
+      const changedKeys = getUrlObjChangedKeys(this.props, nextProps);
+
+      warning(0 === changedKeys.length, `ScriptjsLoader doesn't support mutating url related props after initial render. Changed props: %s`, `[${ changedKeys.join(", ") }]`);
+    }
+  }
+
+  render () {
+    if (this.state.isLoaded) {
+      return this.props.googleMapElement;
+    } else {
+      return this.props.loadingElement;
+    }
+  }
+}