From 960fe0c5c4b9f1094e8e0c63fd6960e35d715d6d Mon Sep 17 00:00:00 2001 From: Simone Potenza Date: Tue, 8 Mar 2016 18:27:38 +0100 Subject: [PATCH 1/9] Improved prerformance of rendering many markers on the map. Now GoogleMapHolder just renders children, and defines a context to provide the reference to itself. In this way, to request the original google map obejct, it is only necessary to request it from the context. This improves rendering of 3000 markers by 3 seconds. --- lib/Circle.js | 16 ++++++++++++- lib/DirectionsRenderer.js | 16 ++++++++++++- lib/DrawingManager.js | 16 ++++++++++++- lib/InfoWindow.js | 16 ++++++++++++- lib/KmlLayer.js | 20 ++++++++++++++-- lib/Marker.js | 16 ++++++++++++- lib/OverlayView.js | 14 ++++++++++- lib/Polygon.js | 16 ++++++++++++- lib/Polyline.js | 16 ++++++++++++- lib/Rectangle.js | 16 ++++++++++++- lib/SearchBox.js | 18 +++++++++++---- lib/_Skeleton.js | 16 ++++++++++++- lib/addons/MarkerClusterer.js | 15 +++++++++--- lib/addons/addonsCreators/InfoBoxCreator.js | 5 ---- .../addonsCreators/MarkerClustererCreator.js | 14 +++++++---- lib/creators/CircleCreator.js | 5 ---- lib/creators/DirectionsRendererCreator.js | 5 ---- lib/creators/DrawingManagerCreator.js | 5 ---- lib/creators/GoogleMapHolder.js | 23 ++++++++++--------- lib/creators/InfoWindowCreator.js | 5 ---- lib/creators/MarkerCreator.js | 5 ---- lib/creators/OverlayViewCreator.js | 5 ---- lib/creators/PolygonCreator.js | 5 ---- lib/creators/PolylineCreator.js | 5 ---- lib/creators/RectangleCreator.js | 5 ---- lib/creators/_SkeletonCreator.js | 5 ---- src/Circle.js | 14 ++++++++++- src/DirectionsRenderer.js | 14 ++++++++++- src/DrawingManager.js | 14 ++++++++++- src/InfoWindow.js | 14 ++++++++++- src/KmlLayer.js | 17 ++++++++++++-- src/Marker.js | 13 ++++++++++- src/OverlayView.js | 10 +++++++- src/Polygon.js | 13 ++++++++++- src/Polyline.js | 14 ++++++++++- src/Rectangle.js | 14 ++++++++++- src/SearchBox.js | 12 ++++++++-- src/_Skeleton.js | 13 ++++++++++- src/addons/MarkerClusterer.js | 10 +++++++- src/addons/addonsCreators/InfoBoxCreator.js | 3 --- .../addonsCreators/MarkerClustererCreator.js | 11 ++++++--- src/creators/CircleCreator.js | 3 --- src/creators/DirectionsRendererCreator.js | 3 --- src/creators/DrawingManagerCreator.js | 3 --- src/creators/GoogleMapHolder.js | 19 ++++++++------- src/creators/InfoWindowCreator.js | 3 --- src/creators/MarkerCreator.js | 3 --- src/creators/OverlayViewCreator.js | 3 --- src/creators/PolygonCreator.js | 3 --- src/creators/PolylineCreator.js | 3 --- src/creators/RectangleCreator.js | 3 --- src/creators/_SkeletonCreator.js | 3 --- 52 files changed, 386 insertions(+), 152 deletions(-) diff --git a/lib/Circle.js b/lib/Circle.js index 7df50813..3f63a670 100644 --- a/lib/Circle.js +++ b/lib/Circle.js @@ -28,6 +28,10 @@ var _creatorsCircleCreator = require("./creators/CircleCreator"); var _creatorsCircleCreator2 = _interopRequireDefault(_creatorsCircleCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var Circle = (function (_Component) { _inherits(Circle, _Component); @@ -88,10 +92,14 @@ var Circle = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var circle = _creatorsCircleCreator2["default"]._createCircle(this.props); + var circle = _creatorsCircleCreator2["default"]._createCircle(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ circle: circle }); } @@ -112,6 +120,12 @@ var Circle = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsCircleCreator.circleDefaultPropTypes, _creatorsCircleCreator.circleControlledPropTypes, _creatorsCircleCreator.circleEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return Circle; diff --git a/lib/DirectionsRenderer.js b/lib/DirectionsRenderer.js index 83e26ce1..23793bea 100644 --- a/lib/DirectionsRenderer.js +++ b/lib/DirectionsRenderer.js @@ -28,6 +28,10 @@ var _creatorsDirectionsRendererCreator = require("./creators/DirectionsRendererC var _creatorsDirectionsRendererCreator2 = _interopRequireDefault(_creatorsDirectionsRendererCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + /* * Original author: @alexishevia * Original PR: https://github.com/tomchentw/react-google-maps/pull/22 @@ -73,10 +77,14 @@ var DirectionsRenderer = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var directionsRenderer = _creatorsDirectionsRendererCreator2["default"]._createDirectionsRenderer(this.props); + var directionsRenderer = _creatorsDirectionsRendererCreator2["default"]._createDirectionsRenderer(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ directionsRenderer: directionsRenderer }); } @@ -97,6 +105,12 @@ var DirectionsRenderer = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsDirectionsRendererCreator.directionsRendererDefaultPropTypes, _creatorsDirectionsRendererCreator.directionsRendererControlledPropTypes, _creatorsDirectionsRendererCreator.directionsRendererEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return DirectionsRenderer; diff --git a/lib/DrawingManager.js b/lib/DrawingManager.js index b31cabc8..85815448 100644 --- a/lib/DrawingManager.js +++ b/lib/DrawingManager.js @@ -28,6 +28,10 @@ var _creatorsDrawingManagerCreator = require("./creators/DrawingManagerCreator") var _creatorsDrawingManagerCreator2 = _interopRequireDefault(_creatorsDrawingManagerCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + /* * Original author: @idolize * Original PR: https://github.com/tomchentw/react-google-maps/pull/46 @@ -63,10 +67,14 @@ var DrawingManager = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var drawingManager = _creatorsDrawingManagerCreator2["default"]._createDrawingManager(this.props); + var drawingManager = _creatorsDrawingManagerCreator2["default"]._createDrawingManager(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ drawingManager: drawingManager }); } @@ -87,6 +95,12 @@ var DrawingManager = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsDrawingManagerCreator.drawingManagerDefaultPropTypes, _creatorsDrawingManagerCreator.drawingManagerControlledPropTypes, _creatorsDrawingManagerCreator.drawingManagerEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return DrawingManager; diff --git a/lib/InfoWindow.js b/lib/InfoWindow.js index 112c802c..db70297a 100644 --- a/lib/InfoWindow.js +++ b/lib/InfoWindow.js @@ -28,6 +28,10 @@ var _creatorsInfoWindowCreator = require("./creators/InfoWindowCreator"); var _creatorsInfoWindowCreator2 = _interopRequireDefault(_creatorsInfoWindowCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var InfoWindow = (function (_Component) { _inherits(InfoWindow, _Component); @@ -66,10 +70,14 @@ var InfoWindow = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var infoWindow = _creatorsInfoWindowCreator2["default"]._createInfoWindow(this.props); + var infoWindow = _creatorsInfoWindowCreator2["default"]._createInfoWindow(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ infoWindow: infoWindow }); } @@ -90,6 +98,12 @@ var InfoWindow = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsInfoWindowCreator.infoWindowDefaultPropTypes, _creatorsInfoWindowCreator.infoWindowControlledPropTypes, _creatorsInfoWindowCreator.infoWindowEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return InfoWindow; diff --git a/lib/KmlLayer.js b/lib/KmlLayer.js index 7b1a3200..b1063736 100644 --- a/lib/KmlLayer.js +++ b/lib/KmlLayer.js @@ -28,6 +28,10 @@ var _creatorsKmlLayerCreator = require("./creators/KmlLayerCreator"); var _creatorsKmlLayerCreator2 = _interopRequireDefault(_creatorsKmlLayerCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var KmlLayer = (function (_Component) { _inherits(KmlLayer, _Component); @@ -78,20 +82,26 @@ var KmlLayer = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var kmlLayer = _creatorsKmlLayerCreator2["default"]._createKmlLayer(this.props); + var kmlLayer = _creatorsKmlLayerCreator2["default"]._createKmlLayer(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ kmlLayer: kmlLayer }); } }, { key: "render", value: function render() { + var mapHolderRef = this.context.mapHolderRef; + if (this.state.kmlLayer) { return _react2["default"].createElement( _creatorsKmlLayerCreator2["default"], - _extends({ kmlLayer: this.state.kmlLayer }, this.props), + _extends({ mapHolderRef: mapHolderRef, kmlLayer: this.state.kmlLayer }, this.props), this.props.children ); } else { @@ -102,6 +112,12 @@ var KmlLayer = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsKmlLayerCreator.kmlLayerDefaultPropTypes, _creatorsKmlLayerCreator.kmlLayerControlledPropTypes, _creatorsKmlLayerCreator.kmlLayerEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return KmlLayer; diff --git a/lib/Marker.js b/lib/Marker.js index 862cd40d..0d7637fd 100644 --- a/lib/Marker.js +++ b/lib/Marker.js @@ -28,6 +28,10 @@ var _creatorsMarkerCreator = require("./creators/MarkerCreator"); var _creatorsMarkerCreator2 = _interopRequireDefault(_creatorsMarkerCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var Marker = (function (_Component) { _inherits(Marker, _Component); @@ -123,10 +127,14 @@ var Marker = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var marker = _creatorsMarkerCreator2["default"]._createMarker(this.props); + var marker = _creatorsMarkerCreator2["default"]._createMarker(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ marker: marker }); } @@ -163,6 +171,12 @@ var Marker = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsMarkerCreator.markerDefaultPropTypes, _creatorsMarkerCreator.markerControlledPropTypes, _creatorsMarkerCreator.markerEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return Marker; diff --git a/lib/OverlayView.js b/lib/OverlayView.js index 28e1d650..682e7409 100644 --- a/lib/OverlayView.js +++ b/lib/OverlayView.js @@ -28,6 +28,10 @@ var _creatorsOverlayViewCreator = require("./creators/OverlayViewCreator"); var _creatorsOverlayViewCreator2 = _interopRequireDefault(_creatorsOverlayViewCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + /* * Original author: @petebrowne * Original PR: https://github.com/tomchentw/react-google-maps/pull/63 @@ -78,10 +82,12 @@ var OverlayView = (function (_Component) { }, { key: "render", value: function render() { + var mapHolderRef = this.context.mapHolderRef; + if (this.state.overlayView) { return _react2["default"].createElement( _creatorsOverlayViewCreator2["default"], - _extends({ overlayView: this.state.overlayView }, this.props), + _extends({ mapHolderRef: mapHolderRef, overlayView: this.state.overlayView }, this.props), this.props.children ); } else { @@ -112,6 +118,12 @@ var OverlayView = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsOverlayViewCreator.overlayViewDefaultPropTypes, _creatorsOverlayViewCreator.overlayViewControlledPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }, { key: "defaultProps", value: { diff --git a/lib/Polygon.js b/lib/Polygon.js index 7bd8be1e..3dba1593 100644 --- a/lib/Polygon.js +++ b/lib/Polygon.js @@ -28,6 +28,10 @@ var _creatorsPolygonCreator = require("./creators/PolygonCreator"); var _creatorsPolygonCreator2 = _interopRequireDefault(_creatorsPolygonCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var Polygon = (function (_Component) { _inherits(Polygon, _Component); @@ -78,10 +82,14 @@ var Polygon = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var polygon = _creatorsPolygonCreator2["default"]._createPolygon(this.props); + var polygon = _creatorsPolygonCreator2["default"]._createPolygon(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ polygon: polygon }); } @@ -102,6 +110,12 @@ var Polygon = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsPolygonCreator.polygonDefaultPropTypes, _creatorsPolygonCreator.polygonControlledPropTypes, _creatorsPolygonCreator.polygonEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return Polygon; diff --git a/lib/Polyline.js b/lib/Polyline.js index a6425a0f..9ebfa8a7 100644 --- a/lib/Polyline.js +++ b/lib/Polyline.js @@ -28,6 +28,10 @@ var _creatorsPolylineCreator = require("./creators/PolylineCreator"); var _creatorsPolylineCreator2 = _interopRequireDefault(_creatorsPolylineCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var Polyline = (function (_Component) { _inherits(Polyline, _Component); @@ -73,10 +77,14 @@ var Polyline = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var polyline = _creatorsPolylineCreator2["default"]._createPolyline(this.props); + var polyline = _creatorsPolylineCreator2["default"]._createPolyline(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ polyline: polyline }); } @@ -97,6 +105,12 @@ var Polyline = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsPolylineCreator.polylineDefaultPropTypes, _creatorsPolylineCreator.polylineControlledPropTypes, _creatorsPolylineCreator.polylineEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return Polyline; diff --git a/lib/Rectangle.js b/lib/Rectangle.js index 77496bbb..769a8358 100644 --- a/lib/Rectangle.js +++ b/lib/Rectangle.js @@ -28,6 +28,10 @@ var _creatorsRectangleCreator = require("./creators/RectangleCreator"); var _creatorsRectangleCreator2 = _interopRequireDefault(_creatorsRectangleCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + /* * Original author: @alistairjcbrown * Original PR: https://github.com/tomchentw/react-google-maps/pull/80 @@ -78,10 +82,14 @@ var Rectangle = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var rectangle = _creatorsRectangleCreator2["default"]._createRectangle(this.props); + var rectangle = _creatorsRectangleCreator2["default"]._createRectangle(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ rectangle: rectangle }); } @@ -102,6 +110,12 @@ var Rectangle = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsRectangleCreator.rectangleDefaultPropTypes, _creatorsRectangleCreator.rectangleControlledPropTypes, _creatorsRectangleCreator.rectangleEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return Rectangle; diff --git a/lib/SearchBox.js b/lib/SearchBox.js index 37d13a15..1a028c6a 100644 --- a/lib/SearchBox.js +++ b/lib/SearchBox.js @@ -30,6 +30,10 @@ var _creatorsSearchBoxCreator = require("./creators/SearchBoxCreator"); var _creatorsSearchBoxCreator2 = _interopRequireDefault(_creatorsSearchBoxCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + /* * Original author: @eyebraus * Original PR: https://github.com/tomchentw/react-google-maps/pull/110 @@ -74,12 +78,11 @@ var SearchBox = (function (_Component) { return; } var _props = this.props; - var mapHolderRef = _props.mapHolderRef; var classes = _props.classes; var style = _props.style; var placeholder = _props.placeholder; - var searchBoxProps = _objectWithoutProperties(_props, ["mapHolderRef", "classes", "style", "placeholder"]); + var searchBoxProps = _objectWithoutProperties(_props, ["classes", "style", "placeholder"]); // Cannot create input via component - Google Maps will mess with React's internal state by detaching/attaching. // Allow developers to style the "hidden element" via inputClasses. @@ -104,9 +107,8 @@ var SearchBox = (function (_Component) { }, { key: "render", value: function render() { - var _props2 = this.props; - var mapHolderRef = _props2.mapHolderRef; - var controlPosition = _props2.controlPosition; + var controlPosition = this.props.controlPosition; + var mapHolderRef = this.context.mapHolderRef; return this.state.searchBox ? _react2["default"].createElement( _creatorsSearchBoxCreator2["default"], @@ -118,6 +120,12 @@ var SearchBox = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsSearchBoxCreator.searchBoxDefaultPropTypes, _creatorsSearchBoxCreator.searchBoxControlledPropTypes, _creatorsSearchBoxCreator.searchBoxEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return SearchBox; diff --git a/lib/_Skeleton.js b/lib/_Skeleton.js index f6c033b1..8cfb3c69 100644 --- a/lib/_Skeleton.js +++ b/lib/_Skeleton.js @@ -28,6 +28,10 @@ var _creatorsSkeletonCreator = require("./creators/SkeletonCreator"); var _creatorsSkeletonCreator2 = _interopRequireDefault(_creatorsSkeletonCreator); +var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var Skeleton = (function (_Component) { _inherits(Skeleton, _Component); @@ -58,10 +62,14 @@ var Skeleton = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { + var mapHolderRef = this.context.mapHolderRef; + if (!_canUseDom2["default"]) { return; } - var skeleton = _creatorsSkeletonCreator2["default"]._createSkeleton(this.props); + var skeleton = _creatorsSkeletonCreator2["default"]._createSkeleton(_extends({}, this.props, { + mapHolderRef: mapHolderRef + })); this.setState({ skeleton: skeleton }); } @@ -82,6 +90,12 @@ var Skeleton = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsSkeletonCreator.skeletonDefaultPropTypes, _creatorsSkeletonCreator.skeletonControlledPropTypes, _creatorsSkeletonCreator.skeletonEventPropTypes), enumerable: true + }, { + key: "contextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) + }, + enumerable: true }]); return Skeleton; diff --git a/lib/addons/MarkerClusterer.js b/lib/addons/MarkerClusterer.js index e036a1fc..51eba12c 100644 --- a/lib/addons/MarkerClusterer.js +++ b/lib/addons/MarkerClusterer.js @@ -30,6 +30,10 @@ var _addonsCreatorsMarkerClustererCreator = require('./addonsCreators/MarkerClus var _addonsCreatorsMarkerClustererCreator2 = _interopRequireDefault(_addonsCreatorsMarkerClustererCreator); +var _creatorsGoogleMapHolder = require("../creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var MarkerClusterer = (function (_Component) { _inherits(MarkerClusterer, _Component); @@ -182,10 +186,9 @@ var MarkerClusterer = (function (_Component) { return; } - var _props = this.props; - var mapHolderRef = _props.mapHolderRef; + var markerClustererProps = _objectWithoutProperties(this.props, []); - var markerClustererProps = _objectWithoutProperties(_props, ['mapHolderRef']); + var mapHolderRef = this.context.mapHolderRef; var markerClusterer = _addonsCreatorsMarkerClustererCreator2['default']._createMarkerClusterer(mapHolderRef, markerClustererProps); @@ -208,6 +211,12 @@ var MarkerClusterer = (function (_Component) { key: 'propTypes', value: _extends({}, _addonsCreatorsMarkerClustererCreator.markerClusterDefaultPropTypes, _addonsCreatorsMarkerClustererCreator.markerClusterControlledPropTypes, _addonsCreatorsMarkerClustererCreator.markerClusterEventPropTypes), enumerable: true + }, { + key: 'contextTypes', + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2['default']) + }, + enumerable: true }]); return MarkerClusterer; diff --git a/lib/addons/addonsCreators/InfoBoxCreator.js b/lib/addons/addonsCreators/InfoBoxCreator.js index 4c0e1859..68859dee 100644 --- a/lib/addons/addonsCreators/InfoBoxCreator.js +++ b/lib/addons/addonsCreators/InfoBoxCreator.js @@ -42,10 +42,6 @@ var _utilsComponentLifecycleDecorator = require("../../utils/componentLifecycleD var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _creatorsGoogleMapHolder = require("../../creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var infoBoxControlledPropTypes = { // NOTICE!!!!!! // @@ -139,7 +135,6 @@ var InfoBoxCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]).isRequired, infoBox: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/addons/addonsCreators/MarkerClustererCreator.js b/lib/addons/addonsCreators/MarkerClustererCreator.js index 7bd18bc1..adfe6664 100644 --- a/lib/addons/addonsCreators/MarkerClustererCreator.js +++ b/lib/addons/addonsCreators/MarkerClustererCreator.js @@ -170,9 +170,8 @@ var MarkerClustererCreator = (function (_Component) { value: function render() { var _this = this; - var _props = this.props; - var mapHolderRef = _props.mapHolderRef; - var children = _props.children; + var children = this.props.children; + var mapHolderRef = this.context.mapHolderRef; if (_react.Children.count(children) > 0) { return _react2['default'].createElement( @@ -204,12 +203,17 @@ var MarkerClustererCreator = (function (_Component) { return markerClusterer; } }, { - key: 'PropTypes', + key: 'propTypes', value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2['default']).isRequired, markerClusterer: _react.PropTypes.object.isRequired }, enumerable: true + }, { + key: 'contextTypes', + value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2['default']) + }, + enumerable: true }]); var _MarkerClustererCreator = MarkerClustererCreator; diff --git a/lib/creators/CircleCreator.js b/lib/creators/CircleCreator.js index 61310364..401b059b 100644 --- a/lib/creators/CircleCreator.js +++ b/lib/creators/CircleCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var circleControlledPropTypes = { // NOTICE!!!!!! // @@ -125,7 +121,6 @@ var CircleCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, circle: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/DirectionsRendererCreator.js b/lib/creators/DirectionsRendererCreator.js index 7a31be64..c93bc533 100644 --- a/lib/creators/DirectionsRendererCreator.js +++ b/lib/creators/DirectionsRendererCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var directionsRendererControlledPropTypes = { // NOTICE!!!!!! // @@ -128,7 +124,6 @@ var DirectionsRendererCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, directionsRenderer: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/DrawingManagerCreator.js b/lib/creators/DrawingManagerCreator.js index 7c0148fe..1ca74a34 100644 --- a/lib/creators/DrawingManagerCreator.js +++ b/lib/creators/DrawingManagerCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var drawingManagerControlledPropTypes = { // NOTICE!!!!!! // @@ -109,7 +105,6 @@ var DrawingManagerCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, drawingManager: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/GoogleMapHolder.js b/lib/creators/GoogleMapHolder.js index 3dac5af4..75ea8068 100644 --- a/lib/creators/GoogleMapHolder.js +++ b/lib/creators/GoogleMapHolder.js @@ -105,6 +105,11 @@ var GoogleMapHolder = (function (_Component) { } _createClass(GoogleMapHolder, [{ + key: "getChildContext", + value: function getChildContext() { + return { mapHolderRef: this }; + } + }, { key: "getMap", value: function getMap() { return this.props.map; @@ -112,20 +117,10 @@ var GoogleMapHolder = (function (_Component) { }, { key: "render", value: function render() { - var _this = this; - return _react2["default"].createElement( "div", null, - _react.Children.map(this.props.children, function (childElement) { - if (_react2["default"].isValidElement(childElement)) { - return _react2["default"].cloneElement(childElement, { - mapHolderRef: _this - }); - } else { - return childElement; - } - }) + this.props.children ); } }], [{ @@ -141,6 +136,12 @@ var GoogleMapHolder = (function (_Component) { map: _react.PropTypes.object.isRequired }, enumerable: true + }, { + key: "childContextTypes", + value: { + mapHolderRef: _react.PropTypes.instanceOf(GoogleMapHolder) + }, + enumerable: true }]); var _GoogleMapHolder = GoogleMapHolder; diff --git a/lib/creators/InfoWindowCreator.js b/lib/creators/InfoWindowCreator.js index da2298cc..d3b2f93b 100644 --- a/lib/creators/InfoWindowCreator.js +++ b/lib/creators/InfoWindowCreator.js @@ -42,10 +42,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var infoWindowControlledPropTypes = { // NOTICE!!!!!! // @@ -133,7 +129,6 @@ var InfoWindowCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, infoWindow: _react.PropTypes.object.isRequired, anchorHolderRef: _react.PropTypes.object }, diff --git a/lib/creators/MarkerCreator.js b/lib/creators/MarkerCreator.js index 3bd558bd..42b79ed8 100644 --- a/lib/creators/MarkerCreator.js +++ b/lib/creators/MarkerCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var markerControlledPropTypes = { // NOTICE!!!!!! // @@ -195,7 +191,6 @@ var MarkerCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, marker: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/OverlayViewCreator.js b/lib/creators/OverlayViewCreator.js index 360a522a..bf4880fc 100644 --- a/lib/creators/OverlayViewCreator.js +++ b/lib/creators/OverlayViewCreator.js @@ -32,10 +32,6 @@ var _utilsComposeOptions = require("../utils/composeOptions"); var _utilsComposeOptions2 = _interopRequireDefault(_utilsComposeOptions); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var overlayViewControlledPropTypes = { // CustomProps mapPaneName: _react.PropTypes.string, @@ -219,7 +215,6 @@ var OverlayViewCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, mapPaneName: _react.PropTypes.string, overlayView: _react.PropTypes.object.isRequired }, diff --git a/lib/creators/PolygonCreator.js b/lib/creators/PolygonCreator.js index 39a96628..39429e2f 100644 --- a/lib/creators/PolygonCreator.js +++ b/lib/creators/PolygonCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var polygonControlledPropTypes = { // NOTICE!!!!!! // @@ -125,7 +121,6 @@ var PolygonCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, polygon: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/PolylineCreator.js b/lib/creators/PolylineCreator.js index c68e34b1..396cf056 100644 --- a/lib/creators/PolylineCreator.js +++ b/lib/creators/PolylineCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var polylineControlledPropTypes = { // NOTICE!!!!!! // @@ -121,7 +117,6 @@ var PolylineCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, polyline: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/RectangleCreator.js b/lib/creators/RectangleCreator.js index 93de4e13..2a10a280 100644 --- a/lib/creators/RectangleCreator.js +++ b/lib/creators/RectangleCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var rectangleControlledPropTypes = { // NOTICE!!!!!! // @@ -121,7 +117,6 @@ var RectangleCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, rectangle: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/_SkeletonCreator.js b/lib/creators/_SkeletonCreator.js index 19b772c3..31de53b9 100644 --- a/lib/creators/_SkeletonCreator.js +++ b/lib/creators/_SkeletonCreator.js @@ -38,10 +38,6 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); -var _GoogleMapHolder = require("./GoogleMapHolder"); - -var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); - var skeletonControlledPropTypes = { // NOTICE!!!!!! // @@ -115,7 +111,6 @@ var SkeletonCreator = (function (_Component) { }, { key: "propTypes", value: { - mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, skeleton: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/src/Circle.js b/src/Circle.js index 4366d0ae..fbfb0f22 100644 --- a/src/Circle.js +++ b/src/Circle.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { circleEventPropTypes, } from "./creators/CircleCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + export default class Circle extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -24,6 +27,10 @@ export default class Circle extends Component { ...circleEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle @@ -50,10 +57,15 @@ export default class Circle extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const circle = CircleCreator._createCircle(this.props); + const circle = CircleCreator._createCircle({ + ...this.props, + mapHolderRef, + }); this.setState({ circle }); } diff --git a/src/DirectionsRenderer.js b/src/DirectionsRenderer.js index 6329a6dd..a15f10a1 100644 --- a/src/DirectionsRenderer.js +++ b/src/DirectionsRenderer.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { directionsRendererEventPropTypes, } from "./creators/DirectionsRendererCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + /* * Original author: @alexishevia * Original PR: https://github.com/tomchentw/react-google-maps/pull/22 @@ -28,6 +31,10 @@ export default class DirectionsRenderer extends Component { ...directionsRendererEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer @@ -46,10 +53,15 @@ export default class DirectionsRenderer extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer(this.props); + const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer({ + ...this.props, + mapHolderRef, + }); this.setState({ directionsRenderer }); } diff --git a/src/DrawingManager.js b/src/DrawingManager.js index 04e4d574..99539acd 100644 --- a/src/DrawingManager.js +++ b/src/DrawingManager.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { drawingManagerEventPropTypes, } from "./creators/DrawingManagerCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + /* * Original author: @idolize * Original PR: https://github.com/tomchentw/react-google-maps/pull/46 @@ -28,6 +31,10 @@ export default class DrawingManager extends Component { ...drawingManagerEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager @@ -42,10 +49,15 @@ export default class DrawingManager extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const drawingManager = DrawingManagerCreator._createDrawingManager(this.props); + const drawingManager = DrawingManagerCreator._createDrawingManager({ + ...this.props, + mapHolderRef, + }); this.setState({ drawingManager }); } diff --git a/src/InfoWindow.js b/src/InfoWindow.js index cab427cc..50e43aaa 100644 --- a/src/InfoWindow.js +++ b/src/InfoWindow.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { infoWindowEventPropTypes, } from "./creators/InfoWindowCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + export default class InfoWindow extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -24,6 +27,10 @@ export default class InfoWindow extends Component { ...infoWindowEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow @@ -42,10 +49,15 @@ export default class InfoWindow extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const infoWindow = InfoWindowCreator._createInfoWindow(this.props); + const infoWindow = InfoWindowCreator._createInfoWindow({ + ...this.props, + mapHolderRef, + }); this.setState({ infoWindow }); } diff --git a/src/KmlLayer.js b/src/KmlLayer.js index 0292d6a9..54907795 100644 --- a/src/KmlLayer.js +++ b/src/KmlLayer.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { kmlLayerEventPropTypes, } from "./creators/KmlLayerCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + export default class KmlLayer extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -24,6 +27,10 @@ export default class KmlLayer extends Component { ...kmlLayerEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayer @@ -46,18 +53,24 @@ export default class KmlLayer extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const kmlLayer = KmlLayerCreator._createKmlLayer(this.props); + const kmlLayer = KmlLayerCreator._createKmlLayer({ + ...this.props, + mapHolderRef, + }); this.setState({ kmlLayer }); } render() { + const { mapHolderRef } = this.context; if (this.state.kmlLayer) { return ( - + {this.props.children} ); diff --git a/src/Marker.js b/src/Marker.js index 0d641003..05569b8e 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { markerEventPropTypes, } from "./creators/MarkerCreator"; +import GoogleMapHolder from "./creators/GoogleMapHolder"; + export default class Marker extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -24,6 +27,10 @@ export default class Marker extends Component { ...markerEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker @@ -64,10 +71,14 @@ export default class Marker extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; if (!canUseDOM) { return; } - const marker = MarkerCreator._createMarker(this.props); + const marker = MarkerCreator._createMarker({ + ...this.props, + mapHolderRef, + }); this.setState({ marker }); } diff --git a/src/OverlayView.js b/src/OverlayView.js index 26bd7e48..a054e786 100644 --- a/src/OverlayView.js +++ b/src/OverlayView.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -13,6 +14,8 @@ import { overlayViewControlledPropTypes, } from "./creators/OverlayViewCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + /* * Original author: @petebrowne * Original PR: https://github.com/tomchentw/react-google-maps/pull/63 @@ -32,6 +35,10 @@ export default class OverlayView extends Component { ...overlayViewControlledPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + static defaultProps = { mapPaneName: OverlayView.OVERLAY_LAYER, } @@ -61,9 +68,10 @@ export default class OverlayView extends Component { } render() { + const { mapHolderRef } = this.context; if (this.state.overlayView) { return ( - + {this.props.children} ); diff --git a/src/Polygon.js b/src/Polygon.js index b1abf33d..1154050a 100644 --- a/src/Polygon.js +++ b/src/Polygon.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { polygonEventPropTypes, } from "./creators/PolygonCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + export default class Polygon extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -23,6 +26,9 @@ export default class Polygon extends Component { // Event [onEventName] ...polygonEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } // Public APIs // @@ -46,10 +52,15 @@ export default class Polygon extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const polygon = PolygonCreator._createPolygon(this.props); + const polygon = PolygonCreator._createPolygon({ + ...this.props, + mapHolderRef, + }); this.setState({ polygon }); } diff --git a/src/Polyline.js b/src/Polyline.js index 28adc81d..c84e9ec1 100644 --- a/src/Polyline.js +++ b/src/Polyline.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { polylineEventPropTypes, } from "./creators/PolylineCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + export default class Polyline extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -24,6 +27,10 @@ export default class Polyline extends Component { ...polylineEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline @@ -44,10 +51,15 @@ export default class Polyline extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const polyline = PolylineCreator._createPolyline(this.props); + const polyline = PolylineCreator._createPolyline({ + ...this.props, + mapHolderRef, + }); this.setState({ polyline }); } diff --git a/src/Rectangle.js b/src/Rectangle.js index e467ed64..2e576630 100644 --- a/src/Rectangle.js +++ b/src/Rectangle.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { rectangleEventPropTypes, } from "./creators/RectangleCreator"; +import { default as GoogleMapHolder } from "./creators/GoogleMapHolder"; + /* * Original author: @alistairjcbrown * Original PR: https://github.com/tomchentw/react-google-maps/pull/80 @@ -28,6 +31,10 @@ export default class Rectangle extends Component { ...rectangleEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle @@ -48,10 +55,15 @@ export default class Rectangle extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; + if (!canUseDOM) { return; } - const rectangle = RectangleCreator._createRectangle(this.props); + const rectangle = RectangleCreator._createRectangle({ + ...this.props, + mapHolderRef, + }); this.setState({ rectangle }); } diff --git a/src/SearchBox.js b/src/SearchBox.js index 3008c2d6..687322c3 100644 --- a/src/SearchBox.js +++ b/src/SearchBox.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { searchBoxEventPropTypes, } from "./creators/SearchBoxCreator"; +import GoogleMapHolder from "./creators/GoogleMapHolder"; + /* * Original author: @eyebraus * Original PR: https://github.com/tomchentw/react-google-maps/pull/110 @@ -28,6 +31,10 @@ export default class SearchBox extends Component { ...searchBoxEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference#SearchBox @@ -46,7 +53,7 @@ export default class SearchBox extends Component { if (!canUseDOM) { return; } - const { mapHolderRef, classes, style, placeholder, ...searchBoxProps } = this.props; + const { classes, style, placeholder, ...searchBoxProps } = this.props; // Cannot create input via component - Google Maps will mess with React's internal state by detaching/attaching. // Allow developers to style the "hidden element" via inputClasses. @@ -70,7 +77,8 @@ export default class SearchBox extends Component { } render() { - const { mapHolderRef, controlPosition } = this.props; + const { controlPosition } = this.props; + const { mapHolderRef } = this.context; return this.state.searchBox ? ( diff --git a/src/_Skeleton.js b/src/_Skeleton.js index 7c0fdbba..9efe3bd1 100644 --- a/src/_Skeleton.js +++ b/src/_Skeleton.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from "react"; import { @@ -14,6 +15,8 @@ import { skeletonEventPropTypes, } from "./creators/SkeletonCreator"; +import GoogleMapHolder from "./creators/GoogleMapHolder"; + export default class Skeleton extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -24,6 +27,10 @@ export default class Skeleton extends Component { ...skeletonEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // // https://developers.google.com/maps/documentation/javascript/3.exp/reference @@ -38,10 +45,14 @@ export default class Skeleton extends Component { } componentWillMount() { + const { mapHolderRef } = this.context; if (!canUseDOM) { return; } - const skeleton = SkeletonCreator._createSkeleton(this.props); + const skeleton = SkeletonCreator._createSkeleton({ + ...this.props, + mapHolderRef, + }); this.setState({ skeleton }); } diff --git a/src/addons/MarkerClusterer.js b/src/addons/MarkerClusterer.js index e7709215..c1431487 100644 --- a/src/addons/MarkerClusterer.js +++ b/src/addons/MarkerClusterer.js @@ -1,6 +1,7 @@ import { default as React, Component, + PropTypes, } from 'react'; import { @@ -14,6 +15,8 @@ import { markerClusterEventPropTypes, } from './addonsCreators/MarkerClustererCreator'; +import { default as GoogleMapHolder } from "../creators/GoogleMapHolder"; + export default class MarkerClusterer extends Component { static propTypes = { ...markerClusterDefaultPropTypes, @@ -21,6 +24,10 @@ export default class MarkerClusterer extends Component { ...markerClusterEventPropTypes, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + // Public APIs // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html#events getAverageCenter() { return this.state.markerClusterer.getAverageCenter(); } @@ -81,7 +88,8 @@ export default class MarkerClusterer extends Component { return; } - const { mapHolderRef, ...markerClustererProps } = this.props; + const { ...markerClustererProps } = this.props; + const { mapHolderRef } = this.context; const markerClusterer = MarkerClustererCreator._createMarkerClusterer(mapHolderRef, markerClustererProps); this.setState({ markerClusterer }); diff --git a/src/addons/addonsCreators/InfoBoxCreator.js b/src/addons/addonsCreators/InfoBoxCreator.js index fc4ad1ca..16f439e4 100644 --- a/src/addons/addonsCreators/InfoBoxCreator.js +++ b/src/addons/addonsCreators/InfoBoxCreator.js @@ -11,8 +11,6 @@ import { default as composeOptions } from "../../utils/composeOptions"; import { default as setContentForOptionalReactElement } from "../../utils/setContentForOptionalReactElement"; import { default as componentLifecycleDecorator } from "../../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "../../creators/GoogleMapHolder"; - export const infoBoxControlledPropTypes = { // NOTICE!!!!!! // @@ -49,7 +47,6 @@ export const infoBoxEventPropTypes = eventPropTypes; export default class InfoBoxCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, infoBox: PropTypes.object.isRequired, } diff --git a/src/addons/addonsCreators/MarkerClustererCreator.js b/src/addons/addonsCreators/MarkerClustererCreator.js index 0ed29bdf..b728f6be 100644 --- a/src/addons/addonsCreators/MarkerClustererCreator.js +++ b/src/addons/addonsCreators/MarkerClustererCreator.js @@ -73,11 +73,15 @@ export const markerClustererEventPropTypes = eventPropTypes; updaters: markerClustererUpdaters, }) export default class MarkerClustererCreator extends Component { - static PropTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, + + static propTypes = { markerClusterer: PropTypes.object.isRequired, } + static contextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + static _createMarkerClusterer(mapHolderRef, markerClustererProps) { const GoogleMarkerClusterer = require(`marker-clusterer-plus`); @@ -108,7 +112,8 @@ export default class MarkerClustererCreator extends Component { } render() { - const { mapHolderRef, children } = this.props; + const { children } = this.props; + const { mapHolderRef } = this.context; if (Children.count(children) > 0) { return ( diff --git a/src/creators/CircleCreator.js b/src/creators/CircleCreator.js index a4d65419..b8ea599a 100644 --- a/src/creators/CircleCreator.js +++ b/src/creators/CircleCreator.js @@ -10,8 +10,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const circleControlledPropTypes = { // NOTICE!!!!!! // @@ -51,7 +49,6 @@ export const circleEventPropTypes = eventPropTypes; export default class CircleCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, circle: PropTypes.object.isRequired, } diff --git a/src/creators/DirectionsRendererCreator.js b/src/creators/DirectionsRendererCreator.js index 4c0ecb49..2b5e1aae 100644 --- a/src/creators/DirectionsRendererCreator.js +++ b/src/creators/DirectionsRendererCreator.js @@ -11,8 +11,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const directionsRendererControlledPropTypes = { // NOTICE!!!!!! // @@ -48,7 +46,6 @@ export const directionsRendererEventPropTypes = eventPropTypes; export default class DirectionsRendererCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, directionsRenderer: PropTypes.object.isRequired, } diff --git a/src/creators/DrawingManagerCreator.js b/src/creators/DrawingManagerCreator.js index 82e3473e..b8ef22d8 100644 --- a/src/creators/DrawingManagerCreator.js +++ b/src/creators/DrawingManagerCreator.js @@ -10,8 +10,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const drawingManagerControlledPropTypes = { // NOTICE!!!!!! // @@ -43,7 +41,6 @@ export const drawingManagerEventPropTypes = eventPropTypes; export default class DrawingManagerCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, drawingManager: PropTypes.object.isRequired, } diff --git a/src/creators/GoogleMapHolder.js b/src/creators/GoogleMapHolder.js index 16c4425e..f870794f 100644 --- a/src/creators/GoogleMapHolder.js +++ b/src/creators/GoogleMapHolder.js @@ -2,7 +2,6 @@ import { default as React, PropTypes, Component, - Children, } from "react"; import { @@ -69,6 +68,14 @@ export default class GoogleMapHolder extends Component { return new google.maps.Map(domEl, composeOptions(mapProps, mapControlledPropTypes)); } + static childContextTypes = { + mapHolderRef: PropTypes.instanceOf(GoogleMapHolder), + } + + getChildContext() { + return { mapHolderRef: this }; + } + getMap() { return this.props.map; } @@ -76,15 +83,7 @@ export default class GoogleMapHolder extends Component { render() { return (
- {Children.map(this.props.children, (childElement) => { - if (React.isValidElement(childElement)) { - return React.cloneElement(childElement, { - mapHolderRef: this, - }); - } else { - return childElement; - } - })} + {this.props.children}
); } diff --git a/src/creators/InfoWindowCreator.js b/src/creators/InfoWindowCreator.js index 6fcdebef..d5b58c74 100644 --- a/src/creators/InfoWindowCreator.js +++ b/src/creators/InfoWindowCreator.js @@ -11,8 +11,6 @@ import { default as composeOptions } from "../utils/composeOptions"; import { default as setContentForOptionalReactElement } from "../utils/setContentForOptionalReactElement"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const infoWindowControlledPropTypes = { // NOTICE!!!!!! // @@ -49,7 +47,6 @@ export const infoWindowEventPropTypes = eventPropTypes; export default class InfoWindowCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, infoWindow: PropTypes.object.isRequired, anchorHolderRef: PropTypes.object, } diff --git a/src/creators/MarkerCreator.js b/src/creators/MarkerCreator.js index 64bead69..b941073c 100644 --- a/src/creators/MarkerCreator.js +++ b/src/creators/MarkerCreator.js @@ -11,8 +11,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const markerControlledPropTypes = { // NOTICE!!!!!! // @@ -70,7 +68,6 @@ export const markerEventPropTypes = eventPropTypes; export default class MarkerCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, marker: PropTypes.object.isRequired, } diff --git a/src/creators/OverlayViewCreator.js b/src/creators/OverlayViewCreator.js index 2fa71cce..948fb797 100644 --- a/src/creators/OverlayViewCreator.js +++ b/src/creators/OverlayViewCreator.js @@ -15,8 +15,6 @@ import { default as invariant } from "invariant"; import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const overlayViewControlledPropTypes = { // CustomProps mapPaneName: PropTypes.string, @@ -38,7 +36,6 @@ export const overlayViewDefaultPropTypes = defaultPropsCreator(overlayViewContro export default class OverlayViewCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, mapPaneName: PropTypes.string, overlayView: PropTypes.object.isRequired, } diff --git a/src/creators/PolygonCreator.js b/src/creators/PolygonCreator.js index 22a1c8a3..34b79cdb 100644 --- a/src/creators/PolygonCreator.js +++ b/src/creators/PolygonCreator.js @@ -10,8 +10,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const polygonControlledPropTypes = { // NOTICE!!!!!! // @@ -51,7 +49,6 @@ export const polygonEventPropTypes = eventPropTypes; export default class PolygonCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, polygon: PropTypes.object.isRequired, } diff --git a/src/creators/PolylineCreator.js b/src/creators/PolylineCreator.js index 91793138..2e82a2f6 100644 --- a/src/creators/PolylineCreator.js +++ b/src/creators/PolylineCreator.js @@ -10,8 +10,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const polylineControlledPropTypes = { // NOTICE!!!!!! // @@ -49,7 +47,6 @@ export const polylineEventPropTypes = eventPropTypes; export default class PolylineCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, polyline: PropTypes.object.isRequired, } diff --git a/src/creators/RectangleCreator.js b/src/creators/RectangleCreator.js index 3f3d425e..2dbd6683 100644 --- a/src/creators/RectangleCreator.js +++ b/src/creators/RectangleCreator.js @@ -10,8 +10,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const rectangleControlledPropTypes = { // NOTICE!!!!!! // @@ -49,7 +47,6 @@ export const rectangleEventPropTypes = eventPropTypes; export default class RectangleCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, rectangle: PropTypes.object.isRequired, } diff --git a/src/creators/_SkeletonCreator.js b/src/creators/_SkeletonCreator.js index 3e4847c8..5f4f9291 100644 --- a/src/creators/_SkeletonCreator.js +++ b/src/creators/_SkeletonCreator.js @@ -11,8 +11,6 @@ import { default as defaultPropsCreator } from "../utils/defaultPropsCreator"; import { default as composeOptions } from "../utils/composeOptions"; import { default as componentLifecycleDecorator } from "../utils/componentLifecycleDecorator"; -import { default as GoogleMapHolder } from "./GoogleMapHolder"; - export const skeletonControlledPropTypes = { // NOTICE!!!!!! // @@ -42,7 +40,6 @@ export const skeletonEventPropTypes = eventPropTypes; export default class SkeletonCreator extends Component { static propTypes = { - mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired, skeleton: PropTypes.object.isRequired, } From 7a1a49ebdfa5eb8cda5acd12400cdd878978873e Mon Sep 17 00:00:00 2001 From: Simone Potenza Date: Tue, 8 Mar 2016 18:33:44 +0100 Subject: [PATCH 2/9] Added shouldComponentUpdate that returns false to Marker component. This incresases the performance of the map, when rendering many markers --- lib/Marker.js | 5 +++++ src/Marker.js | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/lib/Marker.js b/lib/Marker.js index 0d7637fd..4bb0daef 100644 --- a/lib/Marker.js +++ b/lib/Marker.js @@ -154,6 +154,11 @@ var Marker = (function (_Component) { } } } + }, { + key: "shouldComponentUpdate", + value: function shouldComponentUpdate() { + return false; + } }, { key: "render", value: function render() { diff --git a/src/Marker.js b/src/Marker.js index 05569b8e..0b71fdc9 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -99,6 +99,10 @@ export default class Marker extends Component { } } + shouldComponentUpdate() { + return false; + } + render() { if (this.state.marker) { return ( From d60030a31f557c9353bd3dfa4cea181df1bb1eef Mon Sep 17 00:00:00 2001 From: "Vincent.Profeta" Date: Mon, 16 May 2016 08:43:32 -0500 Subject: [PATCH 3/9] isSame marker --- package.json | 1 + src/Marker.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 753fd460..cc29449d 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "can-use-dom": "^0.1.0", "google-maps-infobox": "^1.1.13", "invariant": "^2.1.1", + "lodash": "^4.12.0", "lodash.isequal": "^3.0.4", "marker-clusterer-plus": "^2.1.2", "react-prop-types-element-of-type": "^2.1.0", diff --git a/src/Marker.js b/src/Marker.js index 0b71fdc9..ee91f334 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -17,6 +17,8 @@ import { import GoogleMapHolder from "./creators/GoogleMapHolder"; +import _ from 'lodash'; + export default class Marker extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount @@ -100,7 +102,7 @@ export default class Marker extends Component { } shouldComponentUpdate() { - return false; + return !_.isEqual(this.props.icon, nextProps.icon); } render() { From 8c69d2c3a1ba07cf7052a2e2b97243c18e00a155 Mon Sep 17 00:00:00 2001 From: "Vincent.Profeta" Date: Mon, 16 May 2016 08:48:46 -0500 Subject: [PATCH 4/9] build --- lib/Marker.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/Marker.js b/lib/Marker.js index 4bb0daef..5b4210b9 100644 --- a/lib/Marker.js +++ b/lib/Marker.js @@ -32,6 +32,10 @@ var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); +var _lodash = require('lodash'); + +var _lodash2 = _interopRequireDefault(_lodash); + var Marker = (function (_Component) { _inherits(Marker, _Component); @@ -157,7 +161,7 @@ var Marker = (function (_Component) { }, { key: "shouldComponentUpdate", value: function shouldComponentUpdate() { - return false; + return !_lodash2["default"].isEqual(this.props.icon, nextProps.icon); } }, { key: "render", From 5c80d0271694f6c41fe61580ef6bd95d44730f93 Mon Sep 17 00:00:00 2001 From: "Vincent.Profeta" Date: Mon, 16 May 2016 23:41:18 -0500 Subject: [PATCH 5/9] update --- lib/Marker.js | 2 +- src/Marker.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/Marker.js b/lib/Marker.js index 5b4210b9..a6e7d1d6 100644 --- a/lib/Marker.js +++ b/lib/Marker.js @@ -160,7 +160,7 @@ var Marker = (function (_Component) { } }, { key: "shouldComponentUpdate", - value: function shouldComponentUpdate() { + value: function shouldComponentUpdate(nextProps, nextState) { return !_lodash2["default"].isEqual(this.props.icon, nextProps.icon); } }, { diff --git a/src/Marker.js b/src/Marker.js index ee91f334..c3a23a6e 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -101,7 +101,7 @@ export default class Marker extends Component { } } - shouldComponentUpdate() { + shouldComponentUpdate(nextProps, nextState) { return !_.isEqual(this.props.icon, nextProps.icon); } From 9713c42d29c5a866610506420d4c7da3e6cf9d9b Mon Sep 17 00:00:00 2001 From: Simone Potenza Date: Sun, 29 May 2016 12:33:22 +0200 Subject: [PATCH 6/9] Reverted lib fodler to commit 5e672b92f3e47861126349a5691c33b9b1d1eb88 --- lib/Circle.js | 16 +----------- lib/DirectionsRenderer.js | 16 +----------- lib/DrawingManager.js | 16 +----------- lib/InfoWindow.js | 16 +----------- lib/KmlLayer.js | 20 ++------------- lib/Marker.js | 25 +------------------ lib/OverlayView.js | 14 +---------- lib/Polygon.js | 16 +----------- lib/Polyline.js | 16 +----------- lib/Rectangle.js | 16 +----------- lib/SearchBox.js | 18 ++++--------- lib/_Skeleton.js | 16 +----------- lib/addons/MarkerClusterer.js | 15 +++-------- lib/addons/addonsCreators/InfoBoxCreator.js | 5 ++++ .../addonsCreators/MarkerClustererCreator.js | 14 ++++------- lib/creators/CircleCreator.js | 5 ++++ lib/creators/DirectionsRendererCreator.js | 5 ++++ lib/creators/DrawingManagerCreator.js | 5 ++++ lib/creators/GoogleMapHolder.js | 23 ++++++++--------- lib/creators/InfoWindowCreator.js | 5 ++++ lib/creators/MarkerCreator.js | 5 ++++ lib/creators/OverlayViewCreator.js | 5 ++++ lib/creators/PolygonCreator.js | 5 ++++ lib/creators/PolylineCreator.js | 5 ++++ lib/creators/RectangleCreator.js | 5 ++++ lib/creators/_SkeletonCreator.js | 5 ++++ 26 files changed, 91 insertions(+), 221 deletions(-) diff --git a/lib/Circle.js b/lib/Circle.js index 3f63a670..7df50813 100644 --- a/lib/Circle.js +++ b/lib/Circle.js @@ -28,10 +28,6 @@ var _creatorsCircleCreator = require("./creators/CircleCreator"); var _creatorsCircleCreator2 = _interopRequireDefault(_creatorsCircleCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var Circle = (function (_Component) { _inherits(Circle, _Component); @@ -92,14 +88,10 @@ var Circle = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var circle = _creatorsCircleCreator2["default"]._createCircle(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var circle = _creatorsCircleCreator2["default"]._createCircle(this.props); this.setState({ circle: circle }); } @@ -120,12 +112,6 @@ var Circle = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsCircleCreator.circleDefaultPropTypes, _creatorsCircleCreator.circleControlledPropTypes, _creatorsCircleCreator.circleEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return Circle; diff --git a/lib/DirectionsRenderer.js b/lib/DirectionsRenderer.js index 23793bea..83e26ce1 100644 --- a/lib/DirectionsRenderer.js +++ b/lib/DirectionsRenderer.js @@ -28,10 +28,6 @@ var _creatorsDirectionsRendererCreator = require("./creators/DirectionsRendererC var _creatorsDirectionsRendererCreator2 = _interopRequireDefault(_creatorsDirectionsRendererCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - /* * Original author: @alexishevia * Original PR: https://github.com/tomchentw/react-google-maps/pull/22 @@ -77,14 +73,10 @@ var DirectionsRenderer = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var directionsRenderer = _creatorsDirectionsRendererCreator2["default"]._createDirectionsRenderer(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var directionsRenderer = _creatorsDirectionsRendererCreator2["default"]._createDirectionsRenderer(this.props); this.setState({ directionsRenderer: directionsRenderer }); } @@ -105,12 +97,6 @@ var DirectionsRenderer = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsDirectionsRendererCreator.directionsRendererDefaultPropTypes, _creatorsDirectionsRendererCreator.directionsRendererControlledPropTypes, _creatorsDirectionsRendererCreator.directionsRendererEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return DirectionsRenderer; diff --git a/lib/DrawingManager.js b/lib/DrawingManager.js index 85815448..b31cabc8 100644 --- a/lib/DrawingManager.js +++ b/lib/DrawingManager.js @@ -28,10 +28,6 @@ var _creatorsDrawingManagerCreator = require("./creators/DrawingManagerCreator") var _creatorsDrawingManagerCreator2 = _interopRequireDefault(_creatorsDrawingManagerCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - /* * Original author: @idolize * Original PR: https://github.com/tomchentw/react-google-maps/pull/46 @@ -67,14 +63,10 @@ var DrawingManager = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var drawingManager = _creatorsDrawingManagerCreator2["default"]._createDrawingManager(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var drawingManager = _creatorsDrawingManagerCreator2["default"]._createDrawingManager(this.props); this.setState({ drawingManager: drawingManager }); } @@ -95,12 +87,6 @@ var DrawingManager = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsDrawingManagerCreator.drawingManagerDefaultPropTypes, _creatorsDrawingManagerCreator.drawingManagerControlledPropTypes, _creatorsDrawingManagerCreator.drawingManagerEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return DrawingManager; diff --git a/lib/InfoWindow.js b/lib/InfoWindow.js index db70297a..112c802c 100644 --- a/lib/InfoWindow.js +++ b/lib/InfoWindow.js @@ -28,10 +28,6 @@ var _creatorsInfoWindowCreator = require("./creators/InfoWindowCreator"); var _creatorsInfoWindowCreator2 = _interopRequireDefault(_creatorsInfoWindowCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var InfoWindow = (function (_Component) { _inherits(InfoWindow, _Component); @@ -70,14 +66,10 @@ var InfoWindow = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var infoWindow = _creatorsInfoWindowCreator2["default"]._createInfoWindow(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var infoWindow = _creatorsInfoWindowCreator2["default"]._createInfoWindow(this.props); this.setState({ infoWindow: infoWindow }); } @@ -98,12 +90,6 @@ var InfoWindow = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsInfoWindowCreator.infoWindowDefaultPropTypes, _creatorsInfoWindowCreator.infoWindowControlledPropTypes, _creatorsInfoWindowCreator.infoWindowEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return InfoWindow; diff --git a/lib/KmlLayer.js b/lib/KmlLayer.js index b1063736..7b1a3200 100644 --- a/lib/KmlLayer.js +++ b/lib/KmlLayer.js @@ -28,10 +28,6 @@ var _creatorsKmlLayerCreator = require("./creators/KmlLayerCreator"); var _creatorsKmlLayerCreator2 = _interopRequireDefault(_creatorsKmlLayerCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var KmlLayer = (function (_Component) { _inherits(KmlLayer, _Component); @@ -82,26 +78,20 @@ var KmlLayer = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var kmlLayer = _creatorsKmlLayerCreator2["default"]._createKmlLayer(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var kmlLayer = _creatorsKmlLayerCreator2["default"]._createKmlLayer(this.props); this.setState({ kmlLayer: kmlLayer }); } }, { key: "render", value: function render() { - var mapHolderRef = this.context.mapHolderRef; - if (this.state.kmlLayer) { return _react2["default"].createElement( _creatorsKmlLayerCreator2["default"], - _extends({ mapHolderRef: mapHolderRef, kmlLayer: this.state.kmlLayer }, this.props), + _extends({ kmlLayer: this.state.kmlLayer }, this.props), this.props.children ); } else { @@ -112,12 +102,6 @@ var KmlLayer = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsKmlLayerCreator.kmlLayerDefaultPropTypes, _creatorsKmlLayerCreator.kmlLayerControlledPropTypes, _creatorsKmlLayerCreator.kmlLayerEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return KmlLayer; diff --git a/lib/Marker.js b/lib/Marker.js index a6e7d1d6..862cd40d 100644 --- a/lib/Marker.js +++ b/lib/Marker.js @@ -28,14 +28,6 @@ var _creatorsMarkerCreator = require("./creators/MarkerCreator"); var _creatorsMarkerCreator2 = _interopRequireDefault(_creatorsMarkerCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - -var _lodash = require('lodash'); - -var _lodash2 = _interopRequireDefault(_lodash); - var Marker = (function (_Component) { _inherits(Marker, _Component); @@ -131,14 +123,10 @@ var Marker = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var marker = _creatorsMarkerCreator2["default"]._createMarker(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var marker = _creatorsMarkerCreator2["default"]._createMarker(this.props); this.setState({ marker: marker }); } @@ -158,11 +146,6 @@ var Marker = (function (_Component) { } } } - }, { - key: "shouldComponentUpdate", - value: function shouldComponentUpdate(nextProps, nextState) { - return !_lodash2["default"].isEqual(this.props.icon, nextProps.icon); - } }, { key: "render", value: function render() { @@ -180,12 +163,6 @@ var Marker = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsMarkerCreator.markerDefaultPropTypes, _creatorsMarkerCreator.markerControlledPropTypes, _creatorsMarkerCreator.markerEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return Marker; diff --git a/lib/OverlayView.js b/lib/OverlayView.js index 682e7409..28e1d650 100644 --- a/lib/OverlayView.js +++ b/lib/OverlayView.js @@ -28,10 +28,6 @@ var _creatorsOverlayViewCreator = require("./creators/OverlayViewCreator"); var _creatorsOverlayViewCreator2 = _interopRequireDefault(_creatorsOverlayViewCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - /* * Original author: @petebrowne * Original PR: https://github.com/tomchentw/react-google-maps/pull/63 @@ -82,12 +78,10 @@ var OverlayView = (function (_Component) { }, { key: "render", value: function render() { - var mapHolderRef = this.context.mapHolderRef; - if (this.state.overlayView) { return _react2["default"].createElement( _creatorsOverlayViewCreator2["default"], - _extends({ mapHolderRef: mapHolderRef, overlayView: this.state.overlayView }, this.props), + _extends({ overlayView: this.state.overlayView }, this.props), this.props.children ); } else { @@ -118,12 +112,6 @@ var OverlayView = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsOverlayViewCreator.overlayViewDefaultPropTypes, _creatorsOverlayViewCreator.overlayViewControlledPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }, { key: "defaultProps", value: { diff --git a/lib/Polygon.js b/lib/Polygon.js index 3dba1593..7bd8be1e 100644 --- a/lib/Polygon.js +++ b/lib/Polygon.js @@ -28,10 +28,6 @@ var _creatorsPolygonCreator = require("./creators/PolygonCreator"); var _creatorsPolygonCreator2 = _interopRequireDefault(_creatorsPolygonCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var Polygon = (function (_Component) { _inherits(Polygon, _Component); @@ -82,14 +78,10 @@ var Polygon = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var polygon = _creatorsPolygonCreator2["default"]._createPolygon(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var polygon = _creatorsPolygonCreator2["default"]._createPolygon(this.props); this.setState({ polygon: polygon }); } @@ -110,12 +102,6 @@ var Polygon = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsPolygonCreator.polygonDefaultPropTypes, _creatorsPolygonCreator.polygonControlledPropTypes, _creatorsPolygonCreator.polygonEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return Polygon; diff --git a/lib/Polyline.js b/lib/Polyline.js index 9ebfa8a7..a6425a0f 100644 --- a/lib/Polyline.js +++ b/lib/Polyline.js @@ -28,10 +28,6 @@ var _creatorsPolylineCreator = require("./creators/PolylineCreator"); var _creatorsPolylineCreator2 = _interopRequireDefault(_creatorsPolylineCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var Polyline = (function (_Component) { _inherits(Polyline, _Component); @@ -77,14 +73,10 @@ var Polyline = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var polyline = _creatorsPolylineCreator2["default"]._createPolyline(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var polyline = _creatorsPolylineCreator2["default"]._createPolyline(this.props); this.setState({ polyline: polyline }); } @@ -105,12 +97,6 @@ var Polyline = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsPolylineCreator.polylineDefaultPropTypes, _creatorsPolylineCreator.polylineControlledPropTypes, _creatorsPolylineCreator.polylineEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return Polyline; diff --git a/lib/Rectangle.js b/lib/Rectangle.js index 769a8358..77496bbb 100644 --- a/lib/Rectangle.js +++ b/lib/Rectangle.js @@ -28,10 +28,6 @@ var _creatorsRectangleCreator = require("./creators/RectangleCreator"); var _creatorsRectangleCreator2 = _interopRequireDefault(_creatorsRectangleCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - /* * Original author: @alistairjcbrown * Original PR: https://github.com/tomchentw/react-google-maps/pull/80 @@ -82,14 +78,10 @@ var Rectangle = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var rectangle = _creatorsRectangleCreator2["default"]._createRectangle(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var rectangle = _creatorsRectangleCreator2["default"]._createRectangle(this.props); this.setState({ rectangle: rectangle }); } @@ -110,12 +102,6 @@ var Rectangle = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsRectangleCreator.rectangleDefaultPropTypes, _creatorsRectangleCreator.rectangleControlledPropTypes, _creatorsRectangleCreator.rectangleEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return Rectangle; diff --git a/lib/SearchBox.js b/lib/SearchBox.js index 1a028c6a..37d13a15 100644 --- a/lib/SearchBox.js +++ b/lib/SearchBox.js @@ -30,10 +30,6 @@ var _creatorsSearchBoxCreator = require("./creators/SearchBoxCreator"); var _creatorsSearchBoxCreator2 = _interopRequireDefault(_creatorsSearchBoxCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - /* * Original author: @eyebraus * Original PR: https://github.com/tomchentw/react-google-maps/pull/110 @@ -78,11 +74,12 @@ var SearchBox = (function (_Component) { return; } var _props = this.props; + var mapHolderRef = _props.mapHolderRef; var classes = _props.classes; var style = _props.style; var placeholder = _props.placeholder; - var searchBoxProps = _objectWithoutProperties(_props, ["classes", "style", "placeholder"]); + var searchBoxProps = _objectWithoutProperties(_props, ["mapHolderRef", "classes", "style", "placeholder"]); // Cannot create input via component - Google Maps will mess with React's internal state by detaching/attaching. // Allow developers to style the "hidden element" via inputClasses. @@ -107,8 +104,9 @@ var SearchBox = (function (_Component) { }, { key: "render", value: function render() { - var controlPosition = this.props.controlPosition; - var mapHolderRef = this.context.mapHolderRef; + var _props2 = this.props; + var mapHolderRef = _props2.mapHolderRef; + var controlPosition = _props2.controlPosition; return this.state.searchBox ? _react2["default"].createElement( _creatorsSearchBoxCreator2["default"], @@ -120,12 +118,6 @@ var SearchBox = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsSearchBoxCreator.searchBoxDefaultPropTypes, _creatorsSearchBoxCreator.searchBoxControlledPropTypes, _creatorsSearchBoxCreator.searchBoxEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return SearchBox; diff --git a/lib/_Skeleton.js b/lib/_Skeleton.js index 8cfb3c69..f6c033b1 100644 --- a/lib/_Skeleton.js +++ b/lib/_Skeleton.js @@ -28,10 +28,6 @@ var _creatorsSkeletonCreator = require("./creators/SkeletonCreator"); var _creatorsSkeletonCreator2 = _interopRequireDefault(_creatorsSkeletonCreator); -var _creatorsGoogleMapHolder = require("./creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var Skeleton = (function (_Component) { _inherits(Skeleton, _Component); @@ -62,14 +58,10 @@ var Skeleton = (function (_Component) { }, { key: "componentWillMount", value: function componentWillMount() { - var mapHolderRef = this.context.mapHolderRef; - if (!_canUseDom2["default"]) { return; } - var skeleton = _creatorsSkeletonCreator2["default"]._createSkeleton(_extends({}, this.props, { - mapHolderRef: mapHolderRef - })); + var skeleton = _creatorsSkeletonCreator2["default"]._createSkeleton(this.props); this.setState({ skeleton: skeleton }); } @@ -90,12 +82,6 @@ var Skeleton = (function (_Component) { key: "propTypes", value: _extends({}, _creatorsSkeletonCreator.skeletonDefaultPropTypes, _creatorsSkeletonCreator.skeletonControlledPropTypes, _creatorsSkeletonCreator.skeletonEventPropTypes), enumerable: true - }, { - key: "contextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]) - }, - enumerable: true }]); return Skeleton; diff --git a/lib/addons/MarkerClusterer.js b/lib/addons/MarkerClusterer.js index 51eba12c..e036a1fc 100644 --- a/lib/addons/MarkerClusterer.js +++ b/lib/addons/MarkerClusterer.js @@ -30,10 +30,6 @@ var _addonsCreatorsMarkerClustererCreator = require('./addonsCreators/MarkerClus var _addonsCreatorsMarkerClustererCreator2 = _interopRequireDefault(_addonsCreatorsMarkerClustererCreator); -var _creatorsGoogleMapHolder = require("../creators/GoogleMapHolder"); - -var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); - var MarkerClusterer = (function (_Component) { _inherits(MarkerClusterer, _Component); @@ -186,9 +182,10 @@ var MarkerClusterer = (function (_Component) { return; } - var markerClustererProps = _objectWithoutProperties(this.props, []); + var _props = this.props; + var mapHolderRef = _props.mapHolderRef; - var mapHolderRef = this.context.mapHolderRef; + var markerClustererProps = _objectWithoutProperties(_props, ['mapHolderRef']); var markerClusterer = _addonsCreatorsMarkerClustererCreator2['default']._createMarkerClusterer(mapHolderRef, markerClustererProps); @@ -211,12 +208,6 @@ var MarkerClusterer = (function (_Component) { key: 'propTypes', value: _extends({}, _addonsCreatorsMarkerClustererCreator.markerClusterDefaultPropTypes, _addonsCreatorsMarkerClustererCreator.markerClusterControlledPropTypes, _addonsCreatorsMarkerClustererCreator.markerClusterEventPropTypes), enumerable: true - }, { - key: 'contextTypes', - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2['default']) - }, - enumerable: true }]); return MarkerClusterer; diff --git a/lib/addons/addonsCreators/InfoBoxCreator.js b/lib/addons/addonsCreators/InfoBoxCreator.js index 68859dee..4c0e1859 100644 --- a/lib/addons/addonsCreators/InfoBoxCreator.js +++ b/lib/addons/addonsCreators/InfoBoxCreator.js @@ -42,6 +42,10 @@ var _utilsComponentLifecycleDecorator = require("../../utils/componentLifecycleD var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _creatorsGoogleMapHolder = require("../../creators/GoogleMapHolder"); + +var _creatorsGoogleMapHolder2 = _interopRequireDefault(_creatorsGoogleMapHolder); + var infoBoxControlledPropTypes = { // NOTICE!!!!!! // @@ -135,6 +139,7 @@ var InfoBoxCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2["default"]).isRequired, infoBox: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/addons/addonsCreators/MarkerClustererCreator.js b/lib/addons/addonsCreators/MarkerClustererCreator.js index adfe6664..7bd18bc1 100644 --- a/lib/addons/addonsCreators/MarkerClustererCreator.js +++ b/lib/addons/addonsCreators/MarkerClustererCreator.js @@ -170,8 +170,9 @@ var MarkerClustererCreator = (function (_Component) { value: function render() { var _this = this; - var children = this.props.children; - var mapHolderRef = this.context.mapHolderRef; + var _props = this.props; + var mapHolderRef = _props.mapHolderRef; + var children = _props.children; if (_react.Children.count(children) > 0) { return _react2['default'].createElement( @@ -203,17 +204,12 @@ var MarkerClustererCreator = (function (_Component) { return markerClusterer; } }, { - key: 'propTypes', + key: 'PropTypes', value: { + mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2['default']).isRequired, markerClusterer: _react.PropTypes.object.isRequired }, enumerable: true - }, { - key: 'contextTypes', - value: { - mapHolderRef: _react.PropTypes.instanceOf(_creatorsGoogleMapHolder2['default']) - }, - enumerable: true }]); var _MarkerClustererCreator = MarkerClustererCreator; diff --git a/lib/creators/CircleCreator.js b/lib/creators/CircleCreator.js index 401b059b..61310364 100644 --- a/lib/creators/CircleCreator.js +++ b/lib/creators/CircleCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var circleControlledPropTypes = { // NOTICE!!!!!! // @@ -121,6 +125,7 @@ var CircleCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, circle: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/DirectionsRendererCreator.js b/lib/creators/DirectionsRendererCreator.js index c93bc533..7a31be64 100644 --- a/lib/creators/DirectionsRendererCreator.js +++ b/lib/creators/DirectionsRendererCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var directionsRendererControlledPropTypes = { // NOTICE!!!!!! // @@ -124,6 +128,7 @@ var DirectionsRendererCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, directionsRenderer: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/DrawingManagerCreator.js b/lib/creators/DrawingManagerCreator.js index 1ca74a34..7c0148fe 100644 --- a/lib/creators/DrawingManagerCreator.js +++ b/lib/creators/DrawingManagerCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var drawingManagerControlledPropTypes = { // NOTICE!!!!!! // @@ -105,6 +109,7 @@ var DrawingManagerCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, drawingManager: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/GoogleMapHolder.js b/lib/creators/GoogleMapHolder.js index 75ea8068..3dac5af4 100644 --- a/lib/creators/GoogleMapHolder.js +++ b/lib/creators/GoogleMapHolder.js @@ -105,11 +105,6 @@ var GoogleMapHolder = (function (_Component) { } _createClass(GoogleMapHolder, [{ - key: "getChildContext", - value: function getChildContext() { - return { mapHolderRef: this }; - } - }, { key: "getMap", value: function getMap() { return this.props.map; @@ -117,10 +112,20 @@ var GoogleMapHolder = (function (_Component) { }, { key: "render", value: function render() { + var _this = this; + return _react2["default"].createElement( "div", null, - this.props.children + _react.Children.map(this.props.children, function (childElement) { + if (_react2["default"].isValidElement(childElement)) { + return _react2["default"].cloneElement(childElement, { + mapHolderRef: _this + }); + } else { + return childElement; + } + }) ); } }], [{ @@ -136,12 +141,6 @@ var GoogleMapHolder = (function (_Component) { map: _react.PropTypes.object.isRequired }, enumerable: true - }, { - key: "childContextTypes", - value: { - mapHolderRef: _react.PropTypes.instanceOf(GoogleMapHolder) - }, - enumerable: true }]); var _GoogleMapHolder = GoogleMapHolder; diff --git a/lib/creators/InfoWindowCreator.js b/lib/creators/InfoWindowCreator.js index d3b2f93b..da2298cc 100644 --- a/lib/creators/InfoWindowCreator.js +++ b/lib/creators/InfoWindowCreator.js @@ -42,6 +42,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var infoWindowControlledPropTypes = { // NOTICE!!!!!! // @@ -129,6 +133,7 @@ var InfoWindowCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, infoWindow: _react.PropTypes.object.isRequired, anchorHolderRef: _react.PropTypes.object }, diff --git a/lib/creators/MarkerCreator.js b/lib/creators/MarkerCreator.js index 42b79ed8..3bd558bd 100644 --- a/lib/creators/MarkerCreator.js +++ b/lib/creators/MarkerCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var markerControlledPropTypes = { // NOTICE!!!!!! // @@ -191,6 +195,7 @@ var MarkerCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, marker: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/OverlayViewCreator.js b/lib/creators/OverlayViewCreator.js index bf4880fc..360a522a 100644 --- a/lib/creators/OverlayViewCreator.js +++ b/lib/creators/OverlayViewCreator.js @@ -32,6 +32,10 @@ var _utilsComposeOptions = require("../utils/composeOptions"); var _utilsComposeOptions2 = _interopRequireDefault(_utilsComposeOptions); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var overlayViewControlledPropTypes = { // CustomProps mapPaneName: _react.PropTypes.string, @@ -215,6 +219,7 @@ var OverlayViewCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, mapPaneName: _react.PropTypes.string, overlayView: _react.PropTypes.object.isRequired }, diff --git a/lib/creators/PolygonCreator.js b/lib/creators/PolygonCreator.js index 39429e2f..39a96628 100644 --- a/lib/creators/PolygonCreator.js +++ b/lib/creators/PolygonCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var polygonControlledPropTypes = { // NOTICE!!!!!! // @@ -121,6 +125,7 @@ var PolygonCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, polygon: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/PolylineCreator.js b/lib/creators/PolylineCreator.js index 396cf056..c68e34b1 100644 --- a/lib/creators/PolylineCreator.js +++ b/lib/creators/PolylineCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var polylineControlledPropTypes = { // NOTICE!!!!!! // @@ -117,6 +121,7 @@ var PolylineCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, polyline: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/RectangleCreator.js b/lib/creators/RectangleCreator.js index 2a10a280..93de4e13 100644 --- a/lib/creators/RectangleCreator.js +++ b/lib/creators/RectangleCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var rectangleControlledPropTypes = { // NOTICE!!!!!! // @@ -117,6 +121,7 @@ var RectangleCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, rectangle: _react.PropTypes.object.isRequired }, enumerable: true diff --git a/lib/creators/_SkeletonCreator.js b/lib/creators/_SkeletonCreator.js index 31de53b9..19b772c3 100644 --- a/lib/creators/_SkeletonCreator.js +++ b/lib/creators/_SkeletonCreator.js @@ -38,6 +38,10 @@ var _utilsComponentLifecycleDecorator = require("../utils/componentLifecycleDeco var _utilsComponentLifecycleDecorator2 = _interopRequireDefault(_utilsComponentLifecycleDecorator); +var _GoogleMapHolder = require("./GoogleMapHolder"); + +var _GoogleMapHolder2 = _interopRequireDefault(_GoogleMapHolder); + var skeletonControlledPropTypes = { // NOTICE!!!!!! // @@ -111,6 +115,7 @@ var SkeletonCreator = (function (_Component) { }, { key: "propTypes", value: { + mapHolderRef: _react.PropTypes.instanceOf(_GoogleMapHolder2["default"]).isRequired, skeleton: _react.PropTypes.object.isRequired }, enumerable: true From 4404e40b75febcaf38a06b4c23cc220d24725543 Mon Sep 17 00:00:00 2001 From: Simone Potenza Date: Sun, 29 May 2016 12:55:55 +0200 Subject: [PATCH 7/9] Removed `shouldComponentUpdate` lifecycle hook from Marker component --- src/Marker.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Marker.js b/src/Marker.js index c3a23a6e..f26e7967 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -101,10 +101,6 @@ export default class Marker extends Component { } } - shouldComponentUpdate(nextProps, nextState) { - return !_.isEqual(this.props.icon, nextProps.icon); - } - render() { if (this.state.marker) { return ( From 9cbf7291a8a7c84d9a0683da714e922a710f48ae Mon Sep 17 00:00:00 2001 From: Simone Potenza Date: Sun, 29 May 2016 13:25:56 +0200 Subject: [PATCH 8/9] Removed unused lodash dependency --- package.json | 2 -- src/Marker.js | 2 -- 2 files changed, 4 deletions(-) diff --git a/package.json b/package.json index cc29449d..4b1e30ed 100644 --- a/package.json +++ b/package.json @@ -84,8 +84,6 @@ "can-use-dom": "^0.1.0", "google-maps-infobox": "^1.1.13", "invariant": "^2.1.1", - "lodash": "^4.12.0", - "lodash.isequal": "^3.0.4", "marker-clusterer-plus": "^2.1.2", "react-prop-types-element-of-type": "^2.1.0", "scriptjs": "^2.5.8", diff --git a/src/Marker.js b/src/Marker.js index f26e7967..05569b8e 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -17,8 +17,6 @@ import { import GoogleMapHolder from "./creators/GoogleMapHolder"; -import _ from 'lodash'; - export default class Marker extends Component { static propTypes = { // Uncontrolled default[props] - used only in componentDidMount From 3737358ffc1b2ddc5de6cb951e36ef851d2cf2f7 Mon Sep 17 00:00:00 2001 From: Simone Potenza Date: Sun, 29 May 2016 15:37:48 +0200 Subject: [PATCH 9/9] Reverted lodash.isEqual dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 4b1e30ed..753fd460 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "can-use-dom": "^0.1.0", "google-maps-infobox": "^1.1.13", "invariant": "^2.1.1", + "lodash.isequal": "^3.0.4", "marker-clusterer-plus": "^2.1.2", "react-prop-types-element-of-type": "^2.1.0", "scriptjs": "^2.5.8",