From 5d07551304a4c176fc49e22ce0df0020cfcf6f99 Mon Sep 17 00:00:00 2001 From: Val Date: Mon, 18 Jun 2018 00:35:12 -0700 Subject: [PATCH 1/2] Circle support --- src/components/Circle.js | 240 ++++++++++++++ src/index.js | 669 +++++++++++++++++++++++---------------- 2 files changed, 633 insertions(+), 276 deletions(-) create mode 100644 src/components/Circle.js diff --git a/src/components/Circle.js b/src/components/Circle.js new file mode 100644 index 00000000..082d7f5c --- /dev/null +++ b/src/components/Circle.js @@ -0,0 +1,240 @@ +(function (global, factory) { + if (typeof define === "function" && define.amd) { + define(['exports', 'react', 'prop-types', '../lib/String'], factory); + } else if (typeof exports !== "undefined") { + factory(exports, require('react'), require('prop-types'), require('../lib/String')); + } else { + var mod = { + exports: {} + }; + factory(mod.exports, global.react, global.propTypes, global.String); + global.Circle = mod.exports; + } +})(this, function (exports, _react, _propTypes, _String) { + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + exports.Circle = undefined; + + var _react2 = _interopRequireDefault(_react); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } + + var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + function _objectWithoutProperties(obj, keys) { + var target = {}; + + for (var i in obj) { + if (keys.indexOf(i) >= 0) continue; + if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; + target[i] = obj[i]; + } + + return target; + } + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + var _createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + function _possibleConstructorReturn(self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + } + + function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + } + + var evtNames = ['click', 'mouseout', 'mouseover', 'dragend']; + + var wrappedPromise = function wrappedPromise() { + var wrappedPromise = {}, + promise = new Promise(function (resolve, reject) { + wrappedPromise.resolve = resolve; + wrappedPromise.reject = reject; + }); + wrappedPromise.then = promise.then.bind(promise); + wrappedPromise.catch = promise.catch.bind(promise); + wrappedPromise.promise = promise; + + return wrappedPromise; + }; + + var Circle = exports.Circle = function (_React$Component) { + _inherits(Circle, _React$Component); + + function Circle() { + _classCallCheck(this, Circle); + + return _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).apply(this, arguments)); + } + + _createClass(Circle, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.circlePromise = wrappedPromise(); + this.renderCircle(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps) { + if (this.props.map !== prevProps.map || this.props.center !== prevProps.center) { + if (this.circle) { + this.circle.setMap(null); + } + this.renderCircle(); + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + if (this.circle) { + this.circle.setMap(null); + } + } + }, { + key: 'renderCircle', + value: function renderCircle() { + var _this2 = this; + + var _props = this.props, + map = _props.map, + google = _props.google, + center = _props.center, + radius = _props.radius, + strokeColor = _props.strokeColor, + strokeOpacity = _props.strokeOpacity, + strokeWeight = _props.strokeWeight, + fillColor = _props.fillColor, + fillOpacity = _props.fillOpacity, + draggable = _props.draggable, + props = _objectWithoutProperties(_props, ['map', 'google', 'center', 'radius', 'strokeColor', 'strokeOpacity', 'strokeWeight', 'fillColor', 'fillOpacity', 'draggable']); + + if (!google) { + return null; + } + + var params = _extends({ + map: map, + center: center, + radius: radius, + strokeColor: strokeColor, + strokeOpacity: strokeOpacity, + strokeWeight: strokeWeight, + fillColor: fillColor, + fillOpacity: fillOpacity, + draggable: draggable + }, props); + + this.circle = new google.maps.Circle(params); + + evtNames.forEach(function (e) { + _this2.circle.addListener(e, _this2.handleEvent(e)); + }); + + this.circlePromise.resolve(this.circle); + } + }, { + key: 'getCircle', + value: function getCircle() { + return this.circlePromise; + } + }, { + key: 'handleEvent', + value: function handleEvent(evt) { + var _this3 = this; + + return function (e) { + var evtName = 'on' + (0, _String.camelize)(evt); + if (_this3.props[evtName]) { + _this3.props[evtName](_this3.props, _this3.circle, e); + } + }; + } + }, { + key: 'render', + value: function render() { + return null; + } + }]); + + return Circle; + }(_react2.default.Component); + + Circle.propTypes = { + center: _propTypes2.default.object, + radius: _propTypes2.default.number, + strokeColor: _propTypes2.default.string, + strokeOpacity: _propTypes2.default.number, + strokeWeight: _propTypes2.default.number, + fillColor: _propTypes2.default.string, + fillOpacity: _propTypes2.default.number, + }; + + evtNames.forEach(function (e) { + return Circle.propTypes[e] = _propTypes2.default.func; + }); + + Circle.defaultProps = { + name: 'Circle' + }; + + exports.default = Circle; +}); diff --git a/src/index.js b/src/index.js index 125c6df6..71432bd9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,311 +1,428 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ReactDOM from 'react-dom'; -import {camelize} from './lib/String'; -import {makeCancelable} from './lib/cancelablePromise'; - -const mapStyles = { - container: { - position: 'absolute', - width: '100%', - height: '100%' - }, - map: { - position: 'absolute', - left: 0, - right: 0, - bottom: 0, - top: 0 +(function (global, factory) { + if (typeof define === "function" && define.amd) { + define(['exports', './GoogleApiComponent', './components/Marker', './components/InfoWindow', './components/HeatMap', './components/Circle', './components/Polygon', './components/Polyline', 'react', 'prop-types', 'react-dom', './lib/String', './lib/cancelablePromise'], factory); + } else if (typeof exports !== "undefined") { + factory(exports, require('./GoogleApiComponent'), require('./components/Marker'), require('./components/InfoWindow'), require('./components/HeatMap'), require('./components/Circle'), require('./components/Polygon'), require('./components/Polyline'), require('react'), require('prop-types'), require('react-dom'), require('./lib/String'), require('./lib/cancelablePromise')); + } else { + var mod = { + exports: {} + }; + factory(mod.exports, global.GoogleApiComponent, global.Marker, global.InfoWindow, global.HeatMap, global.Circle, global.Polygon, global.Polyline, global.react, global.propTypes, global.reactDom, global.String, global.cancelablePromise); + global.index = mod.exports; } -}; - -const evtNames = [ - 'ready', - 'click', - 'dragend', - 'recenter', - 'bounds_changed', - 'center_changed', - 'dblclick', - 'dragstart', - 'heading_change', - 'idle', - 'maptypeid_changed', - 'mousemove', - 'mouseout', - 'mouseover', - 'projection_changed', - 'resize', - 'rightclick', - 'tilesloaded', - 'tilt_changed', - 'zoom_changed' -]; - -export {wrapper as GoogleApiWrapper} from './GoogleApiComponent'; -export {Marker} from './components/Marker'; -export {InfoWindow} from './components/InfoWindow'; -export {HeatMap} from './components/HeatMap'; -export {Polygon} from './components/Polygon'; -export {Polyline} from './components/Polyline'; - -export class Map extends React.Component { - constructor(props) { - super(props); - - if (!props.hasOwnProperty('google')) { - throw new Error('You must include a `google` prop'); +})(this, function (exports, _GoogleApiComponent, _Marker, _InfoWindow, _HeatMap, _Circle, _Polygon, _Polyline, _react, _propTypes, _reactDom, _String, _cancelablePromise) { + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + exports.Map = exports.Polyline = exports.Polygon = exports.Circle = exports.HeatMap = exports.InfoWindow = exports.Marker = exports.GoogleApiWrapper = undefined; + Object.defineProperty(exports, 'GoogleApiWrapper', { + enumerable: true, + get: function () { + return _GoogleApiComponent.wrapper; + } + }); + Object.defineProperty(exports, 'Marker', { + enumerable: true, + get: function () { + return _Marker.Marker; + } + }); + Object.defineProperty(exports, 'InfoWindow', { + enumerable: true, + get: function () { + return _InfoWindow.InfoWindow; + } + }); + Object.defineProperty(exports, 'HeatMap', { + enumerable: true, + get: function () { + return _HeatMap.HeatMap; + } + }); + Object.defineProperty(exports, 'Circle', { + enumerable: true, + get: function () { + return _Circle.Circle; } + }); + Object.defineProperty(exports, 'Polygon', { + enumerable: true, + get: function () { + return _Polygon.Polygon; + } + }); + Object.defineProperty(exports, 'Polyline', { + enumerable: true, + get: function () { + return _Polyline.Polyline; + } + }); - this.listeners = {}; - this.state = { - currentLocation: { - lat: this.props.initialCenter.lat, - lng: this.props.initialCenter.lng - } + var _react2 = _interopRequireDefault(_react); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _reactDom2 = _interopRequireDefault(_reactDom); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj }; } - componentDidMount() { - if (this.props.centerAroundCurrentLocation) { - if (navigator && navigator.geolocation) { - this.geoPromise = makeCancelable( - new Promise((resolve, reject) => { - navigator.geolocation.getCurrentPosition(resolve, reject); - }) - ); - - this.geoPromise.promise - .then(pos => { - const coords = pos.coords; - this.setState({ - currentLocation: { - lat: coords.latitude, - lng: coords.longitude - } - }); - }) - .catch(e => e); - } + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); } - this.loadMap(); } - componentDidUpdate(prevProps, prevState) { - if (prevProps.google !== this.props.google) { - this.loadMap(); - } - if (this.props.visible !== prevProps.visible) { - this.restyleMap(); - } - if (this.props.zoom !== prevProps.zoom) { - this.map.setZoom(this.props.zoom); - } - if (this.props.center !== prevProps.center) { - this.setState({ - currentLocation: this.props.center - }); - } - if (prevState.currentLocation !== this.state.currentLocation) { - this.recenterMap(); + var _createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } } - if (this.props.bounds !== prevProps.bounds) { - this.map.fitBounds(this.props.bounds); + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + function _possibleConstructorReturn(self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; } - componentWillUnmount() { - const {google} = this.props; - if (this.geoPromise) { - this.geoPromise.cancel(); + function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } - Object.keys(this.listeners).forEach(e => { - google.maps.event.removeListener(this.listeners[e]); + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - loadMap() { - if (this.props && this.props.google) { - const {google} = this.props; - const maps = google.maps; - - const mapRef = this.refs.map; - const node = ReactDOM.findDOMNode(mapRef); - const curr = this.state.currentLocation; - const center = new maps.LatLng(curr.lat, curr.lng); - - const mapTypeIds = this.props.google.maps.MapTypeId || {}; - const mapTypeFromProps = String(this.props.mapType).toUpperCase(); - - const mapConfig = Object.assign( - {}, - { - mapTypeId: mapTypeIds[mapTypeFromProps], - center: center, - zoom: this.props.zoom, - maxZoom: this.props.maxZoom, - minZoom: this.props.minZoom, - clickableIcons: !!this.props.clickableIcons, - disableDefaultUI: this.props.disableDefaultUI, - zoomControl: this.props.zoomControl, - mapTypeControl: this.props.mapTypeControl, - scaleControl: this.props.scaleControl, - streetViewControl: this.props.streetViewControl, - panControl: this.props.panControl, - rotateControl: this.props.rotateControl, - fullscreenControl: this.props.fullscreenControl, - scrollwheel: this.props.scrollwheel, - draggable: this.props.draggable, - keyboardShortcuts: this.props.keyboardShortcuts, - disableDoubleClickZoom: this.props.disableDoubleClickZoom, - noClear: this.props.noClear, - styles: this.props.styles, - gestureHandling: this.props.gestureHandling - } - ); + var mapStyles = { + container: { + position: 'absolute', + width: '100%', + height: '100%' + }, + map: { + position: 'absolute', + left: 0, + right: 0, + bottom: 0, + top: 0 + } + }; - Object.keys(mapConfig).forEach(key => { - // Allow to configure mapConfig with 'false' - if (mapConfig[key] === null) { - delete mapConfig[key]; - } - }); + var evtNames = ['ready', 'click', 'dragend', 'recenter', 'bounds_changed', 'center_changed', 'dblclick', 'dragstart', 'heading_change', 'idle', 'maptypeid_changed', 'mousemove', 'mouseout', 'mouseover', 'projection_changed', 'resize', 'rightclick', 'tilesloaded', 'tilt_changed', 'zoom_changed']; - this.map = new maps.Map(node, mapConfig); + var Map = exports.Map = function (_React$Component) { + _inherits(Map, _React$Component); + + function Map(props) { + _classCallCheck(this, Map); + + var _this = _possibleConstructorReturn(this, (Map.__proto__ || Object.getPrototypeOf(Map)).call(this, props)); + + if (!props.hasOwnProperty('google')) { + throw new Error('You must include a `google` prop'); + } - evtNames.forEach(e => { - this.listeners[e] = this.map.addListener(e, this.handleEvent(e)); - }); - maps.event.trigger(this.map, 'ready'); - this.forceUpdate(); + _this.listeners = {}; + _this.state = { + currentLocation: { + lat: _this.props.initialCenter.lat, + lng: _this.props.initialCenter.lng + } + }; + return _this; } - } - handleEvent(evtName) { - let timeout; - const handlerName = `on${camelize(evtName)}`; + _createClass(Map, [{ + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + if (this.props.centerAroundCurrentLocation) { + if (navigator && navigator.geolocation) { + this.geoPromise = (0, _cancelablePromise.makeCancelable)(new Promise(function (resolve, reject) { + navigator.geolocation.getCurrentPosition(resolve, reject); + })); + + this.geoPromise.promise.then(function (pos) { + var coords = pos.coords; + _this2.setState({ + currentLocation: { + lat: coords.latitude, + lng: coords.longitude + } + }); + }).catch(function (e) { + return e; + }); + } + } + this.loadMap(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps, prevState) { + if (prevProps.google !== this.props.google) { + this.loadMap(); + } + if (this.props.visible !== prevProps.visible) { + this.restyleMap(); + } + if (this.props.zoom !== prevProps.zoom) { + this.map.setZoom(this.props.zoom); + } + if (this.props.center !== prevProps.center) { + this.setState({ + currentLocation: this.props.center + }); + } + if (prevState.currentLocation !== this.state.currentLocation) { + this.recenterMap(); + } + if (this.props.bounds !== prevProps.bounds) { + this.map.fitBounds(this.props.bounds); + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + var _this3 = this; + + var google = this.props.google; - return e => { - if (timeout) { - clearTimeout(timeout); - timeout = null; + if (this.geoPromise) { + this.geoPromise.cancel(); + } + Object.keys(this.listeners).forEach(function (e) { + google.maps.event.removeListener(_this3.listeners[e]); + }); } - timeout = setTimeout(() => { - if (this.props[handlerName]) { - this.props[handlerName](this.props, this.map, e); + }, { + key: 'loadMap', + value: function loadMap() { + var _this4 = this; + + if (this.props && this.props.google) { + var google = this.props.google; + + var maps = google.maps; + + var mapRef = this.refs.map; + var node = _reactDom2.default.findDOMNode(mapRef); + var curr = this.state.currentLocation; + var center = new maps.LatLng(curr.lat, curr.lng); + + var mapTypeIds = this.props.google.maps.MapTypeId || {}; + var mapTypeFromProps = String(this.props.mapType).toUpperCase(); + + var mapConfig = Object.assign({}, { + mapTypeId: mapTypeIds[mapTypeFromProps], + center: center, + zoom: this.props.zoom, + maxZoom: this.props.maxZoom, + minZoom: this.props.minZoom, + clickableIcons: !!this.props.clickableIcons, + disableDefaultUI: this.props.disableDefaultUI, + zoomControl: this.props.zoomControl, + mapTypeControl: this.props.mapTypeControl, + scaleControl: this.props.scaleControl, + streetViewControl: this.props.streetViewControl, + panControl: this.props.panControl, + rotateControl: this.props.rotateControl, + fullscreenControl: this.props.fullscreenControl, + scrollwheel: this.props.scrollwheel, + draggable: this.props.draggable, + keyboardShortcuts: this.props.keyboardShortcuts, + disableDoubleClickZoom: this.props.disableDoubleClickZoom, + noClear: this.props.noClear, + styles: this.props.styles, + gestureHandling: this.props.gestureHandling + }); + + Object.keys(mapConfig).forEach(function (key) { + // Allow to configure mapConfig with 'false' + if (mapConfig[key] === null) { + delete mapConfig[key]; + } + }); + + this.map = new maps.Map(node, mapConfig); + + evtNames.forEach(function (e) { + _this4.listeners[e] = _this4.map.addListener(e, _this4.handleEvent(e)); + }); + maps.event.trigger(this.map, 'ready'); + this.forceUpdate(); } - }, 0); - }; - } + } + }, { + key: 'handleEvent', + value: function handleEvent(evtName) { + var _this5 = this; + + var timeout = void 0; + var handlerName = 'on' + (0, _String.camelize)(evtName); + + return function (e) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + timeout = setTimeout(function () { + if (_this5.props[handlerName]) { + _this5.props[handlerName](_this5.props, _this5.map, e); + } + }, 0); + }; + } + }, { + key: 'recenterMap', + value: function recenterMap() { + var map = this.map; - recenterMap() { - const map = this.map; + var google = this.props.google; - const {google} = this.props; - if (!google) return; - const maps = google.maps; + if (!google) return; + var maps = google.maps; - if (map) { - let center = this.state.currentLocation; - if (!(center instanceof google.maps.LatLng)) { - center = new google.maps.LatLng(center.lat, center.lng); + if (map) { + var center = this.state.currentLocation; + if (!(center instanceof google.maps.LatLng)) { + center = new google.maps.LatLng(center.lat, center.lng); + } + // map.panTo(center) + map.setCenter(center); + maps.event.trigger(map, 'recenter'); + } } - // map.panTo(center) - map.setCenter(center); - maps.event.trigger(map, 'recenter'); - } - } + }, { + key: 'restyleMap', + value: function restyleMap() { + if (this.map) { + var google = this.props.google; - restyleMap() { - if (this.map) { - const {google} = this.props; - google.maps.event.trigger(this.map, 'resize'); - } - } - - renderChildren() { - const {children} = this.props; + google.maps.event.trigger(this.map, 'resize'); + } + } + }, { + key: 'renderChildren', + value: function renderChildren() { + var _this6 = this; - if (!children) return; + var children = this.props.children; - return React.Children.map(children, c => { - if (!c) return; - return React.cloneElement(c, { - map: this.map, - google: this.props.google, - mapCenter: this.state.currentLocation - }); - }); - } - render() { - const style = Object.assign({}, mapStyles.map, this.props.style, { - display: this.props.visible ? 'inherit' : 'none' - }); + if (!children) return; - const containerStyles = Object.assign( - {}, - mapStyles.container, - this.props.containerStyle - ); - - return ( -
-
- Loading map... -
- {this.renderChildren()} -
- ); - } -} - -Map.propTypes = { - google: PropTypes.object, - zoom: PropTypes.number, - centerAroundCurrentLocation: PropTypes.bool, - center: PropTypes.object, - initialCenter: PropTypes.object, - className: PropTypes.string, - style: PropTypes.object, - containerStyle: PropTypes.object, - visible: PropTypes.bool, - mapType: PropTypes.string, - maxZoom: PropTypes.number, - minZoom: PropTypes.number, - clickableIcons: PropTypes.bool, - disableDefaultUI: PropTypes.bool, - zoomControl: PropTypes.bool, - mapTypeControl: PropTypes.bool, - scaleControl: PropTypes.bool, - streetViewControl: PropTypes.bool, - panControl: PropTypes.bool, - rotateControl: PropTypes.bool, - fullscreenControl: PropTypes.bool, - scrollwheel: PropTypes.bool, - draggable: PropTypes.bool, - keyboardShortcuts: PropTypes.bool, - disableDoubleClickZoom: PropTypes.bool, - noClear: PropTypes.bool, - styles: PropTypes.array, - gestureHandling: PropTypes.string, - bounds: PropTypes.object -}; - -evtNames.forEach(e => (Map.propTypes[camelize(e)] = PropTypes.func)); - -Map.defaultProps = { - zoom: 14, - initialCenter: { - lat: 37.774929, - lng: -122.419416 - }, - center: {}, - centerAroundCurrentLocation: false, - style: {}, - containerStyle: {}, - visible: true -}; - -export default Map; + return _react2.default.Children.map(children, function (c) { + if (!c) return; + return _react2.default.cloneElement(c, { + map: _this6.map, + google: _this6.props.google, + mapCenter: _this6.state.currentLocation + }); + }); + } + }, { + key: 'render', + value: function render() { + var style = Object.assign({}, mapStyles.map, this.props.style, { + display: this.props.visible ? 'inherit' : 'none' + }); + + var containerStyles = Object.assign({}, mapStyles.container, this.props.containerStyle); + + return _react2.default.createElement( + 'div', + { style: containerStyles, className: this.props.className }, + _react2.default.createElement( + 'div', + { style: style, ref: 'map' }, + 'Loading map...' + ), + this.renderChildren() + ); + } + }]); + + return Map; + }(_react2.default.Component); + + Map.propTypes = { + google: _propTypes2.default.object, + zoom: _propTypes2.default.number, + centerAroundCurrentLocation: _propTypes2.default.bool, + center: _propTypes2.default.object, + initialCenter: _propTypes2.default.object, + className: _propTypes2.default.string, + style: _propTypes2.default.object, + containerStyle: _propTypes2.default.object, + visible: _propTypes2.default.bool, + mapType: _propTypes2.default.string, + maxZoom: _propTypes2.default.number, + minZoom: _propTypes2.default.number, + clickableIcons: _propTypes2.default.bool, + disableDefaultUI: _propTypes2.default.bool, + zoomControl: _propTypes2.default.bool, + mapTypeControl: _propTypes2.default.bool, + scaleControl: _propTypes2.default.bool, + streetViewControl: _propTypes2.default.bool, + panControl: _propTypes2.default.bool, + rotateControl: _propTypes2.default.bool, + fullscreenControl: _propTypes2.default.bool, + scrollwheel: _propTypes2.default.bool, + draggable: _propTypes2.default.bool, + keyboardShortcuts: _propTypes2.default.bool, + disableDoubleClickZoom: _propTypes2.default.bool, + noClear: _propTypes2.default.bool, + styles: _propTypes2.default.array, + gestureHandling: _propTypes2.default.string, + bounds: _propTypes2.default.object + }; + + evtNames.forEach(function (e) { + return Map.propTypes[(0, _String.camelize)(e)] = _propTypes2.default.func; + }); + + Map.defaultProps = { + zoom: 14, + initialCenter: { + lat: 37.774929, + lng: -122.419416 + }, + center: {}, + centerAroundCurrentLocation: false, + style: {}, + containerStyle: {}, + visible: true + }; + + exports.default = Map; +}); From 7c813e85c4c0817f1044fbdb94a4884705ca334d Mon Sep 17 00:00:00 2001 From: Val Date: Mon, 18 Jun 2018 01:53:03 -0700 Subject: [PATCH 2/2] visibility support and updates on props changes --- src/components/Circle.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Circle.js b/src/components/Circle.js index 082d7f5c..f6af6889 100644 --- a/src/components/Circle.js +++ b/src/components/Circle.js @@ -135,7 +135,7 @@ }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps) { - if (this.props.map !== prevProps.map || this.props.center !== prevProps.center) { + if (this.props.map !== prevProps.map || this.props.center !== prevProps.center || this.props.visible !== prevProps.visible || this.props.radius !== prevProps.radius) { if (this.circle) { this.circle.setMap(null); } @@ -165,7 +165,8 @@ fillColor = _props.fillColor, fillOpacity = _props.fillOpacity, draggable = _props.draggable, - props = _objectWithoutProperties(_props, ['map', 'google', 'center', 'radius', 'strokeColor', 'strokeOpacity', 'strokeWeight', 'fillColor', 'fillOpacity', 'draggable']); + visible = _props.visible, + props = _objectWithoutProperties(_props, ['map', 'google', 'center', 'radius', 'strokeColor', 'strokeOpacity', 'strokeWeight', 'fillColor', 'fillOpacity', 'draggable', 'visible']); if (!google) { return null; @@ -180,7 +181,8 @@ strokeWeight: strokeWeight, fillColor: fillColor, fillOpacity: fillOpacity, - draggable: draggable + draggable: draggable, + visible: visible, }, props); this.circle = new google.maps.Circle(params);