update react import style

dev-docs/RFCs/v1.0/react-map-gl-draw.md

@@ -86,7 +86,7 @@ As shown in the above image, for the feature currently being edited,
 
 ## Code Example
 ```js
-import React, { Component } from 'react';
+import * as React from 'react';
 import MapGL, {_MapContext as MapContext} from 'react-map-gl';
 import MapGLDraw, { EditorModes } from 'react-map-gl-draw';
 
@@ -98,7 +98,7 @@ const MODES = [
   { id: EditorModes.DRAW_RECTANGLE, text: 'Draw Rectangle'}
 ];
 
-class App extends Component {
+class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {

docs/api-reference/react-map-gl-draw/react-map-gl-draw.md

@@ -113,7 +113,7 @@ As shown in the above image, for the feature currently being edited,
 **Simple example: Draw polygon**
 
 ```js
-import React, { Component } from 'react';
+import * as React from 'react';
 import MapGL from 'react-map-gl';
 import {
   Editor,

docs/get-started/basic-usage.md

@@ -2,7 +2,7 @@
 
 ## Imports
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import DeckGL from '@deck.gl/react';
 import { EditableGeoJsonLayer } from '@nebula.gl/layers';
 import { StaticMap } from 'react-map-gl';

examples/advanced/src/app.tsx

@@ -1,6 +1,6 @@
 import document from 'global/document';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 import Example from './example';
 

examples/advanced/src/example.tsx

@@ -1,7 +1,7 @@
 /* eslint-env browser */
 
 import window from 'global/window';
-import React, { Component } from 'react';
+import * as React from 'react';
 import DeckGL from '@deck.gl/react';
 import { MapView, MapController } from '@deck.gl/core';
 import { StaticMap } from 'react-map-gl';
@@ -197,7 +197,7 @@ function getEditHandleColor(handle: {}) {
   }
 }
 
-export default class Example extends Component<
+export default class Example extends React.Component<
   {},
   {
     viewport: Record<string, any>;

examples/advanced/src/toolbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 const styles = {

examples/codesandbox/examples.old.txt

@@ -1,13 +1,13 @@
 import window from 'global/window';
-import React, { Component } from 'react';
+import * as React from 'react';
 import MapGL from 'react-map-gl';
 import DeckGL from 'deck.gl';
 import { featureCollection, point } from '@turf/helpers';
 
 import { EditableGeoJsonLayer } from 'nebula.gl';
 import { Nebula, HtmlOverlay, HtmlOverlayItem, HtmlClusterOverlay } from 'nebula.gl-react';
 
-class Example extends Component {
+class Example extends React.Component {
   constructor() {
     super();
     this.state = {

examples/editor/app.js

@@ -1,6 +1,6 @@
 import document from 'global/document';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 import { Example } from './example';
 

examples/editor/example.js

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 
-import React from 'react';
+import * as React from 'react';
 import DeckGL from '@deck.gl/react';
 import { EditableGeoJsonLayer } from '@nebula.gl/layers';
 import { Toolbox } from '@nebula.gl/editor';

examples/no-map/app.js

@@ -1,6 +1,6 @@
 import document from 'global/document';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 import ExampleNoMap from './example-no-map';
 

examples/overlays/app.js

@@ -1,6 +1,6 @@
 import document from 'global/document';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 import Example from './example';
 

examples/overlays/example.js

@@ -1,5 +1,5 @@
 import window from 'global/window';
-import React, { Component } from 'react';
+import * as React from 'react';
 import DeckGL from '@deck.gl/react';
 import { StaticMap } from 'react-map-gl';
 
@@ -109,7 +109,7 @@ class WorldHeritage extends HtmlClusterOverlay {
   }
 }
 
-export default class Example extends Component {
+export default class Example extends React.Component {
   constructor(props) {
     super(props);
 

examples/react-map-gl-draw/app.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { render } from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import MapGL from 'react-map-gl';
 import { Editor, EditingMode } from 'react-map-gl-draw';
 
@@ -33,7 +33,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+export default class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -106,5 +106,5 @@ export default class App extends Component {
 }
 
 export function renderToDom(container) {
-  render(<App />, container);
+  ReactDOM.render(<App />, container);
 }

examples/sf/app.js

@@ -1,6 +1,6 @@
 import document from 'global/document';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 import Example from './example';
 

examples/sf/example.js

@@ -1,5 +1,5 @@
 import window from 'global/window';
-import React, { Component } from 'react';
+import * as React from 'react';
 import DeckGL, { TextLayer } from 'deck.gl';
 import MapGL from 'react-map-gl';
 
@@ -35,7 +35,7 @@ const styles = {
   },
 };
 
-export default class Example extends Component<
+export default class Example extends React.Component<
   {},
   {
     viewport: Object,

lib/examples/advanced/src/app.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=app.d.ts.map

lib/examples/advanced/src/example.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { GeoJsonEditMode } from 'nebula.gl';
+export default class Example extends React.Component<{}, {
+    viewport: Record<string, any>;
+    testFeatures: any;
+    mode: typeof GeoJsonEditMode;
+    modeConfig: any;
+    pointsRemovable: boolean;
+    selectedFeatureIndexes: number[];
+    editHandleType: string;
+    selectionTool?: string;
+    showGeoJson: boolean;
+    pathMarkerLayer: boolean;
+    featureMenu?: {
+        index: number;
+        x: number;
+        y: number;
+    };
+}> {
+    constructor(props: {});
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    _onChangeViewport: (viewport: Record<string, any>) => void;
+    _onLayerClick: (info: any) => void;
+    _resize: () => void;
+    _loadSample: (type: string) => void;
+    _copy: () => void;
+    _paste: () => void;
+    _download: () => void;
+    _parseStringJson: (json: string) => void;
+    _error: (err: any) => void;
+    _getHtmlColorForFeature(index: number, selected: boolean): string;
+    _getDeckColorForFeature(index: number, bright: number, alpha: number): number[];
+    _renderSelectFeatureCheckbox(index: number, featureType: string): JSX.Element;
+    _renderSelectFeatureCheckboxes(): any[];
+    _renderBooleanOperationControls(): JSX.Element;
+    _renderTwoClickPolygonControls(): JSX.Element;
+    _renderModifyModeControls(): JSX.Element;
+    _renderSplitModeControls(): JSX.Element;
+    _renderSnappingControls(): JSX.Element;
+    _renderMeasureDistanceControls(): JSX.Element;
+    _renderModeConfigControls(): any[];
+    _renderToolBox(): JSX.Element;
+    renderStaticMap(viewport: Record<string, any>): JSX.Element;
+    _featureMenuClick(action: string): void;
+    _renderFeatureMenu({ x, y }: {
+        x: number;
+        y: number;
+    }): JSX.Element;
+    customizeLayers(layers: Record<string, any>[]): void;
+    onEdit: ({ updatedData, editType, editContext }: {
+        updatedData: any;
+        editType: any;
+        editContext: any;
+    }) => void;
+    getFillColor: (feature: any, isSelected: any) => number[];
+    getLineColor: (feature: any, isSelected: any) => number[];
+    render(): JSX.Element;
+}
+//# sourceMappingURL=example.d.ts.map