[fix] collapsible layer config group ui improvements (#2268)

keplergl · Jun 20, 2023 · 7b45e4f · 7b45e4f
1 parent a168954
commit 7b45e4f
Showing 1 changed file with 10 additions and 5 deletions.
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
@@ -91,16 +91,21 @@ export const StyledLayerConfigGroup = styled.div`
   }
 `;
 
+interface StyledConfigGroupHeaderProps {
+  collapsible?: boolean;
+}
+
 export const StyledConfigGroupHeader = styled.div.attrs({
   className: 'layer-config-group__header'
-})`
+})<StyledConfigGroupHeaderProps>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
+  cursor: default;
 
   :hover {
-    cursor: pointer;
+    ${props => props.collapsible && 'cursor: pointer;'}
     .layer-config-group__label {
       color: ${props => props.theme.textColorHl};
     }
@@ -175,12 +180,12 @@ function LayerConfigGroupFactory(
   }) => {
     const [collapsed, toggleCollapsed] = useState(!expanded);
     const onToggleCollapsed = useCallback(() => {
-      toggleCollapsed(!collapsed);
-    }, [collapsed, toggleCollapsed]);
+      collapsible && toggleCollapsed(!collapsed);
+    }, [collapsed, toggleCollapsed, collapsible]);
 
     return (
       <StyledLayerConfigGroup className={classnames('layer-config-group', {collapsed, disabled})}>
-        <StyledConfigGroupHeader onClick={onToggleCollapsed}>
+        <StyledConfigGroupHeader onClick={onToggleCollapsed} collapsible={collapsible}>
           <LayerConfigGroupLabel label={label} description={description} collapsed={collapsed} />
           <StyledLayerConfigGroupAction className="layer-config-group__action">
             {property ? (