diff --git a/src/components/map/map-control.js b/src/components/map/map-control.js index cda3c9ef2c..bb3e184f08 100644 --- 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 ? ( - ( { - e.preventDefault(); - toggleMenuPanel(); - }} - className="map-control-button toggle-layer" - data-tip - data-for="toggle-layer" - > - - - ) - ) : ( - ( - - ) - ) +const LayerSelectorPanel = React.memo( + ({items, onMapToggleLayer, isActive, toggleMenuPanel, disableClose}) => + !isActive ? ( + ( { + e.preventDefault(); + toggleMenuPanel(); + }} + className="map-control-button toggle-layer" + data-tip + data-for="toggle-layer" + > + + + ) + ) : ( + ( + + ) + ) ); 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( ))} ) : null} - + {activeLocale.toUpperCase()} @@ -522,6 +533,7 @@ function MapControlFactory(MapDrawPanel, Toggle3dButton, SplitMapButton, MapLege onMapToggleLayer={onMapToggleLayer} isActive={visibleLayers.active} toggleMenuPanel={() => onToggleMapControl('visibleLayers')} + disableClose={visibleLayers.disableClose} /> ) : null} diff --git a/src/reducers/ui-state-updaters.d.ts b/src/reducers/ui-state-updaters.d.ts index 4b147ce096..2a407daf36 100644 --- 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 index a39d418344..6edb2c2b45 100644 --- 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 index 6960fbe9b1..f5234bdb6e 100644 --- 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 }