[Chore] remove iconComponent from interactionConfig (#1973)

* remove iconComponent from interactionConfig Signed-off-by: Shan He <heshan0131@gmail.com> * fix ts error Signed-off-by: Shan He <heshan0131@gmail.com> * fix test Signed-off-by: Shan He <heshan0131@gmail.com> Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Sep 7, 2022 · 9024832 · 9024832
1 parent 64542aa
commit 9024832
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 132 deletions.
diff --git a/src/actions/src/index.ts b/src/actions/src/index.ts
@@ -18,6 +18,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import * as VisStateActions from './vis-state-actions';
+import * as MapStateActions from './map-state-actions';
+import * as UIStateActions from './ui-state-actions';
+import * as MapStyleActions from './map-style-actions';
+import * as ProviderActions from './provider-actions';
+
 // Actions
 export * from './actions';
 
@@ -30,12 +36,7 @@ export * from './map-style-actions';
 export * from './identity-actions';
 export * from './provider-actions';
 
-/* eslint-disable prettier/prettier */
-export * as VisStateActions from './vis-state-actions';
-export * as MapStateActions from './map-state-actions';
-export * as MapStyleActions from './map-style-actions';
-export * as UIStateActions from './ui-state-actions';
-export * as ProviderActions from './provider-actions';
+export {VisStateActions, MapStateActions, UIStateActions, MapStyleActions, ProviderActions};
 
 // Dispatch
 export {

diff --git a/src/components/map-container.tsx b/src/components/map-container.tsx
@@ -22,7 +22,7 @@
 import React, {Component, createRef} from 'react';
 import MapboxGLMap, {MapRef} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
-import {createSelector} from 'reselect';
+import {createSelector, Selector} from 'reselect';
 import WebMercatorViewport from 'viewport-mercator-project';
 import mapboxgl from 'mapbox-gl';
 
@@ -39,19 +39,10 @@ import EditorFactory from './editor/editor';
 import {
   generateMapboxLayers,
   updateMapboxLayers,
-  Layer,
   LayerBaseConfig,
   VisualChannelDomain
 } from '@kepler.gl/layers';
-import {
-  AnimationConfig,
-  Filter,
-  InteractionConfig,
-  MapState,
-  SplitMapLayers,
-  MapControls,
-  Viewport
-} from '@kepler.gl/types';
+import {MapState, MapControls, Viewport, SplitMap, SplitMapLayers} from '@kepler.gl/types';
 import {
   errorNotification,
   setLayerBlending,
@@ -67,15 +58,16 @@ import ErrorBoundary from 'components/common/error-boundary';
 import {LOCALE_CODES} from '@kepler.gl/localization';
 import {getMapLayersFromSplitMaps, onViewPortChange} from '@kepler.gl/utils';
 import {MapView} from '@deck.gl/core';
-import {Datasets} from '@kepler.gl/table';
 import {
   MapStyle,
   computeDeckLayers,
   getLayerHoverProp,
   LayerHoverProp,
   prepareLayersForDeck,
-  prepareLayersToRender
+  prepareLayersToRender,
+  LayersToRender
 } from '@kepler.gl/reducers';
+import {VisState} from '@kepler.gl/schemas';
 
 /** @type {{[key: string]: React.CSSProperties}} */
 const MAP_STYLE: {[key: string]: React.CSSProperties} = {
@@ -130,23 +122,10 @@ export const Attribution = () => (
 MapContainerFactory.deps = [MapPopoverFactory, MapControlFactory, EditorFactory];
 
 type MapboxStyle = string | object | undefined;
+type PropSelector<R> = Selector<MapContainerProps, R>;
 
 interface MapContainerProps {
-  visState: {
-    datasets: Datasets;
-    interactionConfig: InteractionConfig;
-    animationConfig: AnimationConfig;
-    layerBlending: string;
-    layerOrder: number[];
-    layerData: any[];
-    layers: Layer[];
-    filters: Filter[];
-    mousePos: any;
-    clicked?: any;
-    hoverInfo?: any;
-    mapLayers?: SplitMapLayers | null;
-    editor: any;
-  };
+  visState: VisState;
   mapState: MapState;
   mapControls: MapControls;
   mapStyle: {bottomMapStyle?: MapboxStyle; topMapStyle?: MapboxStyle} & MapStyle;
@@ -233,17 +212,17 @@ export default function MapContainerFactory(
       }
     };
 
-    layersSelector = props => props.visState.layers;
-    layerDataSelector = props => props.visState.layerData;
-    splitMapSelector = props => props.visState.splitMaps;
-    splitMapIndexSelector = props => props.index;
-    mapLayersSelector = createSelector(
+    layersSelector: PropSelector<VisState['layers']> = props => props.visState.layers;
+    layerDataSelector: PropSelector<VisState['layers']> = props => props.visState.layerData;
+    splitMapSelector: PropSelector<SplitMap[]> = props => props.visState.splitMaps;
+    splitMapIndexSelector: PropSelector<number | undefined> = props => props.index;
+    mapLayersSelector: PropSelector<SplitMapLayers | null | undefined> = createSelector(
       this.splitMapSelector,
       this.splitMapIndexSelector,
-      (splitMaps, splitMapIndex) => getMapLayersFromSplitMaps(splitMaps, splitMapIndex)
+      getMapLayersFromSplitMaps
     );
-    layerOrderSelector = props => props.visState.layerOrder;
-    layersToRenderSelector = createSelector(
+    layerOrderSelector: PropSelector<VisState['layerOrder']> = props => props.visState.layerOrder;
+    layersToRenderSelector: PropSelector<LayersToRender> = createSelector(
       this.layersSelector,
       this.layerDataSelector,
       this.mapLayersSelector,

diff --git a/src/components/side-panel/interaction-manager.tsx b/src/components/side-panel/interaction-manager.tsx
@@ -33,11 +33,11 @@ type InteractionManagerProps = {
 InteractionManagerFactory.deps = [InteractionPanelFactory];
 
 function InteractionManagerFactory(InteractionPanel: ReturnType<typeof InteractionPanelFactory>) {
-  const InteractionManager = ({
+  const InteractionManager: React.FC<InteractionManagerProps> = ({
     interactionConfig,
     datasets,
     visStateActions
-  }: InteractionManagerProps) => {
+  }) => {
     const {interactionConfigChange: onConfigChange} = visStateActions;
 
     return (

diff --git a/src/components/side-panel/interaction-panel/interaction-panel.tsx b/src/components/side-panel/interaction-panel/interaction-panel.tsx
@@ -18,31 +18,33 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, ComponentType, ReactElement} from 'react';
+import React, {useState, ComponentType, ReactElement, useCallback} from 'react';
 import styled from 'styled-components';
 import Switch from 'components/common/switch';
 
 import BrushConfigFactory from './brush-config';
 import TooltipConfigFactory from './tooltip-config';
+import {Datasets} from '@kepler.gl/table';
+import {InteractionConfig} from '@kepler.gl/reducers';
 
 import {
   StyledPanelHeader,
   PanelHeaderTitle,
   PanelHeaderContent,
   PanelContent
 } from 'components/common/styled-components';
+import {Messages, Crosshairs, CursorClick, Pin} from 'components/common/icons';
+
 import {FormattedMessage} from '@kepler.gl/localization';
+import {ValueOf} from 'types';
 
 interface InteractionPanelProps {
-  datasets: any;
-  config: {
-    id: string;
-    enabled: boolean;
-    label: string;
-    iconComponent: any;
-    config: any;
-  };
+  datasets: Datasets;
+  config: ValueOf<InteractionConfig>;
   onConfigChange: any;
+  interactionConfigIcons?: {
+    [key: string]: ReactElement;
+  };
 }
 
 const StyledInteractionPanel = styled.div`
@@ -51,74 +53,90 @@ const StyledInteractionPanel = styled.div`
 
 InteractionPanelFactory.deps = [TooltipConfigFactory, BrushConfigFactory];
 
+const INTERACTION_CONFIG_ICONS = {
+  tooltip: Messages,
+  geocoder: Pin,
+  brush: Crosshairs,
+  coordinate: CursorClick
+};
+
 function InteractionPanelFactory(
   TooltipConfig: ReturnType<typeof TooltipConfigFactory>,
   BrushConfig: ReturnType<typeof BrushConfigFactory>
 ): ComponentType<InteractionPanelProps> {
-  return class InteractionPanel extends Component<InteractionPanelProps> {
-    state = {
-      isConfigActive: false
-    };
-
-    _updateConfig = newProp => {
-      this.props.onConfigChange({
-        ...this.props.config,
-        ...newProp
-      });
-    };
-
-    _enableConfig = () => {
-      this.setState({isConfigActive: !this.state.isConfigActive});
-    };
-
-    render() {
-      const {config, datasets} = this.props;
-      const onChange = newConfig => this._updateConfig({config: newConfig});
-      let template: ReactElement | null = null;
-
-      switch (config.id) {
-        case 'tooltip':
-          template = (
-            <TooltipConfig datasets={datasets} config={config.config} onChange={onChange} />
-          );
-          break;
-        case 'brush':
-          template = <BrushConfig config={config.config} onChange={onChange} />;
-          break;
-
-        default:
-          break;
-      }
-
-      return (
-        <StyledInteractionPanel className="interaction-panel">
-          <StyledPanelHeader className="interaction-panel__header" onClick={this._enableConfig}>
-            <PanelHeaderContent className="interaction-panel__header__content">
-              <div className="interaction-panel__header__icon icon">
-                <config.iconComponent height="16px" />
-              </div>
-              <div className="interaction-panel__header__title">
-                <PanelHeaderTitle>
-                  <FormattedMessage id={config.label} />
-                </PanelHeaderTitle>
-              </div>
-            </PanelHeaderContent>
-            <div className="interaction-panel__header__actions">
-              <Switch
-                checked={config.enabled}
-                id={`${config.id}-toggle`}
-                onChange={() => this._updateConfig({enabled: !config.enabled})}
-                secondary
-              />
-            </div>
-          </StyledPanelHeader>
-          {config.enabled && template && (
-            <PanelContent className="interaction-panel__content">{template}</PanelContent>
-          )}
-        </StyledInteractionPanel>
-      );
+  const InteractionPanel: React.FC<InteractionPanelProps> = ({
+    config,
+    onConfigChange,
+    datasets,
+    interactionConfigIcons = INTERACTION_CONFIG_ICONS
+  }) => {
+    const [isConfigActive, setIsConfigAction] = useState(false);
+
+    const _updateConfig = useCallback(
+      newProp => {
+        onConfigChange({
+          ...config,
+          ...newProp
+        });
+      },
+      [onConfigChange, config]
+    );
+
+    const togglePanelActive = useCallback(() => {
+      setIsConfigAction(!isConfigActive);
+    }, [setIsConfigAction, isConfigActive]);
+
+    const {enabled} = config;
+    const toggleEnableConfig = useCallback(() => {
+      _updateConfig({enabled: !enabled});
+    }, [_updateConfig, enabled]);
+
+    const onChange = useCallback(newConfig => _updateConfig({config: newConfig}), [_updateConfig]);
+    const IconComponent = interactionConfigIcons[config.id];
+
+    let template: ReactElement | null = null;
+
+    switch (config.id) {
+      case 'tooltip':
+        template = <TooltipConfig datasets={datasets} config={config.config} onChange={onChange} />;
+        break;
+      case 'brush':
+        template = <BrushConfig config={config.config} onChange={onChange} />;
+        break;
+
+      default:
+        break;
     }
+    return (
+      <StyledInteractionPanel className="interaction-panel">
+        <StyledPanelHeader className="interaction-panel__header" onClick={togglePanelActive}>
+          <PanelHeaderContent className="interaction-panel__header__content">
+            <div className="interaction-panel__header__icon icon">
+              {IconComponent ? <IconComponent height="16px" /> : null}
+            </div>
+            <div className="interaction-panel__header__title">
+              <PanelHeaderTitle>
+                <FormattedMessage id={config.label} />
+              </PanelHeaderTitle>
+            </div>
+          </PanelHeaderContent>
+          <div className="interaction-panel__header__actions">
+            <Switch
+              checked={config.enabled}
+              id={`${config.id}-toggle`}
+              onChange={toggleEnableConfig}
+              secondary
+            />
+          </div>
+        </StyledPanelHeader>
+        {config.enabled && template && (
+          <PanelContent className="interaction-panel__content">{template}</PanelContent>
+        )}
+      </StyledInteractionPanel>
+    );
   };
+
+  return InteractionPanel;
 }
 
 export default InteractionPanelFactory;
diff --git a/src/reducers/src/layer-utils.ts b/src/reducers/src/layer-utils.ts
@@ -230,10 +230,8 @@ export function prepareLayersForDeck(
 export function prepareLayersToRender(
   layers: Layer[],
   layerData: VisState['layerData'],
-  mapLayers?: SplitMapLayers | null
-): {
-  [key: string]: boolean;
-} {
+  mapLayers?: SplitMapLayers | undefined | null
+): LayersToRender {
   return layers.reduce(
     (accu, layer, idx) => ({
       ...accu,

diff --git a/src/reducers/src/vis-state-updaters.ts b/src/reducers/src/vis-state-updaters.ts
@@ -78,7 +78,6 @@ import KeplerGLSchema, {VisState} from '@kepler.gl/schemas';
 import {Filter, InteractionConfig, AnimationConfig, Editor} from '@kepler.gl/types';
 import {Loader} from '@loaders.gl/loader-utils';
 
-import {Messages, Crosshairs, CursorClick, Pin} from 'components/common/icons/index';
 import {copyTableAndUpdate, Datasets, pinTableColumns, sortDatasetByColumn} from '@kepler.gl/table';
 import {calculateLayerData, findDefaultLayer} from './layer-utils';
 import {
@@ -152,7 +151,6 @@ export const defaultInteractionConfig: InteractionConfig = {
     id: 'tooltip',
     label: 'interactions.tooltip',
     enabled: true,
-    iconComponent: Messages,
     config: {
       fieldsToShow: {},
       compareMode: false,
@@ -163,14 +161,12 @@ export const defaultInteractionConfig: InteractionConfig = {
     id: 'geocoder',
     label: 'interactions.geocoder',
     enabled: false,
-    iconComponent: Pin,
     position: null
   },
   brush: {
     id: 'brush',
     label: 'interactions.brush',
     enabled: false,
-    iconComponent: Crosshairs,
     config: {
       // size is in km
       size: 0.5
@@ -180,7 +176,6 @@ export const defaultInteractionConfig: InteractionConfig = {
     id: 'coordinate',
     label: 'interactions.coordinate',
     enabled: false,
-    iconComponent: CursorClick,
     position: null
   }
 };

diff --git a/src/types/reducers.d.ts b/src/types/reducers.d.ts
@@ -193,7 +193,6 @@ export type BaseInteraction = {
   id: string;
   label: string;
   enabled: boolean;
-  iconComponent: any;
 };
 export type TooltipField = {
   name: string;