From ccfadd4b8846f99fdbe1d6ab8c2c25af4943f8d1 Mon Sep 17 00:00:00 2001 From: Tom Chen Date: Thu, 19 Nov 2015 11:54:28 +0800 Subject: [PATCH 1/2] feat(async/ScriptjsLoader): replacement of async/ScriptjsGoogleMap * Mark async/ScriptjsGoogleMap as deprecated * Closes #145 * Ref #92 BREAKING CHANGE: migrate from async/ScriptjsGoogleMap to async/ScriptjsLoader and changed its behavior from implicit inheritance to simple delegation To migrate the code follow the example below (extracted from examples/gh-pages migration): Before: ```js props defaultZoom={3} defaultCenter={{lat: -25.363882, lng: 131.044922}} onClick={::this._handle_map_click} /> ``` After: ```js } /> ``` --- src/async/ScriptjsGoogleMap.js | 65 ++++++++++++-------------------- src/async/ScriptjsLoader.js | 69 ++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 42 deletions(-) create mode 100644 src/async/ScriptjsLoader.js diff --git a/src/async/ScriptjsGoogleMap.js b/src/async/ScriptjsGoogleMap.js index 7c2a5fc4..9bc79933 100644 --- a/src/async/ScriptjsGoogleMap.js +++ b/src/async/ScriptjsGoogleMap.js @@ -1,13 +1,8 @@ import { default as React, Component, - PropTypes, } from "react"; -import { - default as canUseDOM, -} from "can-use-dom"; - import { default as warning, } from "warning"; @@ -17,49 +12,35 @@ import { } from "../index"; import { - default as makeUrl, - urlObjDefinition, - getUrlObjChangedKeys, -} from "../utils/makeUrl"; + default as ScriptjsLoader, +} from "./ScriptjsLoader"; export default class ScriptjsGoogleMap extends Component { - static propTypes = { - ...urlObjDefinition, - // PropTypes for ScriptjsGoogleMap - loadingElement: PropTypes.node, - } - - state = { - isLoaded: false, - } componentWillMount () { - if (!canUseDOM) { - return; - } - const scriptjs = require("scriptjs"); - const {protocol, hostname, port, pathname, query, ...restProps} = this.props; - const urlObj = {protocol, hostname, port, pathname, query}; - const url = makeUrl(urlObj); - scriptjs(url, () => this.setState({ isLoaded: true })); - } - - componentWillReceiveProps (nextProps) { - if ("production" !== process.env.NODE_ENV) { - const changedKeys = getUrlObjChangedKeys(this.props, nextProps); - - warning(0 === changedKeys.length, `ScriptjsGoogleMap doesn't support mutating url related props after initial render. Changed props: %s`, `[${ changedKeys.join(", ") }]`); - } + warning(false, +`"async/ScriptjsGoogleMap" is deprecated now and will be removed in next major release (5.0.0). Use "async/ScriptjsLoader" instead. +See https://github.com/tomchentw/react-google-maps/pull/150 for more details.` + ); } render () { - if (this.state.isLoaded) { - const {protocol, hostname, port, pathname, query, ...restProps} = this.props; - return ( - - ); - } else { - return this.props.loadingElement; - } + const {protocol, hostname, port, pathname, query, loadingElement, children, ...restProps} = this.props; + + return ( + + {children} + + } + /> + ) } } diff --git a/src/async/ScriptjsLoader.js b/src/async/ScriptjsLoader.js new file mode 100644 index 00000000..5e4c37d8 --- /dev/null +++ b/src/async/ScriptjsLoader.js @@ -0,0 +1,69 @@ +import { + default as React, + Component, + PropTypes, +} from "react"; + +import { + default as canUseDOM, +} from "can-use-dom"; + +import { + default as warning, +} from "warning"; + +import { + GoogleMap, +} from "../index"; + +import { + default as makeUrl, + urlObjDefinition, + getUrlObjChangedKeys, +} from "../utils/makeUrl"; + +export default class ScriptjsLoader extends Component { + static propTypes = { + ...urlObjDefinition, + // PropTypes for ScriptjsLoader + loadingElement: PropTypes.node, + googleMapElement: PropTypes.element.isRequired, + } + + state = { + isLoaded: false, + } + + componentWillMount () { + if (!canUseDOM) { + return; + } + /* + * External commonjs require dependency -- begin + */ + const scriptjs = require("scriptjs"); + /* + * External commonjs require dependency -- end + */ + const {protocol, hostname, port, pathname, query} = this.props; + const urlObj = {protocol, hostname, port, pathname, query}; + const url = makeUrl(urlObj); + scriptjs(url, () => this.setState({ isLoaded: true })); + } + + componentWillReceiveProps (nextProps) { + if ("production" !== process.env.NODE_ENV) { + const changedKeys = getUrlObjChangedKeys(this.props, nextProps); + + warning(0 === changedKeys.length, `ScriptjsLoader doesn't support mutating url related props after initial render. Changed props: %s`, `[${ changedKeys.join(", ") }]`); + } + } + + render () { + if (this.state.isLoaded) { + return this.props.googleMapElement; + } else { + return this.props.loadingElement; + } + } +} From a80a25f05265ffaa818ce879fff6a2ac6d827bd1 Mon Sep 17 00:00:00 2001 From: Tom Chen Date: Thu, 19 Nov 2015 12:01:33 +0800 Subject: [PATCH 2/2] chore(gh-pages): migration from ScriptjsGoogleMap to ScriptjsLoader * Ref #145 --- .../scripts/components/AsyncGettingStarted.js | 55 +++++++++++-------- 1 file changed, 33 insertions(+), 22 deletions(-) diff --git a/examples/gh-pages/scripts/components/AsyncGettingStarted.js b/examples/gh-pages/scripts/components/AsyncGettingStarted.js index 37559691..5f6ddae3 100644 --- a/examples/gh-pages/scripts/components/AsyncGettingStarted.js +++ b/examples/gh-pages/scripts/components/AsyncGettingStarted.js @@ -2,8 +2,8 @@ import {default as React, Component} from "react"; import {default as update} from "react-addons-update"; import {default as FaSpinner} from "react-icons/lib/fa/spinner"; -import {default as ScriptjsGoogleMap} from "react-google-maps/lib/async/ScriptjsGoogleMap"; -import {Marker} from "react-google-maps"; +import {default as ScriptjsLoader} from "react-google-maps/lib/async/ScriptjsLoader"; +import {GoogleMap, Marker} from "react-google-maps"; /* * This is the modify version of: @@ -69,7 +69,7 @@ export default class AsyncGettingStarted extends Component { render () { //