Map Control: Use MapControlTooltip with TippyTooltip (#1920)

keplergl · Aug 16, 2022 · eff5f90 · eff5f90
1 parent 5551abd
commit eff5f90
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 85 deletions.
diff --git a/src/components/map/locale-panel.tsx b/src/components/map/locale-panel.tsx
@@ -25,8 +25,6 @@ import ToolbarItem from 'components/common/toolbar-item';
 import {MapControlButton} from 'components/common/styled-components';
 import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlToolbarFactory from './map-control-toolbar';
-import {FormattedMessage} from '@kepler.gl/localization';
-import TippyTooltip from 'components/common/tippy-tooltip';
 import {MapControls} from 'reducers';
 
 LocalePanelFactory.deps = [MapControlTooltipFactory, MapControlToolbarFactory];
@@ -43,7 +41,6 @@ function LocalePanelFactory(
   MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,
   MapControlToolbar: ReturnType<typeof MapControlToolbarFactory>
 ) {
-  /** @type {import('./locale-panel').LocalePanelComponent} */
   const LocalePanel: React.FC<LocalePanelProps> = React.memo(
     ({availableLocales, onToggleMapControl, onSetLocale, locale: currentLocal, mapControls}) => {
       const {active: isActive, show} = mapControls.mapLocale || {};
@@ -81,22 +78,15 @@ function LocalePanelFactory(
               ))}
             </MapControlToolbar>
           ) : null}
-          <TippyTooltip
-            placement="left"
-            render={() => (
-              <div id="locale">
-                <FormattedMessage id="tooltip.selectLocale" />
-              </div>
-            )}
-          >
+          <MapControlTooltip id="locale" message="tooltip.selectLocale">
             <MapControlButton
               className={classnames('map-control-button', 'map-locale', {isActive})}
               onClick={onClickButton}
               active={isActive}
             >
               <span className="map-control-button__locale">{currentLocal.toUpperCase()}</span>
             </MapControlButton>
-          </TippyTooltip>
+          </MapControlTooltip>
         </div>
       );
     }

diff --git a/src/components/map/map-control-tooltip.tsx b/src/components/map/map-control-tooltip.tsx
@@ -18,24 +18,31 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
-import {Tooltip} from 'components/common/styled-components';
+import React, {ReactElement, JSXElementConstructor} from 'react';
 import {FormattedMessage} from '@kepler.gl/localization';
+import TippyTooltip from '../common/tippy-tooltip';
 
 export type MapControlTooltipProps = {
   id: string;
   message: string;
+  children?: ReactElement<any, string | JSXElementConstructor<any>>;
 };
 
 function MapControlTooltipFactory() {
-  /** @type {import('./map-control-tooltip').MapControlTooltipComponent} */
-  const MapControlTooltip: React.FC<MapControlTooltipProps> = React.memo(({id, message}) => (
-    <Tooltip id={id} place="left" effect="solid">
-      <span>
-        <FormattedMessage id={message} />
-      </span>
-    </Tooltip>
-  ));
+  const MapControlTooltip: React.FC<MapControlTooltipProps> = React.memo(
+    ({id, message, children}) => (
+      <TippyTooltip
+        placement="left"
+        render={() => (
+          <div id={id}>
+            <FormattedMessage id={message} />
+          </div>
+        )}
+      >
+        {children}
+      </TippyTooltip>
+    )
+  );
 
   MapControlTooltip.displayName = 'MapControlTooltip';
 

diff --git a/src/components/map/map-control.tsx b/src/components/map/map-control.tsx
@@ -110,29 +110,28 @@ function MapControlFactory(
   ];
 
   /** @type {import('./map-control').MapControl} */
-  const MapControl: React.FC<MapControlProps> = ({
-    actionComponents = DEFAULT_ACTIONS,
-    ...props
-  }) => {
+  const MapControl: React.FC<MapControlProps> = React.memo(({actionComponents, ...props}) => {
     return (
       <StyledMapControl className="map-control" top={props.top}>
         {actionComponents.map((ActionComponent, index) => (
           <ActionComponent key={index} className="map-control-action" {...props} />
         ))}
       </StyledMapControl>
     );
-  };
+  });
 
   MapControl.defaultProps = {
     isSplit: false,
     top: 0,
     mapIndex: 0,
-    logoComponent: LegendLogo
+    logoComponent: LegendLogo,
+    // @ts-expect-error
+    actionComponents: DEFAULT_ACTIONS
   };
 
   MapControl.displayName = 'MapControl';
 
-  return React.memo(MapControl);
+  return MapControl;
 }
 
 export default MapControlFactory;
diff --git a/src/components/map/map-draw-panel.tsx b/src/components/map/map-draw-panel.tsx
@@ -33,18 +33,11 @@ import {
 import {MapControlButton} from 'components/common/styled-components';
 import ToolbarItem from 'components/common/toolbar-item';
 import MapControlTooltipFactory from './map-control-tooltip';
-import MapControlPanelFactory from './map-control-panel';
 import MapControlToolbarFactory from './map-control-toolbar';
-import {FormattedMessage} from '@kepler.gl/localization';
-import TippyTooltip from 'components/common/tippy-tooltip';
 import {Editor, MapControls} from 'reducers';
 import {BaseProps} from 'components/common/icons/base';
 
-MapDrawPanelFactory.deps = [
-  MapControlTooltipFactory,
-  MapControlPanelFactory,
-  MapControlToolbarFactory
-];
+MapDrawPanelFactory.deps = [MapControlTooltipFactory, MapControlToolbarFactory];
 
 export type MapDrawPanelProps = {
   editor: Editor;
@@ -55,7 +48,7 @@ export type MapDrawPanelProps = {
   actionIcons: {[id: string]: React.ComponentType<Partial<BaseProps>>};
 };
 
-function MapDrawPanelFactory(MapControlTooltip, MapControlPanel, MapControlToolbar) {
+function MapDrawPanelFactory(MapControlTooltip, MapControlToolbar) {
   const defaultActionIcons = {
     visible: EyeSeen,
     hidden: EyeUnseen,
@@ -114,14 +107,7 @@ function MapDrawPanelFactory(MapControlTooltip, MapControlPanel, MapControlToolb
               />
             </MapControlToolbar>
           ) : null}
-          <TippyTooltip
-            placement="left"
-            render={() => (
-              <div id="map-draw">
-                <FormattedMessage id="tooltip.DrawOnMap" />
-              </div>
-            )}
-          >
+          <MapControlTooltip id="map-draw" message="tooltip.DrawOnMap">
             <MapControlButton
               className={classnames('map-control-button', 'map-draw', {isActive})}
               onClick={e => {
@@ -132,7 +118,7 @@ function MapDrawPanelFactory(MapControlTooltip, MapControlPanel, MapControlToolb
             >
               <actionIcons.polygon height="22px" />
             </MapControlButton>
-          </TippyTooltip>
+          </MapControlTooltip>
         </div>
       );
     }

diff --git a/src/components/map/map-legend-panel.tsx b/src/components/map/map-legend-panel.tsx
@@ -22,18 +22,17 @@ import React, {ComponentType, useState} from 'react';
 import styled from 'styled-components';
 
 import {Legend} from 'components/common/icons';
-import {FormattedMessage} from '@kepler.gl/localization';
 import {MapControlButton} from 'components/common/styled-components';
+import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlPanelFactory from './map-control-panel';
 import MapLegendFactory from './map-legend';
 import Tippy from '@tippyjs/react/headless';
-import TippyTooltip from 'components/common/tippy-tooltip';
 import {createPortal} from 'react-dom';
 import {DIMENSIONS} from '@kepler.gl/constants';
 import {MapControl, MapControls} from 'reducers';
 import {Layer} from '@kepler.gl/layers';
 
-MapLegendPanelFactory.deps = [MapControlPanelFactory, MapLegendFactory];
+MapLegendPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory, MapLegendFactory];
 
 const PinToBottom = styled.div`
   position: absolute;
@@ -56,7 +55,7 @@ export type MapLegendPanelProps = {
   mapHeight?: number;
 };
 
-function MapLegendPanelFactory(MapControlPanel, MapLegend) {
+function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
   const defaultActionIcons = {
     legend: Legend
   };
@@ -142,18 +141,11 @@ function MapLegendPanelFactory(MapControlPanel, MapLegend) {
           appendTo={document.body}
         >
           <div>
-            <TippyTooltip
-              placement="left"
-              render={() => (
-                <div id="show-legend">
-                  <FormattedMessage id="tooltip.showLegend" />
-                </div>
-              )}
-            >
+            <MapControlTooltip id="show-legend" message="tooltip.showLegend">
               <MapControlButton className="map-control-button show-legend" onClick={onClick}>
                 <actionIcons.legend height="22px" />
               </MapControlButton>
-            </TippyTooltip>
+            </MapControlTooltip>
           </div>
         </Tippy>
       </div>

diff --git a/src/components/map/split-map-button.tsx b/src/components/map/split-map-button.tsx
@@ -22,11 +22,10 @@ import React, {ComponentType, useCallback, useMemo} from 'react';
 import classnames from 'classnames';
 import {MapControlButton} from 'components/common/styled-components';
 import {Delete, Split} from 'components/common/icons';
-import {FormattedMessage} from '@kepler.gl/localization';
-import TippyTooltip from '../common/tippy-tooltip';
+import MapControlTooltipFactory from './map-control-tooltip';
 import {MapControl, MapControls} from 'reducers';
 
-SplitMapButtonFactory.deps = [];
+SplitMapButtonFactory.deps = [MapControlTooltipFactory];
 
 interface SplitMapButtonIcons {
   delete: ComponentType<any>;
@@ -42,7 +41,7 @@ export type SplitMapButtonProps = {
   mapControls: MapControls;
 };
 
-function SplitMapButtonFactory() {
+function SplitMapButtonFactory(MapControlTooltip) {
   const defaultActionIcons = {
     delete: Delete,
     split: Split
@@ -72,13 +71,9 @@ function SplitMapButtonFactory() {
       return null;
     }
     return isVisible ? (
-      <TippyTooltip
-        placement="left"
-        render={() => (
-          <div id="action-toggle">
-            <FormattedMessage id={isSplit ? 'tooltip.closePanel' : 'tooltip.switchToDualView'} />
-          </div>
-        )}
+      <MapControlTooltip
+        id="action-toggle"
+        message={isSplit ? 'tooltip.closePanel' : 'tooltip.switchToDualView'}
       >
         <MapControlButton
           active={isSplit}
@@ -87,7 +82,7 @@ function SplitMapButtonFactory() {
         >
           {isSplit ? <actionIcons.delete height="18px" /> : <actionIcons.split height="18px" />}
         </MapControlButton>
-      </TippyTooltip>
+      </MapControlTooltip>
     ) : null;
   };
 

diff --git a/src/components/map/toggle-3d-button.tsx b/src/components/map/toggle-3d-button.tsx
@@ -20,14 +20,12 @@
 
 import React, {ComponentType, useCallback, useMemo} from 'react';
 import classnames from 'classnames';
-
 import {Cube3d} from 'components/common/icons';
 import {MapControlButton} from 'components/common/styled-components';
-import {FormattedMessage} from '@kepler.gl/localization';
-import TippyTooltip from 'components/common/tippy-tooltip';
+import MapControlTooltipFactory from './map-control-tooltip';
 import {MapControls} from 'reducers';
 
-Toggle3dButtonFactory.deps = [];
+Toggle3dButtonFactory.deps = [MapControlTooltipFactory];
 
 interface Toggle3dButtonIcons {
   cube: ComponentType<any>;
@@ -40,7 +38,7 @@ export type Toggle3dButtonProps = {
   mapControls: MapControls;
 };
 
-function Toggle3dButtonFactory() {
+function Toggle3dButtonFactory(MapControlTooltip) {
   const defaultActionIcons = {
     cube: Cube3d
   };
@@ -64,13 +62,9 @@ function Toggle3dButtonFactory() {
     }, [mapControls]);
 
     return isVisible ? (
-      <TippyTooltip
-        placement="left"
-        render={() => (
-          <div id="action-3d">
-            <FormattedMessage id={dragRotate ? 'tooltip.disable3DMap' : 'tooltip.3DMap'} />
-          </div>
-        )}
+      <MapControlTooltip
+        id="action-3d"
+        message={dragRotate ? 'tooltip.disable3DMap' : 'tooltip.3DMap'}
       >
         <MapControlButton
           onClick={onClick}
@@ -79,7 +73,7 @@ function Toggle3dButtonFactory() {
         >
           <actionIcons.cube height="22px" />
         </MapControlButton>
-      </TippyTooltip>
+      </MapControlTooltip>
     ) : null;
   };