react-google-maps - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,31 @@
+## 1.1.0 (2015-04-30)
+
+
+#### Features
+
+* **GoogleMaps:**
+  * get rid of mapProps ([7e338c2a](https://github.com/tomchentw/react-google-maps/commit/7e338c2add01fdb63441e023e5da25db905b9c4c))
+  * render child components inside VirtualContainer ([f07eb4b4](https://github.com/tomchentw/react-google-maps/commit/f07eb4b47605a4bc2752f60306ae4e5f8395bc64))
+
+
+#### Breaking Changes
+
+* mapProps is no longer needed
+
+  since map children components are now rendered inside a virtual
+  container, we don't need funky wrapper div anymore.
+
+  Before:
+
+    <div {...props.containerProps} ref="googleMaps" />
+      <div {...props.mapProps} ref="googleMaps" />
+    </div>
+
+  After:
+
+    <div {...props.containerProps} ref="googleMaps" />
+
+ ([7e338c2a](https://github.com/tomchentw/react-google-maps/commit/7e338c2add01fdb63441e023e5da25db905b9c4c))
+
+
 ### 1.0.1 (2015-04-30)
@@ -2,0 +32,0 @@

client/scripts/components/basics/AsynchronousLoading.js

@@ -19,6 +19,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -25,0 +21,0 @@ googleMapsApi={googleMapsApi}

client/scripts/components/basics/Directions.js

@@ -44,6 +44,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -50,0 +46,0 @@ googleMapsApi={googleMapsApi}

client/scripts/components/basics/Geolocation.js

@@ -54,6 +54,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -60,0 +56,0 @@ googleMapsApi={googleMapsApi}

client/scripts/components/basics/SimpleMap.js

@@ -25,6 +25,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -31,0 +27,0 @@ googleMapsApi={googleMapsApi}

client/scripts/components/events/AccessingArguments.js

@@ -34,6 +34,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -40,0 +36,0 @@ ref="map"

client/scripts/components/events/ClosureListeners.js

@@ -61,6 +61,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -67,0 +63,0 @@ googleMapsApi={googleMapsApi}

client/scripts/components/events/GettingProperties.js

@@ -39,6 +39,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -45,0 +41,0 @@ ref="map"

client/scripts/components/events/SimpleClickEvent.js

@@ -53,6 +53,2 @@ import React from "react/addons";
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -59,0 +55,0 @@ ref="map"

client/scripts/components/GeojsonToComponents.js

@@ -152,11 +152,7 @@ import React from "react/addons";
       <GoogleMaps containerProps={{
-        ...otherProps,
-        style: {
-          height: "100%",
-        },
-      }} mapProps={{
-        style: {
-          height: "100%",
-        },
-      }}
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }}
         googleMapsApi={googleMapsApi}
@@ -163,0 +159,0 @@ {...mapFeature.properties}

client/scripts/components/GettingStarted.js

@@ -61,13 +61,2 @@ import React from "react/addons";
 
-    /* Internally, <GoogleMaps> will expand to:
-        <div {...containerProps}>
-          <div {...mapProps}>
-            <!-- This inner div is where google.maps.Map instance -->
-            <!-- will be initialized on -->
-          </div>
-          <!-- The container div is just a wrapper around inner div -->
-          <!-- and other children components of maps. -->
-          <!-- This is leaky. I knew it. -->
-        </div>
-     */
     return (
@@ -79,6 +68,2 @@ <GoogleMaps containerProps={{
           },
-        }} mapProps={{
-          style: {
-            height: "100%",
-          },
         }}
@@ -85,0 +70,0 @@ ref="map"

lib/GoogleMaps.js

@@ -29,2 +29,6 @@ "use strict";
 
+var _VirtualContainer = require("./internals/VirtualContainer");
+
+var _VirtualContainer2 = _interopRequireDefault(_VirtualContainer);
+
 var _exposeGetters = require("./internals/exposeGetters");
@@ -124,2 +128,22 @@
   }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      _get(Object.getPrototypeOf(GoogleMaps.prototype), "componentDidMount", this).call(this);
+      this._containerNode = document.createElement("div");
+      this._render_virtual_container_();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      _get(Object.getPrototypeOf(GoogleMaps.prototype), "componentDidUpdate", this).call(this);
+      this._render_virtual_container_();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      _React2["default"].unmountComponentAtNode(this._containerNode);
+      this._containerNode = null;
+      _get(Object.getPrototypeOf(GoogleMaps.prototype), "componentWillUnmount", this).call(this);
+    }
+  }, {
     key: "render",
@@ -129,22 +153,21 @@ value: function render() {
 
-      return _React2["default"].createElement(
-        "div",
-        props.containerProps,
-        _React2["default"].createElement("div", _extends({}, props.mapProps, { ref: "googleMaps" })),
-        this._render_children_()
-      );
+      return _React2["default"].createElement("div", _extends({}, props.containerProps, { ref: "googleMaps" }));
     }
   }, {
-    key: "_render_children_",
-    value: function _render_children_() {
-      var extraProps = {
-        googleMapsApi: this.props.googleMapsApi,
-        map: this.state.instance };
+    key: "_render_virtual_container_",
+    value: function _render_virtual_container_() {
+      var props = this.props;var googleMapsApi = props.googleMapsApi;
 
-      return _React2["default"].Children.map(this.props.children, function (child) {
-        if (child && child.type) {
-          child = _React2["default"].cloneElement(child, extraProps);
-        }
-        return child;
-      });
+      var children = props.children;var instance = this.state.instance;
+
+      if (!googleMapsApi || !instance) {
+        return;
+      }
+      return _React2["default"].render(_React2["default"].createElement(
+        _VirtualContainer2["default"],
+        {
+          googleMapsApi: googleMapsApi,
+          map: instance },
+        children
+      ), this._containerNode);
     }
@@ -157,4 +180,3 @@ }]);
 GoogleMaps.propTypes = _extends({}, _EventComponent3["default"].propTypes, {
-  containerProps: PropTypes.object.isRequired,
-  mapProps: PropTypes.object.isRequired });
+  containerProps: PropTypes.object.isRequired });
 
@@ -161,0 +183,0 @@ GoogleMaps._registerEvents = _createRegisterEvents2["default"]("bounds_changed center_changed click dblclick drag dragend dragstart heading_changed idle maptypeid_changed mousemove mouseout mouseover projection_changed resize rightclick tilesloaded tilt_changed zoom_changed");

package.json

 {
   "__template__gist__": "https://gist.github.com/tomchentw/368a93bb748ad9d576f1#file-package-json",
   "name": "react-google-maps",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React.js Google Maps integration component",
@@ -59,3 +59,3 @@ "main": "lib/index.js",
     "classnames": "^1.2.1",
-    "css-loader": "^0.9.0",
+    "css-loader": "^0.12.0",
     "file-loader": "^0.8.1",
@@ -66,3 +66,3 @@ "github-fork-ribbon-css": "git+https://github.com/tomchentw/github-fork-ribbon-css.git#gh-pages",
     "jquery": "^2.1.1",
-    "jsx-loader": "^0.12.0",
+    "node-sass": "^2.1.1",
     "prismjs": "git+https://github.com/PrismJS/prism.git#master",
@@ -73,4 +73,4 @@ "raw-loader": "^0.5.1",
     "react-toastr": "^1.2.0",
-    "sass-loader": "^0.3.0",
-    "style-loader": "^0.8.1",
+    "sass-loader": "^0.6.0",
+    "style-loader": "^0.12.1",
     "toastr": "^2.0.4",
@@ -77,0 +77,0 @@ "tomchentw-npm-dev": "^1.1.0",

src/GoogleMaps.js

 import React from "react";
 
 import EventComponent from "./internals/EventComponent";
+import VirtualContainer from "./internals/VirtualContainer";
 import exposeGetters from "./internals/exposeGetters";
@@ -72,2 +73,19 @@ import createRegisterEvents from "./internals/createRegisterEvents";
 
+  componentDidMount () {
+    super.componentDidMount();
+    this._containerNode = document.createElement("div");
+    this._render_virtual_container_();
+  }
+
+  componentDidUpdate () {
+    super.componentDidUpdate();
+    this._render_virtual_container_();
+  }
+
+  componentWillUnmount () {
+    React.unmountComponentAtNode(this._containerNode);
+    this._containerNode = null;
+    super.componentWillUnmount();
+  }
+
   render () {
@@ -77,22 +95,22 @@ const {props} = this;
     return (
-      <div {...props.containerProps}>
-        <div {...props.mapProps} ref="googleMaps" />
-        {this._render_children_()}
-      </div>
+      <div {...props.containerProps} ref="googleMaps" />
     );
   }
 
-  _render_children_ () {
-    const extraProps = {
-      googleMapsApi: this.props.googleMapsApi,
-      map: this.state.instance,
-    };
+  _render_virtual_container_ () {
+    const {props} = this,
+          {googleMapsApi, children} = props,
+          {instance} = this.state;
+    if (!googleMapsApi || !instance) {
+      return;
+    }
+    return React.render(
+      <VirtualContainer
+        googleMapsApi={googleMapsApi}
+        map={instance}>
+        {children}
+      </VirtualContainer>
+    , this._containerNode);
+  }
 
-    return React.Children.map(this.props.children, (child) => {
-      if (child && child.type) {
-        child = React.cloneElement(child, extraProps);
-      }
-      return child;
-    });
-  }
 }
@@ -103,3 +121,2 @@
   containerProps: PropTypes.object.isRequired,
-  mapProps: PropTypes.object.isRequired,
 };
@@ -106,0 +123,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105724

increased by4.48%

Number of package files

58

increased by3.57%

Lines of code

2176

increased by3.27%

No dependency changes