address comments

uber · Sep 12, 2019 · 7f6cff7 · 7f6cff7
1 parent ef12573
commit 7f6cff7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 48 deletions.
diff --git a/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md b/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md
@@ -121,15 +121,12 @@ const DEFAULT_VIEWPORT = {
 };
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      // map
-      viewport: DEFAULT_VIEWPORT,
-      // editor
-      selectedMode: EditorModes.READ_ONLY
-    };
-  }
+  state = {
+    // map
+    viewport: DEFAULT_VIEWPORT,
+    // editor
+    selectedMode: EditorModes.READ_ONLY
+  };
 
   _switchMode = evt => {
     const selectedMode = evt.target.id;
@@ -154,14 +151,12 @@ class App extends Component {
     return (
       <MapGL
         {...viewport}
-        ref={_ => (this._mapRef = _)}
         width="100%"
         height="100%"
         mapStyle={'mapbox://styles/mapbox/light-v9'}
         onViewportChange={this.setState({ viewport })}
       >
         <Editor
-          ref={_ => (this._editorRef = _)}
           clickRadius={12}
           mode={selectedMode}
         />

diff --git a/modules/react-map-gl-draw/README.md b/modules/react-map-gl-draw/README.md
@@ -16,9 +16,10 @@
 - `selectedFeatureIndex` (String, Optional) - Index of the selected feature. `EditorModes` assigns a unique id to each feature which is stored in `feature.properties.id`.
 - `clickRadius` (Number, Optional) - Radius to detect features around a hovered or clicked point. Default value is `0`
 
-- `onSelect` (Function, Optional) - callback when a feature or an editHandle is selected. Receives an object containing the following parameters
-  - `selectedFeatureIndex`: selected feature index.
-  - `editHandleIndex`: selected editHandle index.
+- `onSelect` (Function, Optional) - callback when clicking a position under `SELECT` and `EDITTING` mode. Receives an object containing the following parameters
+  - `selectedFeature`: selected feature. `null` if clicked an empty space.
+  - `selectedFeatureIndex`: selected feature index.`-1` if clicked an empty space.
+  - `editHandleIndex`: selected editHandle index. `-1` if clicked an empty space.
   - `screenCoords`: screen coordinates of the clicked position.
   - `mapCoords`: map coordinates of the clicked position.
 
@@ -120,17 +121,12 @@ const DEFAULT_VIEWPORT = {
 };
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      // map
-      viewport: DEFAULT_VIEWPORT,
-      // editor
-      selectedMode: EditorModes.READ_ONLY
-    };
-    this._mapRef = null;
-    this._editorRef = null;
-  }
+  state = {
+    // map
+    viewport: DEFAULT_VIEWPORT,
+    // editor
+    selectedMode: EditorModes.READ_ONLY
+  };
 
   _switchMode = evt => {
     const selectedMode = evt.target.id;
@@ -155,14 +151,12 @@ class App extends Component {
     return (
       <MapGL
         {...viewport}
-        ref={_ => (this._mapRef = _)}
         width="100%"
         height="100%"
         mapStyle={'mapbox://styles/mapbox/light-v9'}
         onViewportChange={this.setState({ viewport })}
       >
         <Editor
-          ref={_ => (this._editorRef = _)}
           clickRadius={12}
           mode={selectedMode}
         />

diff --git a/modules/react-map-gl-draw/src/mode-handler.js b/modules/react-map-gl-draw/src/mode-handler.js
@@ -33,26 +33,6 @@ const MODE_TO_HANDLER = Object.freeze({
   [MODES.DRAW_POLYGON]: DrawPolygonMode
 });
 
-const getMemorizedFeatureCollection = memoize(({ propsFeatures, stateFeatures }: any) => {
-  const features = propsFeatures || stateFeatures;
-  // Any changes in ImmutableFeatureCollection will create a new object
-  if (features instanceof ImmutableFeatureCollection) {
-    return features;
-  }
-
-  if (features && features.type === 'FeatureCollection') {
-    return new ImmutableFeatureCollection({
-      type: 'FeatureCollection',
-      features: features.features
-    });
-  }
-
-  return new ImmutableFeatureCollection({
-    type: 'FeatureCollection',
-    features: features || []
-  });
-});
-
 const defaultProps = {
   mode: MODES.READ_ONLY,
   features: null,
@@ -174,8 +154,28 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
   }
 
   /* MEMORIZERS */
+  _getMemorizedFeatureCollection = memoize(({ propsFeatures, stateFeatures }: any) => {
+    const features = propsFeatures || stateFeatures;
+    // Any changes in ImmutableFeatureCollection will create a new object
+    if (features instanceof ImmutableFeatureCollection) {
+      return features;
+    }
+
+    if (features && features.type === 'FeatureCollection') {
+      return new ImmutableFeatureCollection({
+        type: 'FeatureCollection',
+        features: features.features
+      });
+    }
+
+    return new ImmutableFeatureCollection({
+      type: 'FeatureCollection',
+      features: features || []
+    });
+  });
+
   _getFeatureCollection = () => {
-    return getMemorizedFeatureCollection({
+    return this._getMemorizedFeatureCollection({
       propsFeatures: this.props.features,
       stateFeatures: this.state.featureCollection
     });
@@ -263,6 +263,7 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
           this._onSelect({
             selectedFeature,
             selectedFeatureIndex: featureIndex,
+            selectedEditHandleIndex: null,
             screenCoords,
             mapCoords
           });