[Chore] Add layer header action component to deps (#2265)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Shan He <heshan0131@gmail.com>
keplergl · Jun 20, 2023 · 23763f0 · 23763f0
1 parent 043db65
commit 23763f0
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 89 deletions.
diff --git a/src/components/src/index.ts b/src/components/src/index.ts
@@ -242,10 +242,11 @@ export {ConfigGroupCollapsibleContent, StyledConfigGroupHeader, LayerConfigGroup
 export {default as ColumnSelectorFactory} from './side-panel/layer-panel/column-selector';
 export {default as StyledDropdownSelect} from './common/item-selector/item-selector';
 export {
-  default as LayerPanelHeaderFactory,
   DragHandle,
   LayerLabelEditor,
-  LayerTitleSectionFactory
+  LayerTitleSectionFactory,
+  LayerPanelHeaderActionSectionFactory,
+  default as LayerPanelHeaderFactory
 } from './side-panel/layer-panel/layer-panel-header';
 export {default as FilterPanelHeaderFactory} from './side-panel/filter-panel/filter-panel-header';
 
@@ -277,7 +278,7 @@ export type {MapContainerProps} from './map-container';
 export type {MapControlProps} from './map/map-control';
 export type {MapDrawPanelProps} from './map/map-draw-panel';
 export type {PanelHeaderProps} from './side-panel/panel-header';
-export type {LayerLabelEditorProps, LayerTitleSectionProps, LayerPanelHeaderProps} from './side-panel/layer-panel/layer-panel-header';
+export type {LayerLabelEditorProps, LayerTitleSectionProps, LayerPanelHeaderProps, LayerPanelHeaderActionSectionProps} from './side-panel/layer-panel/layer-panel-header';
 export type {FilterPanelHeaderProps} from './side-panel/filter-panel/filter-panel-header';
 export type {LayerTypeOption} from './side-panel/layer-panel/layer-type-dropdown-list';
 export type {LayerConfigGroupLabelProps, LayerConfigGroupProps} from './side-panel/layer-panel/layer-config-group';

diff --git a/src/components/src/side-panel/layer-panel/layer-config-group.tsx b/src/components/src/side-panel/layer-panel/layer-config-group.tsx
@@ -43,6 +43,7 @@ export type LayerConfigGroupProps = {
   expanded?: boolean;
   disabled?: boolean;
   onChange?: (newVisConfig: Partial<LayerVisConfig>) => void;
+  IconComponent?: React.ElementType;
 };
 
 export const StyledLayerConfigGroupAction = styled.div`
@@ -169,7 +170,8 @@ function LayerConfigGroupFactory(
     collapsible,
     description,
     disabled,
-    expanded
+    expanded,
+    IconComponent = VertThreeDots
   }) => {
     const [collapsed, toggleCollapsed] = useState(!expanded);
     const onToggleCollapsed = useCallback(() => {
@@ -188,7 +190,7 @@ function LayerConfigGroupFactory(
                 onChange={() => onChange?.({[property]: !layer?.config.visConfig[property]})}
               />
             ) : null}
-            {collapsible ? <VertThreeDots height="18px" /> : null}
+            {collapsible ? <IconComponent height="18px" /> : null}
           </StyledLayerConfigGroupAction>
         </StyledConfigGroupHeader>
         <ConfigGroupContent

diff --git a/src/components/src/side-panel/layer-panel/layer-panel-header.tsx b/src/components/src/side-panel/layer-panel/layer-panel-header.tsx
@@ -91,6 +91,12 @@ export type LayerPanelHeaderProps = {
   listeners?: React.ElementType;
 };
 
+type HeaderActionSectionProps = {
+  isEditingLabel: boolean;
+};
+
+export type LayerPanelHeaderActionSectionProps = LayerPanelHeaderProps & HeaderActionSectionProps;
+
 export const defaultProps = {
   isDragNDropEnabled: true,
   showRemoveLayer: true
@@ -142,10 +148,6 @@ const HeaderLabelSection = styled.div`
   padding-right: 50px;
 `;
 
-type HeaderActionSectionProps = {
-  isEditingLabel: boolean;
-};
-
 const HeaderActionSection = styled.div<HeaderActionSectionProps>`
   display: flex;
   position: absolute;
@@ -270,6 +272,86 @@ export function LayerTitleSectionFactory() {
   return LayerTitleSection;
 }
 
+LayerPanelHeaderActionSectionFactory.deps = [PanelHeaderActionFactory];
+
+export function LayerPanelHeaderActionSectionFactory(
+  PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>
+) {
+  const LayerPanelHeaderActionSection: React.FC<LayerPanelHeaderActionSectionProps> = (
+    props: LayerPanelHeaderActionSectionProps
+  ) => {
+    const {
+      isConfigActive,
+      allowDuplicate,
+      isVisible,
+      isValid,
+      layerId,
+      onToggleVisibility,
+      onResetIsValid,
+      onToggleEnableConfig,
+      onDuplicateLayer,
+      onRemoveLayer,
+      showRemoveLayer,
+      isEditingLabel,
+      // TODO: may not contain all necessary icons for all actions, e.g. actionIcons.duplicate. Need to to merge rather than replace
+      actionIcons = defaultActionIcons
+    } = props;
+    return (
+      <HeaderActionSection className="layer-panel__header__actions" isEditingLabel={isEditingLabel}>
+        <StyledPanelHeaderHiddenActions isConfigActive={isConfigActive}>
+          {showRemoveLayer ? (
+            <PanelHeaderAction
+              className="layer__remove-layer"
+              id={layerId}
+              tooltip={'tooltip.removeLayer'}
+              onClick={onRemoveLayer}
+              tooltipType="error"
+              IconComponent={actionIcons.remove}
+            />
+          ) : null}
+          <PanelHeaderAction
+            className="layer__duplicate"
+            id={layerId}
+            tooltip={'tooltip.duplicateLayer'}
+            onClick={onDuplicateLayer}
+            IconComponent={actionIcons.duplicate}
+            disabled={!allowDuplicate}
+          />
+        </StyledPanelHeaderHiddenActions>
+        {isValid ? (
+          <PanelHeaderAction
+            className="layer__visibility-toggle"
+            id={layerId}
+            tooltip={isVisible ? 'tooltip.hideLayer' : 'tooltip.showLayer'}
+            onClick={onToggleVisibility}
+            IconComponent={isVisible ? actionIcons.visible : actionIcons.hidden}
+          />
+        ) : (
+          <PanelHeaderAction
+            className="layer__is-valid-refresh"
+            id={layerId}
+            tooltip={'tooltip.resetAfterError'}
+            onClick={onResetIsValid}
+            IconComponent={actionIcons.resetIsValid}
+          />
+        )}
+
+        <PanelHeaderAction
+          className={classnames('layer__enable-config ', {
+            'is-open': isConfigActive
+          })}
+          id={layerId}
+          tooltip={'tooltip.layerSettings'}
+          onClick={onToggleEnableConfig}
+          IconComponent={actionIcons.enableConfig}
+        />
+      </HeaderActionSection>
+    );
+  };
+
+  return LayerPanelHeaderActionSection;
+}
+
 const StyledHeaderWaring = styled.div`
   position: absolute;
   right: -9px;
@@ -285,7 +367,6 @@ export const HeaderWarning = ({warning, id}) => (
     </Tooltip>
   </StyledHeaderWaring>
 );
-LayerPanelHeaderFactory.deps = [LayerTitleSectionFactory, PanelHeaderActionFactory];
 
 const defaultActionIcons = {
   remove: Trash,
@@ -296,31 +377,26 @@ const defaultActionIcons = {
   resetIsValid: Reset
 };
 
+LayerPanelHeaderFactory.deps = [LayerTitleSectionFactory, LayerPanelHeaderActionSectionFactory];
+
 function LayerPanelHeaderFactory(
   LayerTitleSection: ReturnType<typeof LayerTitleSectionFactory>,
-  PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>
+  LayerPanelHeaderActionSection: ReturnType<typeof LayerPanelHeaderActionSectionFactory>
 ) {
-  const LayerPanelHeader: React.FC<LayerPanelHeaderProps> = ({
-    isConfigActive,
-    allowDuplicate,
-    isDragNDropEnabled,
-    isVisible,
-    isValid,
-    warning,
-    label,
-    layerId,
-    layerType,
-    labelRCGColorValues,
-    onToggleVisibility,
-    onUpdateLayerLabel,
-    onToggleEnableConfig,
-    onDuplicateLayer,
-    onRemoveLayer,
-    onResetIsValid,
-    showRemoveLayer,
-    listeners,
-    actionIcons = defaultActionIcons
-  }) => {
+  const LayerPanelHeader: React.FC<LayerPanelHeaderProps> = props => {
+    const {
+      isConfigActive,
+      isDragNDropEnabled,
+      isValid,
+      warning,
+      label,
+      layerId,
+      layerType,
+      labelRCGColorValues,
+      onUpdateLayerLabel,
+      onToggleEnableConfig,
+      listeners
+    } = props;
     const [isEditingLabel, setIsEditingLabel] = useState(false);
     return (
       <StyledLayerPanelHeader
@@ -355,57 +431,7 @@ function LayerPanelHeaderFactory(
             }}
           />
         </HeaderLabelSection>
-        <HeaderActionSection
-          className="layer-panel__header__actions"
-          isEditingLabel={isEditingLabel}
-        >
-          <StyledPanelHeaderHiddenActions isConfigActive={isConfigActive}>
-            {showRemoveLayer ? (
-              <PanelHeaderAction
-                className="layer__remove-layer"
-                id={layerId}
-                tooltip={'tooltip.removeLayer'}
-                onClick={onRemoveLayer}
-                tooltipType="error"
-                IconComponent={actionIcons.remove}
-              />
-            ) : null}
-            <PanelHeaderAction
-              className="layer__duplicate"
-              id={layerId}
-              tooltip={'tooltip.duplicateLayer'}
-              onClick={onDuplicateLayer}
-              IconComponent={actionIcons.duplicate}
-              disabled={!allowDuplicate}
-            />
-          </StyledPanelHeaderHiddenActions>
-          {isValid ? (
-            <PanelHeaderAction
-              className="layer__visibility-toggle"
-              id={layerId}
-              tooltip={isVisible ? 'tooltip.hideLayer' : 'tooltip.showLayer'}
-              onClick={onToggleVisibility}
-              IconComponent={isVisible ? actionIcons.visible : actionIcons.hidden}
-            />
-          ) : (
-            <PanelHeaderAction
-              className="layer__is-valid-refresh"
-              id={layerId}
-              tooltip={'tooltip.resetAfterError'}
-              onClick={onResetIsValid}
-              IconComponent={actionIcons.resetIsValid}
-            />
-          )}
-          <PanelHeaderAction
-            className={classnames('layer__enable-config ', {
-              'is-open': isConfigActive
-            })}
-            id={layerId}
-            tooltip={'tooltip.layerSettings'}
-            onClick={onToggleEnableConfig}
-            IconComponent={actionIcons.enableConfig}
-          />
-        </HeaderActionSection>
+        <LayerPanelHeaderActionSection {...props} isEditingLabel={isEditingLabel} />
       </StyledLayerPanelHeader>
     );
   };

diff --git a/src/components/src/side-panel/layer-panel/layer-panel.tsx b/src/components/src/side-panel/layer-panel/layer-panel.tsx
@@ -116,13 +116,13 @@ function LayerPanelFactory(
     };
 
     _resetIsValid: MouseEventHandler = e => {
-      e.stopPropagation();
+      e?.stopPropagation();
       // Make the layer valid and visible again after an error
       this.props.layerSetIsValid(this.props.layer, true);
     };
 
     _toggleEnableConfig: MouseEventHandler = e => {
-      e.stopPropagation();
+      e?.stopPropagation();
       const {
         layer: {
           config: {isConfigActive}
@@ -132,12 +132,12 @@ function LayerPanelFactory(
     };
 
     _removeLayer: MouseEventHandler = e => {
-      e.stopPropagation();
+      e?.stopPropagation();
       this.props.removeLayer(this.props.layer.id);
     };
 
     _duplicateLayer: MouseEventHandler = e => {
-      e.stopPropagation();
+      e?.stopPropagation();
       this.props.duplicateLayer(this.props.layer.id);
     };
 

diff --git a/src/localization/src/translations/en.ts b/src/localization/src/translations/en.ts
@@ -198,8 +198,8 @@ export default {
     rowCount: '{rowCount} rows'
   },
   tooltip: {
-    hideLayer: 'hide layer',
-    showLayer: 'show layer',
+    hideLayer: 'Hide layer',
+    showLayer: 'Show layer',
     hideFeature: 'Hide Feature',
     showFeature: 'Show feature',
     hide: 'hide',