Adapt Legend widget to work without children (#161)

CartoDB · Aug 3, 2021 · d22faff · d22faff
1 parent ea612f3
commit d22faff
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Not released
 
 - Improve types [#160](https://github.com/CartoDB/carto-react/pull/160)
+- Adapt Legend widget to work without children [#161](https://github.com/CartoDB/carto-react/pull/161)
 - Update deck.gl version to 8.5.0 [#162](https://github.com/CartoDB/carto-react/pull/162)
 - Fix Material-UI warnings on justify property [#162](https://github.com/CartoDB/carto-react/pull/162)
 

diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js
@@ -130,26 +130,26 @@ function LegendRows({ layers = [], onChangeVisibility }) {
       switchable,
       visible,
       legend: {
-        children,
-        type,
-        collapsible,
-        note,
-        attr,
-        colors,
-        labels,
-        icons,
-        stats
+        children = null,
+        type = '',
+        collapsible = true,
+        note = '',
+        attr = '',
+        colors = [],
+        labels = [],
+        icons = [],
+        stats = undefined
       } = {}
     }) => {
       // TODO: Add validation for layer.type
+      const hasChildren = LEGEND_COMPONENT_BY_TYPE[type] || children;
       const LegendComponent = LEGEND_COMPONENT_BY_TYPE[type] || (() => children);
-
       return (
         <Fragment key={id}>
           <LegendWrapper
             id={id}
             title={title}
-            collapsible={collapsible}
+            collapsible={!!(collapsible && hasChildren)}
             switchable={switchable}
             visible={visible}
             note={note}
@@ -167,15 +167,11 @@ function LegendRows({ layers = [], onChangeVisibility }) {
                 icons,
                 stats
               }
-            }) || <NoLegend />}
+            })}
           </LegendWrapper>
           {!isSingle && <Divider />}
         </Fragment>
       );
     }
   );
 }
-
-function NoLegend() {
-  return <Typography>Legend type not found</Typography>;
-}
diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js
@@ -63,19 +63,21 @@ export default function LegendWrapper({
         onExpandClick={handleExpandClick}
         onChangeVisibility={handleChangeVisibility}
       />
-      <Collapse ref={wrapper} in={expanded} timeout='auto' unmountOnExit>
-        <Box className={classes.content}>
-          <Grid container direction='column' pb={16} spacing={1}>
-            {attr && (
-              <Typography className={classes.attr} variant='caption'>
-                By {attr}
-              </Typography>
-            )}
-            {children}
-            <Note>{note}</Note>
-          </Grid>
-        </Box>
-      </Collapse>
+      {!!children && (
+        <Collapse ref={wrapper} in={expanded} timeout='auto' unmountOnExit>
+          <Box className={classes.content}>
+            <Grid container direction='column' pb={16} spacing={1}>
+              {attr && (
+                <Typography className={classes.attr} variant='caption'>
+                  By {attr}
+                </Typography>
+              )}
+              {children}
+              <Note>{note}</Note>
+            </Grid>
+          </Box>
+        </Collapse>
+      )}
     </Box>
   );
 }

diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js
@@ -192,6 +192,18 @@ const LegendCustomTemplate = () => {
   return <LegendWidgetUI layers={layers}></LegendWidgetUI>;
 };
 
+const LegendNoChildrenTemplate = () => {
+  const layers = [
+    {
+      id: 0,
+      title: 'Single Layer',
+      visible: true,
+      legend: {}
+    }
+  ];
+  return <LegendWidgetUI layers={layers}></LegendWidgetUI>;
+};
+
 export const Playground = Template.bind({});
 
 export const SingleLayer = LegendTemplate.bind({});
@@ -202,3 +214,4 @@ export const Icon = LegendIconTemplate.bind({});
 export const Ramp = LegendRampTemplate.bind({});
 export const Proportion = LegendProportionTemplate.bind({});
 export const Custom = LegendCustomTemplate.bind({});
+export const NoChildren = LegendNoChildrenTemplate.bind({});