[Bug] fix locale panel (#1603)

* fix locale panel * add more map control panel browser test Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Sep 6, 2021 · 0b71f39 · 0b71f39
1 parent 8b42be2
commit 0b71f39
Show file tree

Hide file tree

Showing 15 changed files with 330 additions and 95 deletions.
diff --git a/src/components/bottom-widget.js b/src/components/bottom-widget.js
@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, forwardRef, useMemo} from 'react';
 import styled from 'styled-components';
 import TimeWidgetFactory from './filters/time-widget';
 import AnimationControlFactory from './common/animation-control/animation-control';
@@ -227,6 +227,9 @@ export default function BottomWidgetFactory(
     );
   };
 
-  return BottomWidget;
+  /* eslint-disable react/display-name */
+  // @ts-ignore
+  return forwardRef((props, ref) => <BottomWidget {...props} rootRef={ref} />);
+  /* eslint-enable react/display-name */
 }
 /* eslint-enable complexity */
diff --git a/src/components/index.js b/src/components/index.js
@@ -101,6 +101,7 @@ export {default as MapDrawPanelFactory} from './map/map-draw-panel';
 export {default as SplitMapButtonFactory} from './map/split-map-button';
 export {default as MapLegendPanelFactory} from './map/map-legend-panel';
 export {default as Toggle3dButtonFactory} from './map/toggle-3d-button';
+export {default as MapControlToolbarFactory} from './map/map-control-toolbar';
 
 // // modal factories
 export {default as ModalDialogFactory} from './modals/modal-dialog';

diff --git a/src/components/map-container.js b/src/components/map-container.js
@@ -55,7 +55,7 @@ import {
 
 import ErrorBoundary from 'components/common/error-boundary';
 import {observeDimensions, unobserveDimensions} from '../utils/observe-dimensions';
-import MapLegendPanelFactory from './map/map-legend-panel';
+import {LOCALE_CODES} from 'localization/locales';
 
 /** @type {{[key: string]: React.CSSProperties}} */
 const MAP_STYLE = {
@@ -107,14 +107,9 @@ export const Attribution = () => (
   </StyledAttrbution>
 );
 
-MapContainerFactory.deps = [
-  MapPopoverFactory,
-  MapControlFactory,
-  EditorFactory,
-  MapLegendPanelFactory
-];
+MapContainerFactory.deps = [MapPopoverFactory, MapControlFactory, EditorFactory];
 
-export default function MapContainerFactory(MapPopover, MapControl, Editor, MapLegendPanel) {
+export default function MapContainerFactory(MapPopover, MapControl, Editor) {
   class MapContainer extends Component {
     static propTypes = {
       // required
@@ -541,6 +536,7 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor, MapL
         <>
           <MapControl
             datasets={datasets}
+            availableLocales={Object.keys(LOCALE_CODES)}
             dragRotate={mapState.dragRotate}
             isSplit={isSplit}
             primary={primary}

diff --git a/src/components/map/layer-selector-panel.js b/src/components/map/layer-selector-panel.js
@@ -19,6 +19,8 @@
 // THE SOFTWARE.
 
 import React, {useCallback, useMemo} from 'react';
+import classnames from 'classnames';
+
 import {MapControlButton} from 'components/common/styled-components';
 import {Layers} from '../common/icons';
 import MapLayerSelector from '../common/map-layer-selector';
@@ -73,7 +75,7 @@ function LayerSelectorPanelFactory(MapControlTooltip, MapControlPanel) {
         <MapControlButton
           key={1}
           onClick={onToggleMenuPanel}
-          className="map-control-button toggle-layer"
+          className={classnames('map-control-button', 'toggle-layer', {isActive})}
           data-tip
           data-for="toggle-layer"
         >

diff --git a/src/components/map/locale-panel.d.ts b/src/components/map/locale-panel.d.ts
@@ -2,10 +2,10 @@ import React from 'react';
 import {MapControls} from '../../reducers';
 
 export type LocalePanelProps = {
-  availableLocales: ReadnlyArray<string>;
+  availableLocales: ReadonlyArray<string>;
   onSetLocale: (locale: string) => void;
   locale: string;
-  onToggleMenuPanel: () => void;
+  onToggleMapControl: (control: string) => void;
   mapControls: MapControls;
 };
 

diff --git a/src/components/map/locale-panel.js b/src/components/map/locale-panel.js
@@ -19,22 +19,19 @@
 // THE SOFTWARE.
 
 import React, {useCallback} from 'react';
+import classnames from 'classnames';
+
 import ToolbarItem from 'components/common/toolbar-item';
 import {MapControlButton} from 'components/common/styled-components';
 import MapControlTooltipFactory from './map-control-tooltip';
-import MapControlPanelFactory from './map-control-panel';
 import MapControlToolbarFactory from './map-control-toolbar';
 
-LocalePanelFactory.deps = [
-  MapControlTooltipFactory,
-  MapControlPanelFactory,
-  MapControlToolbarFactory
-];
+LocalePanelFactory.deps = [MapControlTooltipFactory, MapControlToolbarFactory];
 
-function LocalePanelFactory(MapControlTooltip, MapControlPanel, MapControlToolbar) {
+function LocalePanelFactory(MapControlTooltip, MapControlToolbar) {
   /** @type {import('./locale-panel').LocalePanelComponent} */
   const LocalePanel = React.memo(
-    ({availableLocales, onToggleMenuPanel, onSetLocale, locale: currentLocal, mapControls}) => {
+    ({availableLocales, onToggleMapControl, onSetLocale, locale: currentLocal, mapControls}) => {
       const {active: isActive, disableClose, show} = mapControls.mapLocale || {};
 
       const onClickItem = useCallback(
@@ -47,17 +44,17 @@ function LocalePanelFactory(MapControlTooltip, MapControlPanel, MapControlToolba
       const onClickButton = useCallback(
         e => {
           e.preventDefault();
-          onToggleMenuPanel();
+          onToggleMapControl('mapLocale');
         },
-        [onToggleMenuPanel]
+        [onToggleMapControl]
       );
       const getLabel = useCallback(locale => `toolbar.${locale}`, []);
 
       if (!show) {
         return null;
       }
       return (
-        <>
+        <div className="map-locale-controls" style={{position: 'relative'}}>
           {isActive ? (
             <MapControlToolbar show={isActive}>
               {availableLocales.map(locale => (
@@ -72,6 +69,7 @@ function LocalePanelFactory(MapControlTooltip, MapControlPanel, MapControlToolba
           ) : null}
           <MapControlButton
             onClick={onClickButton}
+            className={classnames('map-control-button', 'map-locale', {isActive})}
             active={isActive}
             data-tip
             data-for="locale"
@@ -80,7 +78,7 @@ function LocalePanelFactory(MapControlTooltip, MapControlPanel, MapControlToolba
             <span className="map-control-button__locale">{currentLocal.toUpperCase()}</span>
             <MapControlTooltip id="locale" message="tooltip.selectLocale" />
           </MapControlButton>
-        </>
+        </div>
       );
     }
   );

diff --git a/src/components/map/map-control.d.ts b/src/components/map/map-control.d.ts
@@ -8,31 +8,28 @@ export type MapControlComponentProps = Partial<MapControlProps>;
 
 export type MapControlProps = {
   availableLocales: ReadonlyArray<string>;
-  featureFlags: FeatureFlags;
   datasets: Datasets;
   dragRotate: boolean;
-  globe: boolean;
   isSplit: boolean;
+  primary: boolean;
   layers: Layer[];
   layersToRender: {[key: string]: boolean};
   mapIndex: number;
   mapControls: MapControls;
+  readOnly?: boolean;
+  scale: number;
+  top: number;
+  editor: Editor;
+  locale: string;
+
   onTogglePerspective: () => void;
   onToggleGlobe: () => void;
   onToggleSplitMap: () => void;
   onToggleMapControl: (control: string) => void;
   onSetEditorMode: (mode: string) => void;
-  onToggleEditorVisibility: () => void;
-  top: number;
   onSetLocale: () => void;
-  locale: string;
+  onToggleEditorVisibility: () => void;
   logoComponent: React.FC | React.ReactNode;
-
-  // optional
-  readOnly?: boolean;
-  scale?: number;
-  mapLayers?: {[key: string]: boolean};
-  editor: Editor;
   actionComponents: React.FC[] | React.Component[];
 };
 

diff --git a/src/components/map/map-draw-panel.js b/src/components/map/map-draw-panel.js
@@ -19,6 +19,8 @@
 // THE SOFTWARE.
 
 import React, {useCallback} from 'react';
+import classnames from 'classnames';
+
 import {EDITOR_MODES} from 'constants/default-settings';
 import {
   CursorClick,
@@ -104,6 +106,7 @@ function MapDrawPanelFactory(MapControlTooltip, MapControlPanel, MapControlToolb
               onToggleMenuPanel();
             }}
             active={isActive}
+            className={classnames('map-control-button', 'map-draw', {isActive})}
             data-tip
             data-for="map-draw"
           >

diff --git a/src/components/map/map-legend-panel.js b/src/components/map/map-legend-panel.js
@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 import React, {useCallback} from 'react';
+import classnames from 'classnames';
 import {Legend} from 'components/common/icons';
 import {FormattedMessage} from 'localization';
 import {MapControlButton, Tooltip} from 'components/common/styled-components';
@@ -72,7 +73,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
       (<MapControlButton
         data-tip
         data-for="show-legend"
-        className="map-control-button show-legend"
+        className={classnames('map-control-button', 'show-legend', {isActive})}
         onClick={onClick}
       >
         <actionIcons.legend height="22px" />
@@ -92,7 +93,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
     );
   };
 
-  MapLegendPanel.displayName = 'MapControlPanel';
+  MapLegendPanel.displayName = 'MapLegendPanel';
   return MapLegendPanel;
 }
 

diff --git a/src/components/map/toggle-3d-button.js b/src/components/map/toggle-3d-button.js
@@ -19,6 +19,8 @@
 // THE SOFTWARE.
 
 import React, {useCallback, useMemo} from 'react';
+import classnames from 'classnames';
+
 import {Cube3d} from 'components/common/icons';
 import {MapControlButton} from 'components/common/styled-components';
 import MapControlTooltipFactory from './map-control-tooltip';
@@ -50,7 +52,13 @@ function Toggle3dButtonFactory(MapControlTooltip) {
     }, [mapControls]);
 
     return isVisible ? (
-      (<MapControlButton onClick={onClick} active={dragRotate} data-tip data-for="action-3d">
+      (<MapControlButton
+        onClick={onClick}
+        className={classnames('map-control-button', 'toggle-3d', {map3d: dragRotate})}
+        active={dragRotate}
+        data-tip
+        data-for="action-3d"
+      >
         <actionIcons.cube height="22px" />
         <MapControlTooltip
           id="action-3d"

diff --git a/src/layers/index.js b/src/layers/index.js
@@ -34,7 +34,7 @@ import {default as S2GeometryLayer} from './s2-geometry-layer/s2-geometry-layer'
 import {LAYER_TYPES} from './types';
 
 // base layer
-export {default as Layer, OVERLAY_TYPE, colorMaker} from './base-layer';
+export {default as Layer, OVERLAY_TYPE, LAYER_ID_LENGTH, colorMaker} from './base-layer';
 
 // individual layers
 export const KeplerGlLayers = {

diff --git a/src/localization/cn.js b/src/localization/cn.js
@@ -76,7 +76,7 @@ export default {
   },
   sidebar: {
     panels: {
-      layer: '层',
+      layer: '图层',
       filter: '过滤器',
       interaction: '交互',
       basemap: '底图'

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -46,5 +46,5 @@ export {resetFilterGpuMode, assignGpuChannels} from 'utils/gpu-filter-utils';
 export {updateAllLayerDomainData} from '../reducers/vis-state-updaters';
 export {getHexFields} from '../layers/h3-hexagon-layer/h3-utils';
 export {containValidTime} from '../layers/trip-layer/trip-utils';
-export {KeplerTable, findPointFieldPairs} from './table-utils/kepler-table';
+export {default as KeplerTable, findPointFieldPairs} from './table-utils/kepler-table';
 export {createDataContainer, createIndexedDataContainer} from './table-utils/data-container-utils';