archive-gh-me/google-map-react
1
0
Fork 0
mirror of https://github.com/google-map-react/google-map-react.git synced 2025-12-08 18:26:32 +00:00
Code Issues Projects Releases Wiki Activity

Use React 16 portal to render map overlay (#643)

Browse Source 
* Use React 16 portal to render map overlay

This allows the new context API to propagate context properly.

* Rename div to overlay
This commit is contained in:
Curtis Layne 2018-09-20 13:20:22 -04:00 committed by Michael Diego
parent 28506dd427
commit b121bb673e
1 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/google_map.js
View File

@ -239,7 +239,7 @@ export default class GoogleMap extends Component {
this.zoomAnimationInProgress_ = false;
this.state = {
overlayCreated: false,
overlay: null,
};
}
@ -587,7 +587,7 @@ export default class GoogleMap extends Component {
: '2000px';
const div = document.createElement('div');
this.div = div;
this.overlay = div;
div.style.backgroundColor = 'transparent';
div.style.position = 'absolute';
div.style.left = '0px';
@ -601,29 +601,21 @@ export default class GoogleMap extends Component {
maps,
overlay.getProjection()
);
ReactDOM.unstable_renderSubtreeIntoContainer(
this_,
<GoogleMapMarkers
experimental={this_.props.experimental}
onChildClick={this_._onChildClick}
onChildMouseDown={this_._onChildMouseDown}
onChildMouseEnter={this_._onChildMouseEnter}
onChildMouseLeave={this_._onChildMouseLeave}
geoService={this_.geoService_}
insideMapPanes
distanceToMouse={this_.props.distanceToMouse}
getHoverDistance={this_._getHoverDistance}
dispatcher={this_.markersDispatcher_}
/>,
div,
// remove prerendered markers
() => this_.setState({ overlayCreated: true })
);
this_.setState(state => ({
...state,
overlay: div,
}));
},
onRemove() {
if (this.div) {
ReactDOM.unmountComponentAtNode(this.div);
this_.setState(state => ({
...state,
overlay: null,
}));
if (this.overlay) {
ReactDOM.unmountComponentAtNode(this.overlay);
}
},
@ -1062,7 +1054,7 @@ export default class GoogleMap extends Component {
};
render() {
const mapMarkerPrerender = !this.state.overlayCreated
const mapMarkerPrerender = !this.state.overlay
? <GoogleMapMarkersPrerender
experimental={this.props.experimental}
onChildClick={this._onChildClick}
@ -1085,6 +1077,22 @@ export default class GoogleMap extends Component {
onClick={this._onMapClick}
>
<GoogleMapMap registerChild={this._registerChild} />
{this.state.overlay &&
ReactDOM.createPortal(
<GoogleMapMarkers
experimental={this.props.experimental}
onChildClick={this._onChildClick}
onChildMouseDown={this._onChildMouseDown}
onChildMouseEnter={this._onChildMouseEnter}
onChildMouseLeave={this._onChildMouseLeave}
geoService={this.geoService_}
insideMapPanes
distanceToMouse={this.props.distanceToMouse}
getHoverDistance={this._getHoverDistance}
dispatcher={this.markersDispatcher_}
/>,
this.state.overlay
)}
{/* render markers before map load done */}
{mapMarkerPrerender}