From 4b44f94f77f4d327af3f04a71487ee347fa4c72e Mon Sep 17 00:00:00 2001 From: Hossein Moradi Davijani Date: Mon, 16 Sep 2019 22:52:56 +0430 Subject: [PATCH] Add babel react preset and migrate react components to jsx (#875) --- babel.config.js | 2 +- src/components/base-control.js | 14 ++-- src/components/fullscreen-control.js | 29 ++++---- src/components/geolocate-control.js | 72 +++++++++--------- src/components/interactive-map.js | 41 +++++----- src/components/marker.js | 17 +++-- src/components/navigation-control.js | 47 ++++++------ src/components/popup.js | 60 +++++++-------- src/components/static-map.js | 107 +++++++++++++-------------- src/overlays/canvas-overlay.js | 28 +++---- src/overlays/html-overlay.js | 25 +++---- src/overlays/svg-overlay.js | 27 +++---- test/src/components/map.spec.js | 14 ++-- test/src/components/marker.spec.js | 19 ++--- 14 files changed, 238 insertions(+), 264 deletions(-) diff --git a/babel.config.js b/babel.config.js index 22e981d1..c45d5dc4 100644 --- a/babel.config.js +++ b/babel.config.js @@ -4,7 +4,7 @@ const getBabelConfig = require('ocular-dev-tools/config/babel.config'); module.exports = api => { const config = getBabelConfig(api); - config.presets = (config.presets || []).concat('@babel/flow'); + config.presets = (config.presets || []).concat(['@babel/flow', '@babel/preset-react']); config.plugins = (config.plugins || []).concat('@babel/proposal-class-properties'); return config; diff --git a/src/components/base-control.js b/src/components/base-control.js index 889a01f8..62dfe3e0 100644 --- a/src/components/base-control.js +++ b/src/components/base-control.js @@ -18,7 +18,7 @@ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import {PureComponent, createElement, createRef} from 'react'; +import React, {PureComponent, createRef} from 'react'; import PropTypes from 'prop-types'; import MapContext from './map-context'; @@ -126,9 +126,13 @@ export default class BaseControl< } render() { - return createElement(MapContext.Consumer, null, context => { - this._context = context; - return this._render(); - }); + return ( + + {context => { + this._context = context; + return this._render(); + }} + + ); } } diff --git a/src/components/fullscreen-control.js b/src/components/fullscreen-control.js index 31e5681f..1d3b64a5 100644 --- a/src/components/fullscreen-control.js +++ b/src/components/fullscreen-control.js @@ -23,7 +23,7 @@ import {document} from '../utils/globals'; import PropTypes from 'prop-types'; import BaseControl from './base-control'; -import {createElement} from 'react'; +import React from 'react'; import mapboxgl from '../utils/mapboxgl'; import type {BaseControlProps} from './base-control'; @@ -106,13 +106,15 @@ export default class FullscreenControl extends BaseControl< }; _renderButton(type: string, label: string, callback: Function) { - return createElement('button', { - key: type, - className: `mapboxgl-ctrl-icon mapboxgl-ctrl-${type}`, - type: 'button', - title: label, - onClick: callback - }); + return ( + + ); } _render() { const {className, showCompass, showZoom} = this.props; - return createElement( - 'div', - { - className: `mapboxgl-ctrl mapboxgl-ctrl-group ${className}`, - ref: this._containerRef - }, - [ - showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn), - showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut), - showCompass && - this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass()) - ] + return ( +
+ {showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn)} + {showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut)} + {showCompass && + this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass())} +
); } } diff --git a/src/components/popup.js b/src/components/popup.js index c90dbc08..bd38b9e8 100644 --- a/src/components/popup.js +++ b/src/components/popup.js @@ -18,7 +18,7 @@ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import {createElement, createRef} from 'react'; +import React, {createRef} from 'react'; import PropTypes from 'prop-types'; import BaseControl from './base-control'; @@ -182,11 +182,7 @@ export default class Popup extends BaseControl { _renderTip(positionType: PositionType) { const {tipSize} = this.props; - return createElement('div', { - key: 'tip', - className: 'mapboxgl-popup-tip', - style: {borderWidth: tipSize} - }); + return
; } _renderContent() { @@ -194,27 +190,20 @@ export default class Popup extends BaseControl { // If eventManager does not exist (using with static map), listen to React event const onClick = this._context.eventManager ? null : this._onClick; - return createElement( - 'div', - { - key: 'content', - ref: this._contentRef, - className: 'mapboxgl-popup-content', - onClick - }, - [ - closeButton && - createElement( - 'button', - { - key: 'close-button', - className: 'mapboxgl-popup-close-button', - type: 'button' - }, - '×' - ), - children - ] + return ( +
+ {closeButton && ( + + )} + {children} +
); } @@ -226,14 +215,15 @@ export default class Popup extends BaseControl { const positionType = this._getPosition(x, y); const containerStyle = this._getContainerStyle(x, y, z, positionType); - return createElement( - 'div', - { - className: `mapboxgl-popup mapboxgl-popup-anchor-${positionType} ${className}`, - style: containerStyle, - ref: this._containerRef - }, - [this._renderTip(positionType), this._renderContent()] + return ( +
+ {this._renderTip(positionType)} + {this._renderContent()} +
); } } diff --git a/src/components/static-map.js b/src/components/static-map.js index a49e99a8..f92b0c2d 100644 --- a/src/components/static-map.js +++ b/src/components/static-map.js @@ -18,7 +18,7 @@ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import {PureComponent, createElement, createRef} from 'react'; +import React, {PureComponent, createRef} from 'react'; import PropTypes from 'prop-types'; import {normalizeStyle} from '../utils/style-utils'; @@ -242,11 +242,15 @@ export default class StaticMap extends PureComponent { left: 0, top: 0 }; - return createElement('div', {key: 'warning', id: 'no-token-warning', style}, [ - createElement('h3', {key: 'header'}, NO_TOKEN_WARNING), - createElement('div', {key: 'text'}, 'For information on setting up your basemap, read'), - createElement('a', {key: 'link', href: TOKEN_DOC_URL}, 'Note on Map Tokens') - ]); + return ( +
+

NO_TOKEN_WARNING

+
For information on setting up your basemap, read
+ + Note on Map Tokens + +
+ ); } return null; @@ -256,30 +260,31 @@ export default class StaticMap extends PureComponent { const {width = Number(this.props.width), height = Number(this.props.height)} = dimensions; this._updateMapSize(width, height); - return createElement(MapContext.Consumer, null, interactiveContext => { - const context = Object.assign({}, interactiveContext, { - viewport: new WebMercatorViewport( - // $FlowFixMe - Object.assign({}, this.props, this.props.viewState, { - width, - height - }) - ), - map: this._map, - mapContainer: interactiveContext.mapContainer || this._mapContainerRef.current - }); - - return createElement( - MapContext.Provider, - {value: context}, - createElement('div', { - key: 'map-overlays', - className: 'overlays', - style: CONTAINER_STYLE, - children: this.props.children - }) - ); - }); + return ( + + {interactiveContext => { + const context = { + ...interactiveContext, + // $FlowFixMe + viewport: new WebMercatorViewport({ + ...this.props, + ...this.props.viewState, + width, + height + }), + map: this._map, + mapContainer: interactiveContext.mapContainer || this._mapContainerRef.current + }; + return ( + +
+ {this.props.children} +
+ + ); + }} + + ); } render() { @@ -297,31 +302,21 @@ export default class StaticMap extends PureComponent { visibility: visible ? 'inherit' : 'hidden' }); - return createElement('div', { - key: 'map-container', - style: mapContainerStyle, - ref: this._mapContainerRef, - children: [ - createElement('div', { - key: 'map-mapbox', - ref: this._mapboxMapRef, - style: mapStyle, - className - }), - // AutoSizer is a pure component and does not rerender when map props change - // rebind the callback so that it's triggered every render pass - createElement( - AutoSizer, - { - key: 'autosizer', - disableWidth: Number.isFinite(width), - disableHeight: Number.isFinite(height), - onResize: this.props.onResize - }, - this._renderOverlays.bind(this) - ), - this._renderNoTokenWarning() - ] - }); + return ( +
+
+ {/* AutoSizer is a pure component and does not rerender when map props change */} + {/* rebind the callback so that it's triggered every render pass */} + + {this._renderOverlays.bind(this)} + + {this._renderNoTokenWarning()} +
+ ); } } diff --git a/src/overlays/canvas-overlay.js b/src/overlays/canvas-overlay.js index 5e36dc6e..bcae19d6 100644 --- a/src/overlays/canvas-overlay.js +++ b/src/overlays/canvas-overlay.js @@ -19,7 +19,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import {createElement} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import BaseControl from '../components/base-control'; import {window} from '../utils/globals'; @@ -87,17 +87,19 @@ export default class CanvasOverlay extends BaseControl + ); } } diff --git a/src/overlays/html-overlay.js b/src/overlays/html-overlay.js index 977f5d36..99c3ae72 100644 --- a/src/overlays/html-overlay.js +++ b/src/overlays/html-overlay.js @@ -20,7 +20,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import {createElement} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import BaseControl from '../components/base-control'; @@ -60,19 +60,16 @@ export default class HTMLOverlay extends BaseControl + {this.props.redraw({ + width: viewport.width, + height: viewport.height, + isDragging, + project: viewport.project.bind(viewport), + unproject: viewport.unproject.bind(viewport) + })} +
); } } diff --git a/src/overlays/svg-overlay.js b/src/overlays/svg-overlay.js index 06749e6f..39324a1f 100644 --- a/src/overlays/svg-overlay.js +++ b/src/overlays/svg-overlay.js @@ -20,7 +20,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import {createElement} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import BaseControl from '../components/base-control'; @@ -58,21 +58,16 @@ export default class SVGOverlay extends BaseControl this.props.style ); - return createElement( - 'svg', - { - width: viewport.width, - height: viewport.height, - ref: this._containerRef, - style - }, - this.props.redraw({ - width: viewport.width, - height: viewport.height, - isDragging, - project: viewport.project.bind(viewport), - unproject: viewport.unproject.bind(viewport) - }) + return ( + + {this.props.redraw({ + width: viewport.width, + height: viewport.height, + isDragging, + project: viewport.project.bind(viewport), + unproject: viewport.unproject.bind(viewport) + })} + ); } } diff --git a/test/src/components/map.spec.js b/test/src/components/map.spec.js index a78a4dfc..e72a30bd 100644 --- a/test/src/components/map.spec.js +++ b/test/src/components/map.spec.js @@ -1,6 +1,6 @@ /* global setTimeout, clearTimeout */ import MapGL, {InteractiveMap} from 'react-map-gl'; -import {createElement} from 'react'; +import React from 'react'; import ReactTestUtils from 'react-test-renderer/shallow'; import ReactTestRenderer from 'react-test-renderer'; import sinon from 'sinon'; @@ -81,7 +81,7 @@ const TEST_CASES = [ test('InteractiveMap#default export', t => { t.ok(MapGL, 'InteractiveMap is defined'); - const map = createElement(MapGL, defaultProps); + const map = ; const result = ReactTestUtils.createRenderer().render(map); t.ok(result, 'InteractiveMap rendered'); @@ -91,7 +91,7 @@ test('InteractiveMap#default export', t => { test('InteractiveMap#named export', t => { t.ok(InteractiveMap, 'InteractiveMap is defined'); - const map = createElement(InteractiveMap, defaultProps); + const map = ; const result = ReactTestUtils.createRenderer().render(map); t.ok(result, 'InteractiveMap rendered'); @@ -139,7 +139,7 @@ TEST_CASES.forEach(testCase => { const props = Object.assign({}, testCase.props, {onLoad}); - const map = createElement(InteractiveMap, props); + const map = ; result = ReactTestRenderer.create(map); @@ -157,8 +157,8 @@ TEST_CASES.forEach(testCase => { // children are no longer rendered on first pass due to auto sizer test.skip('Interactive map renders children on first render', t => { const childComponent = sinon.spy(() => null); - const child = createElement(childComponent); - const map = createElement(InteractiveMap, defaultProps, child); + const child = ; + const map = {child}; try { const result = ReactTestRenderer.create(map); // Unmount the component to avoid creating too many maps @@ -178,7 +178,7 @@ test('Interactive map#call transformRequest callback when provided', t => { const props = Object.assign({}, defaultProps, {transformRequest}); - const map = createElement(InteractiveMap, props); + const map = ; // const result = ReactTestUtils.createRenderer().render(map); const result = ReactTestRenderer.create(map); diff --git a/test/src/components/marker.spec.js b/test/src/components/marker.spec.js index 7ae79f44..9d1c35e9 100644 --- a/test/src/components/marker.spec.js +++ b/test/src/components/marker.spec.js @@ -26,19 +26,14 @@ const mockInteractiveContext = Object.assign({}, mockStaticContext, { test('Marker#renders children', t => { t.ok(Marker, 'Marker is defined'); - const marker = React.createElement( - Marker, - { - latitude: 37, - longitude: -122 - }, - React.createElement('div', {className: 'test-marker'}, ['hello']) + const marker = ( + +
hello
+ ); - const staticUsage = React.createElement(MapContext.Provider, {value: mockStaticContext}, marker); - const interactiveUsage = React.createElement( - MapContext.Provider, - {value: mockInteractiveContext}, - marker + const staticUsage = {marker}; + const interactiveUsage = ( + {marker} ); const result = ReactTestRenderer.create(staticUsage);