refactor(LanguageControl): pass control options as a separate props

urbica · Mar 31, 2019 · e77ba81 · e77ba81
1 parent e207dd6
commit e77ba81
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -38,9 +38,9 @@ npm install --save mapbox-gl @urbica/react-map-gl
 yarn add mapbox-gl @urbica/react-map-gl
 ```
 
-### Optional Dependency
+### Optional Dependencies
 
-If you use the `LanguageControl`:
+If you want to use the `LanguageControl`:
 
 ```shell
 npm install --save @mapbox/mapbox-gl-language
@@ -65,7 +65,7 @@ yarn add @mapbox/mapbox-gl-language
 | [Marker](src/components/Marker)                           | React Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)                            |
 | [FeatureState](src/components/FeatureState)               | Sets the state of a geographic feature rendered on the map                                                             |
 | [AttributionControl](src/components/AttributionControl)   | Represents the map's attribution information                                                                           |
-| [LanguageControl](src/components/LanguageControl)         | Change the language of the map                                                                                         |
+| [LanguageControl](src/components/LanguageControl)         | Adds support for switching the language of the map style                                                               |
 | [FullscreenControl](src/components/FullscreenControl)     | Contains a button for toggling the map in and out of fullscreen mode                                                   |
 | [GeolocateControl](src/components/GeolocateControl)       | Geolocate the user and then track their current location on the map                                                    |
 | [NavigationControl](src/components/NavigationControl)     | Contains zoom buttons and a compass                                                                                    |

diff --git a/src/components/LanguageControl/README.md b/src/components/LanguageControl/README.md
@@ -1,5 +1,16 @@
-A `LanguageControl` that modifies the layers of the map style to use the 'text-field' that matches the browser language.
-⚠️ Require the package `@mapbox/mapbox-gl-language` (`npm install --save @mapbox/mapbox-gl-language`)
+A `LanguageControl` adds support for switching the language of your map style.
+
+⚠️ Requires the `@mapbox/mapbox-gl-language` package to be installed:
+
+```shell
+npm install --save @mapbox/mapbox-gl-language
+```
+
+...or
+
+```shell
+yarn add @mapbox/mapbox-gl-language
+```
 
 ```jsx
 import React from 'react';
@@ -14,6 +25,6 @@ import 'mapbox-gl/dist/mapbox-gl.css';
   longitude={-122.41}
   zoom={11}
 >
-  <LanguageControl options={{ defaultLanguage: 'fr' }} />
+  <LanguageControl defaultLanguage='fr' />
 </MapGL>;
 ```
diff --git a/src/components/LanguageControl/index.js b/src/components/LanguageControl/index.js
@@ -8,24 +8,26 @@ import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import MapContext from '../MapContext';
 
 type Props = {
-  /* Options to configure the plugin. */
-  options?: {
-    /* List of supported languages */
-    supportedLanguages?: string[],
-    /* Custom style transformation to apply */
-    languageTransform?: Function,
-    /**
-     * RegExp to match if a text-field is a language field
-     * (optional, default /^\{name/)
-     */
-    languageField?: RegExp,
-    /* Given a language choose the field in the vector tiles */
-    getLanguageField?: Function,
-    /* Name of the source that contains the different languages. */
-    languageSource?: string,
-    /* Name of the default language to initialize style after loading. */
-    defaultLanguage?: string
-  }
+  /** List of supported languages */
+  supportedLanguages?: string[],
+
+  /** Custom style transformation to apply */
+  languageTransform?: Function,
+
+  /**
+   * RegExp to match if a text-field is a language field
+   * (optional, default /^\{name/)
+   */
+  languageField?: RegExp,
+
+  /** Given a language choose the field in the vector tiles */
+  getLanguageField?: Function,
+
+  /** Name of the source that contains the different languages. */
+  languageSource?: string,
+
+  /** Name of the default language to initialize style after loading. */
+  defaultLanguage?: string
 };
 
 /**
@@ -40,17 +42,30 @@ class LanguageControl extends PureComponent<Props> {
 
   componentDidMount() {
     const map: MapboxMap = this._map;
+    const {
+      supportedLanguages,
+      languageTransform,
+      languageField,
+      getLanguageField,
+      languageSource,
+      defaultLanguage
+    } = this.props;
 
-    const control: MapboxLanguageControl = new MapboxLanguage(
-      this.props.options
-    );
+    const control: MapboxLanguageControl = new MapboxLanguage({
+      supportedLanguages,
+      languageTransform,
+      languageField,
+      getLanguageField,
+      languageSource,
+      defaultLanguage
+    });
 
     map.addControl(control);
     this._control = control;
   }
 
   componentWillUnmount() {
-    if (!this._map || !this._control) {
+    if (!this._map || !this._map.getStyle()) {
       return;
     }