Fix: SearchMapWithGoogleMap did not have container in state.

This commit is contained in:
Vesa Luusua 2018-09-12 13:37:45 +03:00
parent 94f3712256
commit 801c54c1e4
2 changed files with 13 additions and 5 deletions

View file

@ -145,7 +145,9 @@ export class SearchMapComponent extends Component {
// instead of SearchMapWithMapbox:
//
// <SearchMapWithGoogleMap
// containerElement={<div className={classes} onClick={this.onMapClicked} />}
// containerElement={
// <div id="search-map-container" className={classes} onClick={this.onMapClicked} />
// }
// mapElement={<div className={mapRootClassName || css.mapRoot} />}
// bounds={bounds}
// center={center}

View file

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
import { arrayOf, func, node, number, oneOfType, shape, string } from 'prop-types';
import isEqual from 'lodash/isEqual';
import { withGoogleMap, GoogleMap, OverlayView } from 'react-google-maps';
import { OVERLAY_VIEW } from 'react-google-maps/lib/constants';
@ -313,14 +313,19 @@ class SearchMapWithGoogleMap extends Component {
onIdle(e) {
if (this.map) {
// Let's try to find the map container element
const mapContainer = this.props.containerElement.props.id
? document.getElementById(this.props.containerElement.props.id)
: null;
// If reusableMapHiddenHandle is given and parent element has that class,
// we don't listen moveend events.
// This fixes mobile Chrome bug that sends map events to invisible map components.
const isHiddenByReusableMap =
this.props.reusableMapHiddenHandle &&
this.state.mapContainer.parentElement.classList.contains(
this.props.reusableMapHiddenHandle
);
mapContainer &&
mapContainer.parentElement.classList.contains(this.props.reusableMapHiddenHandle);
if (!isHiddenByReusableMap) {
const viewportMapBounds = getMapBounds(this.map);
const viewportMapCenter = getMapCenter(this.map);
@ -356,6 +361,7 @@ SearchMapWithGoogleMap.defaultProps = {
};
SearchMapWithGoogleMap.propTypes = {
containerElement: node.isRequired,
center: propTypes.latlng,
location: shape({
search: string.isRequired,