From 3ee4612504f698a04b263734cf36fb5e5b09b0e3 Mon Sep 17 00:00:00 2001 From: "tam.vu" Date: Mon, 16 Sep 2019 14:00:44 +0700 Subject: [PATCH 1/3] Change CustomOverlayView in SearchMapWithGoogleMap: - Adding onAdd and onRemove function to improve performance - Rewrite current draw() method to compatible with newer react version --- CHANGELOG.md | 5 +++ .../SearchMap/SearchMapWithGoogleMap.js | 42 ++++++++++++++++++- 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c6779922..6910e12d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,11 @@ way to update this template, but currently, we follow a pattern: ## Upcoming version 2019-XX-XX +## [v3.5.1] 2019-09-16 + +- [add] add orverriding function `onAdd` and `onRemove` for `CustomOverlayView` in `SearchMapWithGoogleMap` to abide to React rules and do not `unmountComponentAtNode` when a component is rendered by React and use `appendChild` on `onAdd` instead of `draw` to [improve performance](https://github.com/tomchentw/react-google-maps/issues/817). +- [fix] fix `CustomOverlayView` in `SearchMapWithGoogleMap` to work with new `react-intl` version, overriding `render` method to render child object by using `createPortal` instead of `unstable_renderSubtreeIntoContainer`. + ## [v3.5.0] 2019-08-29 - [change] Change the design of `BookingBreakdown` and add options to show only dates or booking diff --git a/src/components/SearchMap/SearchMapWithGoogleMap.js b/src/components/SearchMap/SearchMapWithGoogleMap.js index fd138e8f4..a22d97376 100644 --- a/src/components/SearchMap/SearchMapWithGoogleMap.js +++ b/src/components/SearchMap/SearchMapWithGoogleMap.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import invariant from 'invariant'; import { arrayOf, func, node, number, oneOfType, shape, string } from 'prop-types'; import isEqual from 'lodash/isEqual'; import { withGoogleMap, GoogleMap, OverlayView } from 'react-google-maps'; @@ -86,12 +88,50 @@ export const isMapsLibLoaded = () => * https://github.com/tomchentw/react-google-maps/issues/482 */ class CustomOverlayView extends OverlayView { + + onRemove() { + this.containerElement.parentNode.removeChild(this.containerElement); + //Remove `unmountComponentAtNode` for react version 16 + //I decided to keep the code here incase React decides not to give out warning when `unmountComponentAtNode` in newer version + if (!React.version.match(/^16/)) { + ReactDOM.unmountComponentAtNode(this.containerElement); + } + this.containerElement = null; + } + + onAdd() { + this.containerElement = document.createElement(`div`); + this.containerElement.style.position = `absolute`; + + const { mapPaneName } = this.props; + invariant( + !!mapPaneName, + `OverlayView requires either props.mapPaneName or props.defaultMapPaneName but got %s`, + mapPaneName + ); + + const mapPanes = this.state[OVERLAY_VIEW].getPanes(); + mapPanes[mapPaneName].appendChild(this.containerElement); + this.onPositionElement(); + this.forceUpdate(); + } + + render() { + if (React.version.match(/^16/) && this.containerElement) { + return ReactDOM.createPortal( + React.Children.only(this.props.children), + this.containerElement + ); + } + return false; + } + draw() { // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes const mapPanes = this.state[OVERLAY_VIEW].getPanes(); // Add conditional to ensure panes and container exist before drawing if (mapPanes && this.containerElement) { - super.draw(); + this.onPositionElement(); } } } From dc6b6f813f02bcab79de40f4dc5efcbfd671fa6b Mon Sep 17 00:00:00 2001 From: "tam.vu" Date: Tue, 17 Sep 2019 13:33:25 +0700 Subject: [PATCH 2/3] Run prettier format for modified files --- CHANGELOG.md | 9 +++++++-- src/components/SearchMap/SearchMapWithGoogleMap.js | 6 +----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6910e12d0..4982358ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,8 +16,13 @@ way to update this template, but currently, we follow a pattern: ## [v3.5.1] 2019-09-16 -- [add] add orverriding function `onAdd` and `onRemove` for `CustomOverlayView` in `SearchMapWithGoogleMap` to abide to React rules and do not `unmountComponentAtNode` when a component is rendered by React and use `appendChild` on `onAdd` instead of `draw` to [improve performance](https://github.com/tomchentw/react-google-maps/issues/817). -- [fix] fix `CustomOverlayView` in `SearchMapWithGoogleMap` to work with new `react-intl` version, overriding `render` method to render child object by using `createPortal` instead of `unstable_renderSubtreeIntoContainer`. +- [add] add orverriding function `onAdd` and `onRemove` for `CustomOverlayView` in + `SearchMapWithGoogleMap` to abide to React rules and do not `unmountComponentAtNode` when a + component is rendered by React and use `appendChild` on `onAdd` instead of `draw` to + [improve performance](https://github.com/tomchentw/react-google-maps/issues/817). +- [fix] fix `CustomOverlayView` in `SearchMapWithGoogleMap` to work with new `react-intl` version, + overriding `render` method to render child object by using `createPortal` instead of + `unstable_renderSubtreeIntoContainer`. ## [v3.5.0] 2019-08-29 diff --git a/src/components/SearchMap/SearchMapWithGoogleMap.js b/src/components/SearchMap/SearchMapWithGoogleMap.js index a22d97376..b7ba46b10 100644 --- a/src/components/SearchMap/SearchMapWithGoogleMap.js +++ b/src/components/SearchMap/SearchMapWithGoogleMap.js @@ -88,7 +88,6 @@ export const isMapsLibLoaded = () => * https://github.com/tomchentw/react-google-maps/issues/482 */ class CustomOverlayView extends OverlayView { - onRemove() { this.containerElement.parentNode.removeChild(this.containerElement); //Remove `unmountComponentAtNode` for react version 16 @@ -118,10 +117,7 @@ class CustomOverlayView extends OverlayView { render() { if (React.version.match(/^16/) && this.containerElement) { - return ReactDOM.createPortal( - React.Children.only(this.props.children), - this.containerElement - ); + return ReactDOM.createPortal(React.Children.only(this.props.children), this.containerElement); } return false; } From 57c243f191d70f4dc247f1ad88148ac9e54a1abe Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 17 Sep 2019 12:48:29 +0300 Subject: [PATCH 3/3] New release: v3.5.1 --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4982358ac..7e0651169 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,9 +20,11 @@ way to update this template, but currently, we follow a pattern: `SearchMapWithGoogleMap` to abide to React rules and do not `unmountComponentAtNode` when a component is rendered by React and use `appendChild` on `onAdd` instead of `draw` to [improve performance](https://github.com/tomchentw/react-google-maps/issues/817). + [#1200](https://github.com/sharetribe/flex-template-web/pull/1200) - [fix] fix `CustomOverlayView` in `SearchMapWithGoogleMap` to work with new `react-intl` version, overriding `render` method to render child object by using `createPortal` instead of `unstable_renderSubtreeIntoContainer`. + [#1200](https://github.com/sharetribe/flex-template-web/pull/1200) ## [v3.5.0] 2019-08-29 diff --git a/package.json b/package.json index 6e2a0e1fa..293137bb2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "app", - "version": "3.5.0", + "version": "3.5.1", "private": true, "license": "Apache-2.0", "dependencies": {