Fix jumping legend (#3450)

bcgov · Mar 6, 2024 · d3e525c · d3e525c
1 parent e21ea54
commit d3e525c
Showing 1 changed file with 48 additions and 37 deletions.
diff --git a/web/src/features/fba/components/map/Legend.tsx b/web/src/features/fba/components/map/Legend.tsx
@@ -39,48 +39,58 @@ interface LegendItemProps {
   onChange: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void
   subItems?: SubItem[]
   description?: string | null
+  renderEmptyDescription?: boolean
 }
 
-const LegendItem: React.FC<LegendItemProps> = ({ label, checked, onChange, subItems, description }) => (
-  <div>
-    <Grid>
-      <Grid container alignItems={'center'}>
-        <Grid item>
-          <Checkbox
-            data-testid={`${label.toLowerCase().split(' ')[0]}-checkbox`}
-            checked={checked}
-            onChange={onChange}
-          />
-        </Grid>
-        <Grid item>
-          <Typography variant="h2" sx={{ fontSize: '1rem', fontWeight: 'bold' }}>
-            {label}
-          </Typography>
+const LegendItem: React.FC<LegendItemProps> = ({
+  label,
+  checked,
+  onChange,
+  subItems,
+  description,
+  renderEmptyDescription = false
+}) => {
+  return (
+    <div>
+      <Grid>
+        <Grid container alignItems={'center'}>
+          <Grid item>
+            <Checkbox
+              data-testid={`${label.toLowerCase().split(' ')[0]}-checkbox`}
+              checked={checked}
+              onChange={onChange}
+            />
+          </Grid>
+          <Grid item>
+            <Typography variant="h2" sx={{ fontSize: '1rem', fontWeight: 'bold' }}>
+              {label}
+            </Typography>
+          </Grid>
         </Grid>
-      </Grid>
-      <Grid container alignItems={'center'}>
-        <Grid item sx={{ transform: 'translate(50%, -50%)' }}>
-          <Typography variant="body1" sx={{ fontSize: '0.75rem' }}>
-            {description}
-          </Typography>
+        <Grid container alignItems={'center'}>
+          <Grid item sx={{ transform: 'translate(50%, -50%)' }}>
+            <Typography variant="body1" sx={{ fontSize: '0.75rem' }}>
+              {description ?? (renderEmptyDescription && <span>&nbsp;</span>)}
+            </Typography>
+          </Grid>
         </Grid>
-      </Grid>
 
-      {subItems && (
-        <List dense={true} sx={{ marginLeft: '2.5rem', marginTop: '-1rem' }}>
-          {subItems.map(subItem => (
-            <ListItem disablePadding key={subItem.label}>
-              <ListItemIcon>
-                <LegendSymbol sx={{ backgroundColor: subItem.symbol }} />
-              </ListItemIcon>
-              <ListItemText>{subItem.label}</ListItemText>
-            </ListItem>
-          ))}
-        </List>
-      )}
-    </Grid>
-  </div>
-)
+        {subItems && (
+          <List dense={true} sx={{ marginLeft: '2.5rem', marginTop: '-1rem' }}>
+            {subItems.map(subItem => (
+              <ListItem disablePadding key={subItem.label}>
+                <ListItemIcon>
+                  <LegendSymbol sx={{ backgroundColor: subItem.symbol }} />
+                </ListItemIcon>
+                <ListItemText>{subItem.label}</ListItemText>
+              </ListItem>
+            ))}
+          </List>
+        )}
+      </Grid>
+    </div>
+  )
+}
 
 interface LegendProps {
   onToggleLayer: (layerName: string, isVisible: boolean) => void
@@ -143,6 +153,7 @@ const Legend = ({
         checked={showSnow}
         onChange={() => handleLayerChange('snowVector', showSnow, setShowSnow)}
         description={snowDescription}
+        renderEmptyDescription={true}
       ></LegendItem>
     </LegendGrid>
   )