[Enhancement] add disableClose to map control (#1529)

Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Jul 18, 2021 · 01e9396 · 01e9396
1 parent c6e5b8a
commit 01e9396
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 27 deletions.
diff --git a/src/components/map/map-control.js b/src/components/map/map-control.js
@@ -125,29 +125,34 @@ const MapLegendTooltip = ({id, message}) => (
 );
 
 /** @type {import('./map-control').LayerSelectorPanelComponent} */
-const LayerSelectorPanel = React.memo(({items, onMapToggleLayer, isActive, toggleMenuPanel}) =>
-  !isActive ? (
-    (<MapControlButton
-      key={1}
-      onClick={e => {
-        e.preventDefault();
-        toggleMenuPanel();
-      }}
-      className="map-control-button toggle-layer"
-      data-tip
-      data-for="toggle-layer"
-    >
-      <Layers height="22px" />
-      <MapControlTooltip
-        id="toggle-layer"
-        message={isActive ? 'tooltip.hideLayerPanel' : 'tooltip.showLayerPanel'}
-      />
-    </MapControlButton>)
-  ) : (
-    (<MapControlPanel header="header.visibleLayers" onClick={toggleMenuPanel}>
-      <MapLayerSelector layers={items} onMapToggleLayer={onMapToggleLayer} />
-    </MapControlPanel>)
-  )
+const LayerSelectorPanel = React.memo(
+  ({items, onMapToggleLayer, isActive, toggleMenuPanel, disableClose}) =>
+    !isActive ? (
+      (<MapControlButton
+        key={1}
+        onClick={e => {
+          e.preventDefault();
+          toggleMenuPanel();
+        }}
+        className="map-control-button toggle-layer"
+        data-tip
+        data-for="toggle-layer"
+      >
+        <Layers height="22px" />
+        <MapControlTooltip
+          id="toggle-layer"
+          message={isActive ? 'tooltip.hideLayerPanel' : 'tooltip.showLayerPanel'}
+        />
+      </MapControlButton>)
+    ) : (
+      (<MapControlPanel
+        header="header.visibleLayers"
+        onClick={toggleMenuPanel}
+        disableClose={disableClose}
+      >
+        <MapLayerSelector layers={items} onMapToggleLayer={onMapToggleLayer} />
+      </MapControlPanel>)
+    )
 );
 
 LayerSelectorPanel.displayName = 'LayerSelectorPanel';
@@ -372,7 +377,7 @@ export function MapDrawPanelFactory() {
 
 /** @type {import('./map-control').LocalePanelComponent} */
 const LocalePanel = React.memo(
-  ({availableLocales, isActive, onToggleMenuPanel, onSetLocale, activeLocale}) => {
+  ({availableLocales, isActive, onToggleMenuPanel, onSetLocale, activeLocale, disableClose}) => {
     const onClickItem = useCallback(
       locale => {
         onSetLocale(locale);
@@ -403,7 +408,13 @@ const LocalePanel = React.memo(
             ))}
           </StyledToolbar>
         ) : null}
-        <MapControlButton onClick={onClickButton} active={isActive} data-tip data-for="locale">
+        <MapControlButton
+          onClick={onClickButton}
+          active={isActive}
+          data-tip
+          data-for="locale"
+          disableClose={disableClose}
+        >
           {activeLocale.toUpperCase()}
           <MapControlTooltip id="locale" message="tooltip.selectLocale" />
         </MapControlButton>
@@ -522,6 +533,7 @@ function MapControlFactory(MapDrawPanel, Toggle3dButton, SplitMapButton, MapLege
                 onMapToggleLayer={onMapToggleLayer}
                 isActive={visibleLayers.active}
                 toggleMenuPanel={() => onToggleMapControl('visibleLayers')}
+                disableClose={visibleLayers.disableClose}
               />
             </ActionPanel>
           ) : null}

diff --git a/src/reducers/ui-state-updaters.d.ts b/src/reducers/ui-state-updaters.d.ts
@@ -44,7 +44,8 @@ export type ExportMap = {
 export type MapControl = {
   show: boolean;
   active: boolean;
-  activeMapIndex: number;
+  disableClose?: boolean;
+  activeMapIndex?: number;
 };
 export type MapControls = {
   visibleLayers: MapControl;

diff --git a/src/reducers/ui-state-updaters.js b/src/reducers/ui-state-updaters.js
@@ -81,6 +81,7 @@ const uiStateUpdaters = null;
 const DEFAULT_MAP_CONTROLS_FEATURES = {
   show: true,
   active: false,
+  disableClose: false,
   // defines which map index users are interacting with (through map controls)
   activeMapIndex: 0
 };

diff --git a/test/node/reducers/ui-state-test.js b/test/node/reducers/ui-state-test.js
@@ -169,7 +169,7 @@ test('#uiStateReducer -> TOGGLE_MAP_CONTROL', t => {
     mapControls: {
       ...INITIAL_UI_STATE.mapControls,
       mapLegend: {
-        show: INITIAL_UI_STATE.mapControls.mapLegend.show,
+        ...INITIAL_UI_STATE.mapControls.mapLegend,
         active: !INITIAL_UI_STATE.mapControls.mapLegend.active,
         activeMapIndex: 0
       }