react-google-maps - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

@@ -0,1 +1,12 @@
+<a name="4.1.0"></a>
+# [4.1.0](https://github.com/tomchentw/react-google-maps/compare/v4.0.0...v4.1.0) (2015-10-13)
+
+
+### Features
+
+* **src:** move instance creation in componentWillMount ([91d5790](https://github.com/tomchentw/react-google-maps/commit/91d5790))
+* **src:** update composeOptions to accept controlledPropTypes for _2 ([03aee4d](https://github.com/tomchentw/react-google-maps/commit/03aee4d))
+
+
+
 <a name="4.0.0"></a>
@@ -2,0 +13,0 @@ # [4.0.0](https://github.com/tomchentw/react-google-maps/compare/v3.0.0...v4.0.0) (2015-10-08)

lib/_Skeleton.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsSkeletonCreator = require("./creators/SkeletonCreator");
@@ -59,11 +59,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var skeleton = _creatorsSkeletonCreator2["default"]._createSkeleton(this.props);
 
-      var skeletonProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var skeleton = _creatorsSkeletonCreator2["default"]._createSkeleton(mapHolderRef, skeletonProps);
-
       this.setState({ skeleton: skeleton });
@@ -70,0 +68,0 @@ }

lib/addons/addonsCreators/InfoBoxCreator.js

@@ -50,2 +50,6 @@ "use strict";
 var infoBoxControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
@@ -113,3 +117,6 @@ content: _react.PropTypes.any,
     key: "_createInfoBox",
-    value: function _createInfoBox(mapHolderRef, infoBoxProps, anchorHolderRef) {
+    value: function _createInfoBox(infoBoxProps) {
+      var mapHolderRef = infoBoxProps.mapHolderRef;
+      var anchorHolderRef = infoBoxProps.anchorHolderRef;
+
       // "google-maps-infobox" uses "google" as a global variable. Since we don't
@@ -121,5 +128,3 @@ // have "google" on the server, we can not use it in server-side rendering.
       // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
-      var infoBox = new GoogleMapsInfobox((0, _utilsComposeOptions2["default"])(infoBoxProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-      "content", "position", "visible", "zIndex"]));
+      var infoBox = new GoogleMapsInfobox((0, _utilsComposeOptions2["default"])(infoBoxProps, infoBoxControlledPropTypes));
 
@@ -126,0 +131,0 @@ if (infoBoxProps.children) {

lib/addons/InfoBox.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _addonsCreatorsInfoBoxCreator = require("./addonsCreators/InfoBoxCreator");
@@ -75,11 +75,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var infoBox = _addonsCreatorsInfoBoxCreator2["default"]._createInfoBox(this.props);
 
-      var infoBoxProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var infoBox = _addonsCreatorsInfoBoxCreator2["default"]._createInfoBox(mapHolderRef, infoBoxProps);
-
       this.setState({ infoBox: infoBox });
@@ -86,0 +84,0 @@ }

lib/Circle.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsCircleCreator = require("./creators/CircleCreator");
@@ -89,11 +89,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var circle = _creatorsCircleCreator2["default"]._createCircle(this.props);
 
-      var circleProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var circle = _creatorsCircleCreator2["default"]._createCircle(mapHolderRef, circleProps);
-
       this.setState({ circle: circle });
@@ -100,0 +98,0 @@ }

lib/creators/_SkeletonCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var skeletonControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference
@@ -101,7 +106,7 @@ animation: _react.PropTypes.any
     key: "_createSkeleton",
-    value: function _createSkeleton(mapHolderRef, skeletonProps) {
+    value: function _createSkeleton(skeletonProps) {
+      var mapHolderRef = skeletonProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-      var skeleton = new google.maps.Skeleton((0, _utilsComposeOptions2["default"])(skeletonProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-      "animation"]));
+      var skeleton = new google.maps.Skeleton((0, _utilsComposeOptions2["default"])(skeletonProps, skeletonControlledPropTypes));
 
@@ -108,0 +113,0 @@ skeleton.setMap(mapHolderRef.getMap());

lib/creators/CircleCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var circleControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle
@@ -111,7 +116,7 @@ center: _react.PropTypes.any,
     key: "_createCircle",
-    value: function _createCircle(mapHolderRef, circleProps) {
+    value: function _createCircle(circleProps) {
+      var mapHolderRef = circleProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle
-      var circle = new google.maps.Circle((0, _utilsComposeOptions2["default"])(circleProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#CircleOptions
-      "center", "draggable", "editable", "radius", "visible"]));
+      var circle = new google.maps.Circle((0, _utilsComposeOptions2["default"])(circleProps, circleControlledPropTypes));
 
@@ -118,0 +123,0 @@ circle.setMap(mapHolderRef.getMap());

lib/creators/DirectionsRendererCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var directionsRendererControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer
@@ -114,7 +119,7 @@ directions: _react.PropTypes.any,
     key: "_createDirectionsRenderer",
-    value: function _createDirectionsRenderer(mapHolderRef, directionsRendererProps) {
+    value: function _createDirectionsRenderer(directionsRendererProps) {
+      var mapHolderRef = directionsRendererProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer
-      var directionsRenderer = new google.maps.DirectionsRenderer((0, _utilsComposeOptions2["default"])(directionsRendererProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRendererOptions
-      "directions", "panel", "routeIndex"]));
+      var directionsRenderer = new google.maps.DirectionsRenderer((0, _utilsComposeOptions2["default"])(directionsRendererProps, directionsRendererControlledPropTypes));
 
@@ -121,0 +126,0 @@ directionsRenderer.setMap(mapHolderRef.getMap());

lib/creators/DrawingManagerCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var drawingManagerControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
@@ -95,7 +100,7 @@ drawingMode: _react.PropTypes.any,
     key: "_createDrawingManager",
-    value: function _createDrawingManager(mapHolderRef, drawingManagerProps) {
+    value: function _createDrawingManager(drawingManagerProps) {
+      var mapHolderRef = drawingManagerProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
-      var drawingManager = new google.maps.drawing.DrawingManager((0, _utilsComposeOptions2["default"])(drawingManagerProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManagerOptions
-      "drawingMode"]));
+      var drawingManager = new google.maps.drawing.DrawingManager((0, _utilsComposeOptions2["default"])(drawingManagerProps, drawingManagerControlledPropTypes));
 
@@ -102,0 +107,0 @@ drawingManager.setMap(mapHolderRef.getMap());

lib/creators/GoogleMapHolder.js

@@ -42,3 +42,8 @@ "use strict";
 var mapControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
@@ -127,5 +132,3 @@ center: _react.PropTypes.object,
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
-      return new google.maps.Map(domEl, (0, _utilsComposeOptions2["default"])(mapProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
-      "center", "heading", "mapTypeId", "streetView", "tilt", "zoom"]));
+      return new google.maps.Map(domEl, (0, _utilsComposeOptions2["default"])(mapProps, mapControlledPropTypes));
     }
@@ -132,0 +135,0 @@ }, {

lib/creators/InfoWindowCreator.js

@@ -50,3 +50,8 @@ "use strict";
 var infoWindowControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow
@@ -110,7 +115,8 @@ content: _react.PropTypes.any,
     key: "_createInfoWindow",
-    value: function _createInfoWindow(mapHolderRef, infoWindowProps, anchorHolderRef) {
+    value: function _createInfoWindow(infoWindowProps) {
+      var mapHolderRef = infoWindowProps.mapHolderRef;
+      var anchorHolderRef = infoWindowProps.anchorHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow
-      var infoWindow = new google.maps.InfoWindow((0, _utilsComposeOptions2["default"])(infoWindowProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindowOptions
-      "content", "position", "zIndex"]));
+      var infoWindow = new google.maps.InfoWindow((0, _utilsComposeOptions2["default"])(infoWindowProps, infoWindowControlledPropTypes));
 
@@ -117,0 +123,0 @@ if (infoWindowProps.children) {

lib/creators/MarkerCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var markerControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code", function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
@@ -174,7 +179,7 @@ animation: _react.PropTypes.any,
     key: "_createMarker",
-    value: function _createMarker(mapHolderRef, markerProps) {
+    value: function _createMarker(markerProps) {
+      var mapHolderRef = markerProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
-      var marker = new google.maps.Marker((0, _utilsComposeOptions2["default"])(markerProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions
-      "animation", "attribution", "clickable", "cursor", "draggable", "icon", "label", "opacity", "place", "position", "shape", "title", "visible", "zIndex"]));
+      var marker = new google.maps.Marker((0, _utilsComposeOptions2["default"])(markerProps, markerControlledPropTypes));
 
@@ -181,0 +186,0 @@ marker.setMap(mapHolderRef.getMap());

lib/creators/OverlayViewCreator.js

@@ -41,7 +41,13 @@ "use strict";
   getPixelPositionOffset: _react.PropTypes.func,
-  position: _react.PropTypes.object
+  position: _react.PropTypes.object,
+  children: _react.PropTypes.node
 };
 
 exports.overlayViewControlledPropTypes = overlayViewControlledPropTypes;
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference
@@ -89,6 +95,8 @@ var overlayViewDefaultPropTypes = (0, _utilsDefaultPropsCreator2["default"])(overlayViewControlledPropTypes);
     key: "_createOverlayView",
-    value: function _createOverlayView(mapHolderRef, overlayViewProps) {
+    value: function _createOverlayView(overlayViewProps) {
+      var mapHolderRef = overlayViewProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
       var overlayView = new google.maps.OverlayView();
-      overlayView.setValues((0, _utilsComposeOptions2["default"])(overlayViewProps, ["mapPaneName", "getPixelPositionOffset", "position", "children"]));
+      overlayView.setValues((0, _utilsComposeOptions2["default"])(overlayViewProps, overlayViewControlledPropTypes));
 
@@ -95,0 +103,0 @@ overlayView.onAdd = function () {

lib/creators/PolygonCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var polygonControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon
@@ -111,7 +116,7 @@ draggable: _react.PropTypes.bool,
     key: "_createPolygon",
-    value: function _createPolygon(mapHolderRef, polygonProps) {
+    value: function _createPolygon(polygonProps) {
+      var mapHolderRef = polygonProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon
-      var polygon = new google.maps.Polygon((0, _utilsComposeOptions2["default"])(polygonProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#PolygonOptions
-      "draggable", "editable", "paths", "visible"]));
+      var polygon = new google.maps.Polygon((0, _utilsComposeOptions2["default"])(polygonProps, polygonControlledPropTypes));
 
@@ -118,0 +123,0 @@ polygon.setMap(mapHolderRef.getMap());

lib/creators/PolylineCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var polylineControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline
@@ -107,7 +112,7 @@ draggable: _react.PropTypes.bool,
     key: "_createPolyline",
-    value: function _createPolyline(mapHolderRef, polylineProps) {
+    value: function _createPolyline(polylineProps) {
+      var mapHolderRef = polylineProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline
-      var polyline = new google.maps.Polyline((0, _utilsComposeOptions2["default"])(polylineProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#PolylineOptions
-      "draggable", "editable", "path", "visible"]));
+      var polyline = new google.maps.Polyline((0, _utilsComposeOptions2["default"])(polylineProps, polylineControlledPropTypes));
 
@@ -114,0 +119,0 @@ polyline.setMap(mapHolderRef.getMap());

lib/creators/RectangleCreator.js

@@ -46,3 +46,8 @@ "use strict";
 var rectangleControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
   // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
@@ -107,7 +112,7 @@ bounds: _react.PropTypes.any,
     key: "_createRectangle",
-    value: function _createRectangle(mapHolderRef, rectangleProps) {
+    value: function _createRectangle(rectangleProps) {
+      var mapHolderRef = rectangleProps.mapHolderRef;
+
       // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
-      var rectangle = new google.maps.Rectangle((0, _utilsComposeOptions2["default"])(rectangleProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#RectangleOptions
-      "bounds", "draggable", "editable", "visible"]));
+      var rectangle = new google.maps.Rectangle((0, _utilsComposeOptions2["default"])(rectangleProps, rectangleControlledPropTypes));
 
@@ -114,0 +119,0 @@ rectangle.setMap(mapHolderRef.getMap());

lib/creators/SearchBoxCreator.js

@@ -46,2 +46,6 @@ "use strict";
 var searchBoxControlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
   bounds: _react.PropTypes.any
@@ -127,3 +131,3 @@ };
     value: function _createSearchBox(inputElement, searchBoxProps) {
-      var searchBox = new google.maps.places.SearchBox(inputElement, (0, _utilsComposeOptions2["default"])(searchBoxProps, ["bounds"]));
+      var searchBox = new google.maps.places.SearchBox(inputElement, (0, _utilsComposeOptions2["default"])(searchBoxProps, searchBoxControlledPropTypes));
 
@@ -130,0 +134,0 @@ return searchBox;

lib/DirectionsRenderer.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsDirectionsRendererCreator = require("./creators/DirectionsRendererCreator");
@@ -74,11 +74,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var directionsRenderer = _creatorsDirectionsRendererCreator2["default"]._createDirectionsRenderer(this.props);
 
-      var directionsRendererProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var directionsRenderer = _creatorsDirectionsRendererCreator2["default"]._createDirectionsRenderer(mapHolderRef, directionsRendererProps);
-
       this.setState({ directionsRenderer: directionsRenderer });
@@ -85,0 +83,0 @@ }

lib/DrawingManager.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsDrawingManagerCreator = require("./creators/DrawingManagerCreator");
@@ -64,11 +64,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var drawingManager = _creatorsDrawingManagerCreator2["default"]._createDrawingManager(this.props);
 
-      var drawingManagerProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var drawingManager = _creatorsDrawingManagerCreator2["default"]._createDrawingManager(mapHolderRef, drawingManagerProps);
-
       this.setState({ drawingManager: drawingManager });
@@ -75,0 +73,0 @@ }

lib/InfoWindow.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsInfoWindowCreator = require("./creators/InfoWindowCreator");
@@ -67,12 +67,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
-      var anchorHolderRef = _props.anchorHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var infoWindow = _creatorsInfoWindowCreator2["default"]._createInfoWindow(this.props);
 
-      var infoWindowProps = _objectWithoutProperties(_props, ["mapHolderRef", "anchorHolderRef"]);
-
-      var infoWindow = _creatorsInfoWindowCreator2["default"]._createInfoWindow(mapHolderRef, infoWindowProps, anchorHolderRef);
-
       this.setState({ infoWindow: infoWindow });
@@ -79,0 +76,0 @@ }

lib/Marker.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsMarkerCreator = require("./creators/MarkerCreator");
@@ -124,11 +124,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var marker = _creatorsMarkerCreator2["default"]._createMarker(this.props);
 
-      var markerProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var marker = _creatorsMarkerCreator2["default"]._createMarker(mapHolderRef, markerProps);
-
       this.setState({ marker: marker });
@@ -135,0 +133,0 @@ }

lib/OverlayView.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsOverlayViewCreator = require("./creators/OverlayViewCreator");
@@ -69,11 +69,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var overlayView = _creatorsOverlayViewCreator2["default"]._createOverlayView(this.props);
 
-      var overlayViewProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var overlayView = _creatorsOverlayViewCreator2["default"]._createOverlayView(mapHolderRef, overlayViewProps);
-
       this.setState({ overlayView: overlayView });
@@ -80,0 +78,0 @@ }

lib/Polygon.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsPolygonCreator = require("./creators/PolygonCreator");
@@ -79,11 +79,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var polygon = _creatorsPolygonCreator2["default"]._createPolygon(this.props);
 
-      var polygonProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var polygon = _creatorsPolygonCreator2["default"]._createPolygon(mapHolderRef, polygonProps);
-
       this.setState({ polygon: polygon });
@@ -90,0 +88,0 @@ }

lib/Polyline.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsPolylineCreator = require("./creators/PolylineCreator");
@@ -74,11 +74,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var polyline = _creatorsPolylineCreator2["default"]._createPolyline(this.props);
 
-      var polylineProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var polyline = _creatorsPolylineCreator2["default"]._createPolyline(mapHolderRef, polylineProps);
-
       this.setState({ polyline: polyline });
@@ -85,0 +83,0 @@ }

lib/Rectangle.js

@@ -15,4 +15,2 @@ "use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +24,4 @@
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsRectangleCreator = require("./creators/RectangleCreator");
@@ -79,11 +79,9 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _props = this.props;
-      var mapHolderRef = _props.mapHolderRef;
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
+      var rectangle = _creatorsRectangleCreator2["default"]._createRectangle(this.props);
 
-      var rectangleProps = _objectWithoutProperties(_props, ["mapHolderRef"]);
-
-      var rectangle = _creatorsRectangleCreator2["default"]._createRectangle(mapHolderRef, rectangleProps);
-
       this.setState({ rectangle: rectangle });
@@ -90,0 +88,0 @@ }

lib/SearchBox.js

@@ -25,2 +25,4 @@ "use strict";
 
+var _fbjsLibExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
 var _creatorsSearchBoxCreator = require("./creators/SearchBoxCreator");
@@ -68,4 +70,7 @@
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (!_fbjsLibExecutionEnvironment.canUseDOM) {
+        return;
+      }
       var _props = this.props;
@@ -72,0 +77,0 @@ var mapHolderRef = _props.mapHolderRef;

lib/utils/composeOptions.js

@@ -17,9 +17,14 @@ "use strict";
 
-function composeOptions(props, optionNameList) {
+function composeOptions(props, controlledPropTypes) {
+  var optionNameList = Object.keys(controlledPropTypes);
   var getter = (0, _controlledOrDefault2["default"])(props);
 
+  // props from arguments may contain unknow props.
+  // We only interested those in optionNameList
   return optionNameList.reduce(function (acc, optionName) {
-    var value = getter(optionName);
-    if ("undefined" !== typeof value) {
-      acc[optionName] = value;
+    if ("options" !== optionName) {
+      var value = getter(optionName);
+      if ("undefined" !== typeof value) {
+        acc[optionName] = value;
+      }
     }
@@ -26,0 +31,0 @@ return acc;

package.json

 {
   "__template__gist__": "https://gist.github.com/tomchentw/368a93bb748ad9d576f1#file-package-json",
   "name": "react-google-maps",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "React.js Google Maps integration component",
@@ -17,4 +17,11 @@ "main": "lib/index.js",
     "lint": "eslint src",
-    "test": "npm run lint"
+    "pretest:cov": "npm run lint",
+    "pretest": "npm run lint",
+    "test:cov": "babel-node ./node_modules/.bin/isparta cover --report lcov _mocha -- $npm_package_config_mocha",
+    "test:watch": "npm test -- --watch",
+    "test": "mocha $npm_package_config_mocha"
   },
+  "config": {
+    "mocha": "--compilers js:babel/register ./src/**/__tests__/*.spec.js"
+  },
   "repository": {
@@ -63,4 +70,9 @@ "type": "git",
     "babel-eslint": "^4.1.3",
+    "codeclimate-test-reporter": "^0.1.1",
     "eslint": "^1.6.0",
     "eslint-plugin-react": "^3.5.1",
+    "expect": "^1.12.1",
+    "isparta": "^3.1.0",
+    "istanbul": "^0.3.22",
+    "mocha": "^2.3.3",
     "react": "^0.14.0",
@@ -72,2 +84,3 @@ "react-dom": "^0.14.0",
   "dependencies": {
+    "fbjs": "^0.3.1",
     "google-maps-infobox": "^1.1.13",
@@ -74,0 +87,0 @@ "invariant": "^2.1.1"

README.md

@@ -7,11 +7,61 @@ # react-google-maps [![Travis CI][travis-image]][travis-url] [![Quality][codeclimate-image]][codeclimate-url] [![Coverage][codeclimate-coverage-image]][codeclimate-coverage-url] [![Dependencies][gemnasium-image]][gemnasium-url] [![Gitter][gitter-image]][gitter-url]
 
-## Installation
+## Quick start: SimpleMap
 
-```sh
-npm i --save react-google-maps
+Declare your Google Maps components using React components.
+
+```js
+import {GoogleMap, Marker} from "react-google-maps";
+
+export default function SimpleMap (props) {
+  return (
+    <section style={{height: "100%"}}>
+      <GoogleMap containerProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        defaultZoom={3}
+        defaultCenter={{lat: -25.363882, lng: 131.044922}}
+        onClick={props.onMapClick}
+      >
+        {props.markers.map((marker, index) => {
+          return (
+            <Marker
+              {...marker}
+              onRightclick={() => props.onMarkerRightclick(index)} />
+          );
+        })}
+      </GoogleMap>
+    </section>
+  );
+}
 ```
 
 
-## Demo/Examples
+## Documentation
 
+### Rule 1
+
+Define `<GoogleMap>` component in the top level. Use `containerProps`, `containerTagName` to customized the wrapper DOM for the component.
+
+Other components like `<Marker>` belongs to the children of `<GoogleMap>`. You already know this from the example code above.
+
+### Rule 2
+
+Everything in the `Methods` table in the [official documentation](https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker) of the component could be set via component's *props* directly. For example, a `<Marker>` component has the following *props*:
+
+```
+animation, attribution, clickable, cursor, draggable, icon, label, opacity, options, place, position, shape, title, visible, zIndex
+```
+
+### Rule 3
+
+Every props mentioned in __Rule 2__ could be either [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components) or [uncontrolled](https://facebook.github.io/react/docs/forms.html#uncontrolled-components) property. Free to use either one depends on your use case.
+
+### Rule 4
+
+Anything that are inside components' `options` property could __ONLY__ be accessible via `props.options`. It's your responsibility to manage `props.options` object during the React lifetime for your component. My suggestion is, always use __Rule 3__ if possible. Only use `options` when it's necessary.
+
+### Check the examples
+
 Static hosted [demo site][demo] on GitHub. The code is located under [examples/gh-pages][examples_gh_pages] folder.
@@ -22,5 +72,31 @@
 
-This module requires to be bundled with [webpack][webpack]/browserify and loads `react/addons` internally.  
+`react-google-maps` requires __React 0.14__
 
+```sh
+npm install --save react-google-maps
+```
 
+All components are available on the top-level export.
+
+```js
+import { GoogleMap, Marker, SearchBox } from "react-google-maps";
+```
+
+### Optimize bundle size
+
+You could of course import from individual modules to save your [webpack][webpack]'s bundle size.
+
+```js
+import GoogleMap from "react-google-maps/lib/GoogleMap"; // Or import {default as GoogleMap} ...
+```
+
+### Additional Addons
+
+Some addons component could __ONLY__ be accessible via direct import:
+
+```js
+import InfoBox from "react-google-maps/lib/addons/InfoBox";
+```
+
+
 ## Development
@@ -56,3 +132,3 @@
 
-Install `node@^0.12.4`. Then,
+Install `node`. Then,
 
@@ -70,3 +146,3 @@ ```shell
 
-Install `node@^0.12.4`. Then,
+Install `node`. Then,
 
@@ -73,0 +149,0 @@ ```shell

src/_Skeleton.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as SkeletonCreator,
@@ -37,5 +41,7 @@ skeletonDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...skeletonProps} = this.props;
-    const skeleton = SkeletonCreator._createSkeleton(mapHolderRef, skeletonProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const skeleton = SkeletonCreator._createSkeleton(this.props);
 
@@ -42,0 +48,0 @@ this.setState({ skeleton });

src/addons/addonsCreators/InfoBoxCreator.js

@@ -17,2 +17,6 @@ import {
 export const infoBoxControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
@@ -53,3 +57,4 @@ content: PropTypes.any,
 
-  static _createInfoBox (mapHolderRef, infoBoxProps, anchorHolderRef) {
+  static _createInfoBox (infoBoxProps) {
+    const {mapHolderRef, anchorHolderRef} = infoBoxProps;
     // "google-maps-infobox" uses "google" as a global variable. Since we don't
@@ -61,9 +66,3 @@ // have "google" on the server, we can not use it in server-side rendering.
     // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
-    const infoBox = new GoogleMapsInfobox(composeOptions(infoBoxProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-      "content",
-      "position",
-      "visible",
-      "zIndex",
-    ]));
+    const infoBox = new GoogleMapsInfobox(composeOptions(infoBoxProps, infoBoxControlledPropTypes));
 
@@ -70,0 +69,0 @@ if (infoBoxProps.children) {

src/addons/InfoBox.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as InfoBoxCreator,
@@ -45,5 +49,7 @@ infoBoxDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...infoBoxProps} = this.props;
-    const infoBox = InfoBoxCreator._createInfoBox(mapHolderRef, infoBoxProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const infoBox = InfoBoxCreator._createInfoBox(this.props);
 
@@ -50,0 +56,0 @@ this.setState({ infoBox });

src/Circle.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as CircleCreator,
@@ -49,5 +53,7 @@ circleDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...circleProps} = this.props;
-    const circle = CircleCreator._createCircle(mapHolderRef, circleProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const circle = CircleCreator._createCircle(this.props);
 
@@ -54,0 +60,0 @@ this.setState({ circle });

src/creators/_SkeletonCreator.js

@@ -17,3 +17,8 @@ import {
 export const skeletonControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference
@@ -45,8 +50,6 @@ animation: PropTypes.any,
 
-  static _createSkeleton (mapHolderRef, skeletonProps) {
+  static _createSkeleton (skeletonProps) {
+    const {mapHolderRef} = skeletonProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-    const skeleton = new google.maps.Skeleton(composeOptions(skeletonProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-      "animation",
-    ]));
+    const skeleton = new google.maps.Skeleton(composeOptions(skeletonProps, skeletonControlledPropTypes));
 
@@ -53,0 +56,0 @@ skeleton.setMap(mapHolderRef.getMap());

src/creators/CircleCreator.js

@@ -16,3 +16,8 @@ import {
 export const circleControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle
@@ -54,12 +59,6 @@ center: PropTypes.any,
 
-  static _createCircle (mapHolderRef, circleProps) {
+  static _createCircle (circleProps) {
+    const {mapHolderRef} = circleProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle
-    const circle = new google.maps.Circle(composeOptions(circleProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#CircleOptions
-      "center",
-      "draggable",
-      "editable",
-      "radius",
-      "visible",
-    ]));
+    const circle = new google.maps.Circle(composeOptions(circleProps, circleControlledPropTypes));
 
@@ -66,0 +65,0 @@ circle.setMap(mapHolderRef.getMap());

src/creators/DirectionsRendererCreator.js

@@ -17,3 +17,8 @@ import {
 export const directionsRendererControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer
@@ -51,10 +56,6 @@ directions: PropTypes.any,
 
-  static _createDirectionsRenderer (mapHolderRef, directionsRendererProps) {
+  static _createDirectionsRenderer (directionsRendererProps) {
+    const {mapHolderRef} = directionsRendererProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer
-    const directionsRenderer = new google.maps.DirectionsRenderer(composeOptions(directionsRendererProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRendererOptions
-      "directions",
-      "panel",
-      "routeIndex",
-    ]));
+    const directionsRenderer = new google.maps.DirectionsRenderer(composeOptions(directionsRendererProps, directionsRendererControlledPropTypes));
 
@@ -61,0 +62,0 @@ directionsRenderer.setMap(mapHolderRef.getMap());

src/creators/DrawingManagerCreator.js

@@ -16,3 +16,8 @@ import {
 export const drawingManagerControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
@@ -46,8 +51,6 @@ drawingMode: PropTypes.any,
 
-  static _createDrawingManager (mapHolderRef, drawingManagerProps) {
+  static _createDrawingManager (drawingManagerProps) {
+    const {mapHolderRef} = drawingManagerProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
-    const drawingManager = new google.maps.drawing.DrawingManager(composeOptions(drawingManagerProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManagerOptions
-      "drawingMode",
-    ]));
+    const drawingManager = new google.maps.drawing.DrawingManager(composeOptions(drawingManagerProps, drawingManagerControlledPropTypes));
 
@@ -54,0 +57,0 @@ drawingManager.setMap(mapHolderRef.getMap());

src/creators/GoogleMapHolder.js

@@ -15,3 +15,8 @@ import {
 export const mapControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
@@ -56,11 +61,3 @@ center: PropTypes.object,
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
-    return new google.maps.Map(domEl, composeOptions(mapProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
-      "center",
-      "heading",
-      "mapTypeId",
-      "streetView",
-      "tilt",
-      "zoom",
-    ]));
+    return new google.maps.Map(domEl, composeOptions(mapProps, mapControlledPropTypes));
   }
@@ -67,0 +64,0 @@

src/creators/InfoWindowCreator.js

@@ -17,3 +17,8 @@ import {
 export const infoWindowControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow
@@ -53,10 +58,6 @@ content: PropTypes.any,
 
-  static _createInfoWindow (mapHolderRef, infoWindowProps, anchorHolderRef) {
+  static _createInfoWindow (infoWindowProps) {
+    const {mapHolderRef, anchorHolderRef} = infoWindowProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow
-    const infoWindow = new google.maps.InfoWindow(composeOptions(infoWindowProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindowOptions
-      "content",
-      "position",
-      "zIndex",
-    ]));
+    const infoWindow = new google.maps.InfoWindow(composeOptions(infoWindowProps, infoWindowControlledPropTypes));
 
@@ -63,0 +64,0 @@ if (infoWindowProps.children) {

src/creators/MarkerCreator.js

@@ -17,3 +17,8 @@ import {
 export const markerControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code", function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
@@ -73,21 +78,6 @@ animation: PropTypes.any,
 
-  static _createMarker (mapHolderRef, markerProps) {
+  static _createMarker (markerProps) {
+    const {mapHolderRef} = markerProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
-    const marker = new google.maps.Marker(composeOptions(markerProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions
-      "animation",
-      "attribution",
-      "clickable",
-      "cursor",
-      "draggable",
-      "icon",
-      "label",
-      "opacity",
-      "place",
-      "position",
-      "shape",
-      "title",
-      "visible",
-      "zIndex",
-    ]));
+    const marker = new google.maps.Marker(composeOptions(markerProps, markerControlledPropTypes));
 
@@ -94,0 +84,0 @@ marker.setMap(mapHolderRef.getMap());

src/creators/OverlayViewCreator.js

@@ -19,3 +19,9 @@ import {
   position: PropTypes.object,
+  children: PropTypes.node,
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference
@@ -33,11 +39,7 @@ };
 
-  static _createOverlayView (mapHolderRef, overlayViewProps) {
+  static _createOverlayView (overlayViewProps) {
+    const {mapHolderRef} = overlayViewProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
     const overlayView = new google.maps.OverlayView();
-    overlayView.setValues(composeOptions(overlayViewProps, [
-      "mapPaneName",
-      "getPixelPositionOffset",
-      "position",
-      "children",
-    ]));
+    overlayView.setValues(composeOptions(overlayViewProps, overlayViewControlledPropTypes));
 
@@ -44,0 +46,0 @@ overlayView.onAdd = function () {

src/creators/PolygonCreator.js

@@ -16,3 +16,8 @@ import {
 export const polygonControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon
@@ -54,11 +59,6 @@ draggable: PropTypes.bool,
 
-  static _createPolygon (mapHolderRef, polygonProps) {
+  static _createPolygon (polygonProps) {
+    const {mapHolderRef} = polygonProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon
-    const polygon = new google.maps.Polygon(composeOptions(polygonProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#PolygonOptions
-      "draggable",
-      "editable",
-      "paths",
-      "visible",
-    ]));
+    const polygon = new google.maps.Polygon(composeOptions(polygonProps, polygonControlledPropTypes));
 
@@ -65,0 +65,0 @@ polygon.setMap(mapHolderRef.getMap());

src/creators/PolylineCreator.js

@@ -16,3 +16,8 @@ import {
 export const polylineControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline
@@ -52,11 +57,6 @@ draggable: PropTypes.bool,
 
-  static _createPolyline (mapHolderRef, polylineProps) {
+  static _createPolyline (polylineProps) {
+    const {mapHolderRef} = polylineProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline
-    const polyline = new google.maps.Polyline(composeOptions(polylineProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#PolylineOptions
-      "draggable",
-      "editable",
-      "path",
-      "visible",
-    ]));
+    const polyline = new google.maps.Polyline(composeOptions(polylineProps, polylineControlledPropTypes));
 
@@ -63,0 +63,0 @@ polyline.setMap(mapHolderRef.getMap());

src/creators/RectangleCreator.js

@@ -17,3 +17,8 @@ import {
 export const rectangleControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+//
 // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
@@ -53,11 +58,6 @@ bounds: PropTypes.any,
 
-  static _createRectangle (mapHolderRef, rectangleProps) {
+  static _createRectangle (rectangleProps) {
+    const {mapHolderRef} = rectangleProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
-    const rectangle = new google.maps.Rectangle(composeOptions(rectangleProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#RectangleOptions
-      "bounds",
-      "draggable",
-      "editable",
-      "visible",
-    ]));
+    const rectangle = new google.maps.Rectangle(composeOptions(rectangleProps, rectangleControlledPropTypes));
 
@@ -64,0 +64,0 @@ rectangle.setMap(mapHolderRef.getMap());

src/creators/SearchBoxCreator.js

@@ -16,2 +16,6 @@ import {
 export const searchBoxControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
   bounds: PropTypes.any,
@@ -43,5 +47,3 @@ };
   static _createSearchBox (inputElement, searchBoxProps) {
-    const searchBox = new google.maps.places.SearchBox(inputElement, composeOptions(searchBoxProps, [
-      "bounds",
-    ]));
+    const searchBox = new google.maps.places.SearchBox(inputElement, composeOptions(searchBoxProps, searchBoxControlledPropTypes));
 
@@ -48,0 +50,0 @@ return searchBox;

src/DirectionsRenderer.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as DirectionsRendererCreator,
@@ -45,5 +49,7 @@ directionsRendererDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...directionsRendererProps} = this.props;
-    const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer(mapHolderRef, directionsRendererProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer(this.props);
 
@@ -50,0 +56,0 @@ this.setState({ directionsRenderer });

src/DrawingManager.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as DrawingManagerCreator,
@@ -41,5 +45,7 @@ drawingManagerDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...drawingManagerProps} = this.props;
-    const drawingManager = DrawingManagerCreator._createDrawingManager(mapHolderRef, drawingManagerProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const drawingManager = DrawingManagerCreator._createDrawingManager(this.props);
 
@@ -46,0 +52,0 @@ this.setState({ drawingManager });

src/InfoWindow.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as InfoWindowCreator,
@@ -41,5 +45,7 @@ infoWindowDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, anchorHolderRef, ...infoWindowProps} = this.props;
-    const infoWindow = InfoWindowCreator._createInfoWindow(mapHolderRef, infoWindowProps, anchorHolderRef);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const infoWindow = InfoWindowCreator._createInfoWindow(this.props);
 
@@ -46,0 +52,0 @@ this.setState({ infoWindow });

src/Marker.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as MarkerCreator,
@@ -63,5 +67,7 @@ markerDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...markerProps} = this.props;
-    const marker = MarkerCreator._createMarker(mapHolderRef, markerProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const marker = MarkerCreator._createMarker(this.props);
 
@@ -68,0 +74,0 @@ this.setState({ marker });

src/OverlayView.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as OverlayViewCreator,
@@ -51,5 +55,7 @@ overlayViewDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...overlayViewProps} = this.props;
-    const overlayView = OverlayViewCreator._createOverlayView(mapHolderRef, overlayViewProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const overlayView = OverlayViewCreator._createOverlayView(this.props);
 
@@ -56,0 +62,0 @@ this.setState({ overlayView });

src/Polygon.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as PolygonCreator,
@@ -45,5 +49,7 @@ polygonDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...polygonProps} = this.props;
-    const polygon = PolygonCreator._createPolygon(mapHolderRef, polygonProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const polygon = PolygonCreator._createPolygon(this.props);
 
@@ -50,0 +56,0 @@ this.setState({ polygon });

src/Polyline.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as PolylineCreator,
@@ -43,5 +47,7 @@ polylineDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...polylineProps} = this.props;
-    const polyline = PolylineCreator._createPolyline(mapHolderRef, polylineProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const polyline = PolylineCreator._createPolyline(this.props);
 
@@ -48,0 +54,0 @@ this.setState({ polyline });

src/Rectangle.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as RectangleCreator,
@@ -47,5 +51,7 @@ rectangleDefaultPropTypes,
 
-  componentDidMount () {
-    const {mapHolderRef, ...rectangleProps} = this.props;
-    const rectangle = RectangleCreator._createRectangle(mapHolderRef, rectangleProps);
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
+    const rectangle = RectangleCreator._createRectangle(this.props);
 
@@ -52,0 +58,0 @@ this.setState({ rectangle });

src/SearchBox.js

@@ -7,2 +7,6 @@ import {
 import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
+import {
   default as SearchBoxCreator,
@@ -42,3 +46,6 @@ searchBoxDefaultPropTypes,
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, classes, style, ...searchBoxProps} = this.props;
@@ -45,0 +52,0 @@

src/utils/composeOptions.js

 import {default as controlledOrDefault} from "./controlledOrDefault";
 
-export default function composeOptions (props, optionNameList) {
+export default function composeOptions (props, controlledPropTypes) {
+  const optionNameList = Object.keys(controlledPropTypes);
   const getter = controlledOrDefault(props);
 
+  // props from arguments may contain unknow props.
+  // We only interested those in optionNameList
   return optionNameList.reduce((acc, optionName) => {
-    const value = getter(optionName);
-    if ("undefined" !== typeof value) {
-      acc[optionName] = value;
+    if ("options" !== optionName) {
+      const value = getter(optionName);
+      if ("undefined" !== typeof value) {
+        acc[optionName] = value;
+      }
     }
@@ -11,0 +16,0 @@ return acc;

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

275326

increased by1.4%

Number of package files

96

increased by2.13%

Lines of code

5218

increased by3.49%

Number of lines in readme file

186

increased by69.09%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

14

increased by55.56%

Dependency changes

• + Addedfbjs@^0.3.1

• + Addedfbjs@0.3.2(transitive)