Commit b121bb6
Use React 16 portal to render map overlay (google-map-react#643)
* Use React 16 portal to render map overlay
This allows the new context API to propagate context properly.
* Rename div to overlay1 parent 28506dd commit b121bb6
1 file changed
Lines changed: 31 additions & 23 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -239,7 +239,7 @@ export default class GoogleMap extends Component { | |||
| 239 | 239 | this.zoomAnimationInProgress_ = false; | |
| 240 | 240 | ||
| 241 | 241 | this.state = { | |
| 242 | - overlayCreated: false, | ||
| 242 | + overlay: null, | ||
| 243 | 243 | }; | |
| 244 | 244 | } | |
| 245 | 245 | ||
@@ -587,7 +587,7 @@ export default class GoogleMap extends Component { | |||
| 587 | 587 | : '2000px'; | |
| 588 | 588 | ||
| 589 | 589 | const div = document.createElement('div'); | |
| 590 | - this.div = div; | ||
| 590 | + this.overlay = div; | ||
| 591 | 591 | div.style.backgroundColor = 'transparent'; | |
| 592 | 592 | div.style.position = 'absolute'; | |
| 593 | 593 | div.style.left = '0px'; | |
@@ -601,29 +601,21 @@ export default class GoogleMap extends Component { | |||
| 601 | 601 | maps, | |
| 602 | 602 | overlay.getProjection() | |
| 603 | 603 | ); | |
| 604 | - ReactDOM.unstable_renderSubtreeIntoContainer( | ||
| 605 | - this_, | ||
| 606 | - <GoogleMapMarkers | ||
| 607 | - experimental={this_.props.experimental} | ||
| 608 | - onChildClick={this_._onChildClick} | ||
| 609 | - onChildMouseDown={this_._onChildMouseDown} | ||
| 610 | - onChildMouseEnter={this_._onChildMouseEnter} | ||
| 611 | - onChildMouseLeave={this_._onChildMouseLeave} | ||
| 612 | - geoService={this_.geoService_} | ||
| 613 | - insideMapPanes | ||
| 614 | - distanceToMouse={this_.props.distanceToMouse} | ||
| 615 | - getHoverDistance={this_._getHoverDistance} | ||
| 616 | - dispatcher={this_.markersDispatcher_} | ||
| 617 | - />, | ||
| 618 | - div, | ||
| 619 | - // remove prerendered markers | ||
| 620 | - () => this_.setState({ overlayCreated: true }) | ||
| 621 | - ); | ||
| 604 | + | ||
| 605 | + this_.setState(state => ({ | ||
| 606 | + ...state, | ||
| 607 | + overlay: div, | ||
| 608 | + })); | ||
| 622 | 609 | }, | |
| 623 | 610 | ||
| 624 | 611 | onRemove() { | |
| 625 | - if (this.div) { | ||
| 626 | - ReactDOM.unmountComponentAtNode(this.div); | ||
| 612 | + this_.setState(state => ({ | ||
| 613 | + ...state, | ||
| 614 | + overlay: null, | ||
| 615 | + })); | ||
| 616 | + | ||
| 617 | + if (this.overlay) { | ||
| 618 | + ReactDOM.unmountComponentAtNode(this.overlay); | ||
| 627 | 619 | } | |
| 628 | 620 | }, | |
| 629 | 621 | ||
@@ -1062,7 +1054,7 @@ export default class GoogleMap extends Component { | |||
| 1062 | 1054 | }; | |
| 1063 | 1055 | ||
| 1064 | 1056 | render() { | |
| 1065 | - const mapMarkerPrerender = !this.state.overlayCreated | ||
| 1057 | + const mapMarkerPrerender = !this.state.overlay | ||
| 1066 | 1058 | ? <GoogleMapMarkersPrerender | |
| 1067 | 1059 | experimental={this.props.experimental} | |
| 1068 | 1060 | onChildClick={this._onChildClick} | |
@@ -1085,6 +1077,22 @@ export default class GoogleMap extends Component { | |||
| 1085 | 1077 | onClick={this._onMapClick} | |
| 1086 | 1078 | > | |
| 1087 | 1079 | <GoogleMapMap registerChild={this._registerChild} /> | |
| 1080 | + {this.state.overlay && | ||
| 1081 | + ReactDOM.createPortal( | ||
| 1082 | + <GoogleMapMarkers | ||
| 1083 | + experimental={this.props.experimental} | ||
| 1084 | + onChildClick={this._onChildClick} | ||
| 1085 | + onChildMouseDown={this._onChildMouseDown} | ||
| 1086 | + onChildMouseEnter={this._onChildMouseEnter} | ||
| 1087 | + onChildMouseLeave={this._onChildMouseLeave} | ||
| 1088 | + geoService={this.geoService_} | ||
| 1089 | + insideMapPanes | ||
| 1090 | + distanceToMouse={this.props.distanceToMouse} | ||
| 1091 | + getHoverDistance={this._getHoverDistance} | ||
| 1092 | + dispatcher={this.markersDispatcher_} | ||
| 1093 | + />, | ||
| 1094 | + this.state.overlay | ||
| 1095 | + )} | ||
| 1088 | 1096 | ||
| 1089 | 1097 | {/* render markers before map load done */} | |
| 1090 | 1098 | {mapMarkerPrerender} | |
0 commit comments