[Chore] Create factory for LayerLegendHeader and LayerLegendContent (#…

…1589) Signed-off-by: Marko Letic <mletic@users.noreply.github.com> Co-authored-by: Shan He <heshan0131@gmail.com>
keplergl · Aug 30, 2021 · c106ee0 · c106ee0
1 parent 878750c
commit c106ee0
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 39 deletions.
diff --git a/src/components/index.js b/src/components/index.js
@@ -92,7 +92,11 @@ export {default as LayerSelectorPanelFactory} from './map/layer-selector-panel';
 export {default as LocalePanelFactory} from './map/locale-panel';
 export {default as MapControlPanelFactory} from './map/map-control-panel';
 export {default as MapControlTooltipFactory} from './map/map-control-tooltip';
-export {default as MapLegendFactory} from './map/map-legend';
+export {
+  default as MapLegendFactory,
+  LayerLegendHeaderFactory,
+  LayerLegendContentFactory
+} from './map/map-legend';
 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';
@@ -189,9 +193,6 @@ export {
   LayerColorSelector
 } from './side-panel/layer-panel/layer-configurator';
 
-// map components
-export {default as MapLegend} from 'components/map/map-legend';
-
 export * from './common/styled-components';
 import * as Icons from './common/icons';
 

diff --git a/src/components/map/map-legend.d.ts b/src/components/map/map-legend.d.ts
@@ -2,6 +2,13 @@ import {FunctionComponent} from 'react';
 import {Layer, LayerConfig, VisualChannel, VisualChannelDescription} from 'layers';
 import {MapLegendPanelComponent} from './map-legend-panel';
 
+export type LayerSizeLegendProps = {
+  label: string,
+  name: string
+};
+
+export const LayerSizeLegend: FunctionComponent<LayerSizeLegendProps>;
+
 export type SingleColorLegendProps = {
   width: number,
   color: string
@@ -18,6 +25,26 @@ export type LayerColorLegendProps = {
 
 export const LayerColorLegend: FunctionComponent<LayerColorLegendProps>;
 
+export type LayerLegendHeaderProps = {
+  layer: Layer,
+  options?: {
+    showLayerName?: boolean
+  }
+};
+
+export const LayerLegendHeader: FunctionComponent<LayerLegendHeaderProps>;
+
+export function LayerLegendHeaderFactory(): LayerLegendHeader;
+
+export type LayerLegendContentProps = {
+  layer: Layer,
+  containerW: number,
+};
+
+export const LayerLegendContent: FunctionComponent<LayerLegendContentProps>;
+
+export function LayerLegendContentFactory(): LayerLegendContent;
+
 export type MapLegendProps = {
   layers?: ReadonlyArray<Layer>,
   width?: number,

diff --git a/src/components/map/map-legend.js b/src/components/map/map-legend.js
@@ -75,6 +75,7 @@ export const VisualChannelMetric = ({name}) => {
   );
 };
 
+/** @type {typeof import('./map-legend').LayerSizeLegend} */
 export const LayerSizeLegend = ({label, name}) => (
   <div className="legend--layer_size-schema">
     <p>
@@ -143,7 +144,58 @@ LayerColorLegend.displayName = 'LayerColorLegend';
 const isColorChannel = visualChannel =>
   [CHANNEL_SCALES.color, CHANNEL_SCALES.colorAggr].includes(visualChannel.channelScaleType);
 
-function MapLegendFactory() {
+export function LayerLegendHeaderFactory() {
+  /** @type {typeof import('./map-legend').LayerLegendHeader }> */
+  const LayerLegendHeader = ({options, layer}) => {
+    return options?.showLayerName !== false ? (
+      <div className="legend--layer_name">{layer.config.label}</div>
+    ) : null;
+  };
+  return LayerLegendHeader;
+}
+
+export function LayerLegendContentFactory() {
+  /** @type {typeof import('./map-legend').LayerLegendContent }> */
+  const LayerLegendContent = ({layer, containerW}) => {
+    const colorChannels = Object.values(layer.visualChannels).filter(isColorChannel);
+    const nonColorChannels = Object.values(layer.visualChannels).filter(vc => !isColorChannel(vc));
+
+    return (
+      <>
+        {colorChannels.map(colorChannel =>
+          !colorChannel.condition || colorChannel.condition(layer.config) ? (
+            <LayerColorLegend
+              key={colorChannel.key}
+              description={layer.getVisualChannelDescription(colorChannel.key)}
+              config={layer.config}
+              width={containerW - 2 * DIMENSIONS.mapControl.padding}
+              colorChannel={colorChannel}
+            />
+          ) : null
+        )}
+        {nonColorChannels.map(visualChannel => {
+          const matchCondition = !visualChannel.condition || visualChannel.condition(layer.config);
+          const enabled = layer.config[visualChannel.field] || visualChannel.defaultMeasure;
+
+          const description = layer.getVisualChannelDescription(visualChannel.key);
+
+          return matchCondition && enabled ? (
+            <LayerSizeLegend
+              key={visualChannel.key}
+              label={description.label}
+              name={description.measure}
+            />
+          ) : null;
+        })}
+      </>
+    );
+  };
+
+  return LayerLegendContent;
+}
+
+MapLegendFactory.deps = [LayerLegendHeaderFactory, LayerLegendContentFactory];
+function MapLegendFactory(LayerLegendHeader, LayerLegendContent) {
   /** @type {typeof import('./map-legend').MapLegend }> */
   const MapLegend = ({layers = [], width, options}) => (
     <div className="map-legend">
@@ -152,10 +204,6 @@ function MapLegendFactory() {
           return null;
         }
         const containerW = width || DIMENSIONS.mapControl.width;
-        const colorChannels = Object.values(layer.visualChannels).filter(isColorChannel);
-        const nonColorChannels = Object.values(layer.visualChannels).filter(
-          vc => !isColorChannel(vc)
-        );
 
         return (
           <StyledMapControlLegend
@@ -164,35 +212,8 @@ function MapLegendFactory() {
             key={index}
             width={containerW}
           >
-            {options?.showLayerName !== false ? (
-              <div className="legend--layer_name">{layer.config.label}</div>
-            ) : null}
-            {colorChannels.map(colorChannel =>
-              !colorChannel.condition || colorChannel.condition(layer.config) ? (
-                <LayerColorLegend
-                  key={colorChannel.key}
-                  description={layer.getVisualChannelDescription(colorChannel.key)}
-                  config={layer.config}
-                  width={containerW - 2 * DIMENSIONS.mapControl.padding}
-                  colorChannel={colorChannel}
-                />
-              ) : null
-            )}
-            {nonColorChannels.map(visualChannel => {
-              const matchCondition =
-                !visualChannel.condition || visualChannel.condition(layer.config);
-              const enabled = layer.config[visualChannel.field] || visualChannel.defaultMeasure;
-
-              const description = layer.getVisualChannelDescription(visualChannel.key);
-
-              return matchCondition && enabled ? (
-                <LayerSizeLegend
-                  key={visualChannel.key}
-                  label={description.label}
-                  name={description.measure}
-                />
-              ) : null;
-            })}
+            <LayerLegendHeader options={options} layer={layer} />
+            <LayerLegendContent containerW={containerW} layer={layer} />
           </StyledMapControlLegend>
         );
       })}

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -24,6 +24,7 @@ export {
   ADD_MAP_STYLE_ID,
   AGGREGATION_TYPES,
   ALL_FIELD_TYPES,
+  CHANNEL_SCALES,
   DATA_TABLE_ID,
   DATASET_FORMATS,
   DEFAULT_LAYER_GROUPS,

diff --git a/src/localization/en.js b/src/localization/en.js
@@ -393,7 +393,7 @@ export default {
   },
   header: {
     visibleLayers: 'Visible layers',
-    layerLegend: 'Layer Legend'
+    layerLegend: 'Legend'
   },
   interactions: {
     tooltip: 'Tooltip',