Merge pull request #869 from CodeForAfrica/fix/pesayetu-treeview

@/PesaYetu Fix TreeView Component
CodeForAfrica · Sep 3, 2024 · 7ff05ef · 7ff05ef
2 parents 13b879a + b77ce9f
commit 7ff05ef
Show file tree

Hide file tree

Showing 5 changed files with 419 additions and 58 deletions.
diff --git a/apps/pesayetu/package.json b/apps/pesayetu/package.json
@@ -39,10 +39,10 @@
     "@emotion/styled": "^11.13.0",
     "@hurumap/core": "workspace:*",
     "@hurumap/next": "workspace:*",
-    "@mui/lab": "5.0.0-alpha.155",
     "@mui/material": "^5.16.6",
     "@mui/styles": "^5.16.6",
     "@mui/utils": "^5.16.6",
+    "@mui/x-tree-view": "^7.15.0",
     "@reactour/tour": "^3.7.0",
     "aws-sdk": "^2.1666.0",
     "clsx": "^2.1.1",

diff --git a/apps/pesayetu/src/components/HURUmap/TreeView/index.js b/apps/pesayetu/src/components/HURUmap/TreeView/index.js
@@ -1,6 +1,5 @@
-import TreeItem from "@mui/lab/TreeItem";
-import MuiTreeView from "@mui/lab/TreeView";
 import { Typography } from "@mui/material";
+import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
@@ -12,13 +11,15 @@ import slugify from "@/pesayetu/utils/slugify";
 
 function TreeView({ items, onLabelClick, ...props }) {
   const classes = useStyles(props);
+
   const [expanded, setExpanded] = useState();
 
   const handleLabelClick = (e) => {
     e.preventDefault();
     const { id, expand } = e.target.dataset;
+
     if (expand) {
-      setExpanded(id);
+      setExpanded([id]);
     }
     if (onLabelClick) {
       onLabelClick(id);
@@ -30,23 +31,27 @@ function TreeView({ items, onLabelClick, ...props }) {
   }
   return (
     <div className={classes.root}>
-      <MuiTreeView expanded={[expanded]}>
+      <SimpleTreeView expandedItems={expanded}>
         {items.map((item) => {
           const itemId = slugify(item.title);
 
           return (
             <TreeItem
+              itemId={itemId}
               key={itemId}
-              nodeId={itemId}
               label={
                 <>
-                  <Typography data-id={itemId} data-expand variant="caption">
+                  <Typography
+                    data-id={itemId}
+                    data-expand
+                    variant="caption"
+                    onClick={handleLabelClick}
+                  >
                     {item.title}
                   </Typography>
                   <CheckIcon className={classes.icon} />
                 </>
               }
-              onLabelClick={handleLabelClick}
               classes={{
                 root: classes.tree,
                 expanded: classes.expanded,
@@ -58,14 +63,17 @@ function TreeView({ items, onLabelClick, ...props }) {
 
                 return (
                   <TreeItem
+                    itemId={childId}
                     key={childId}
-                    nodeId={childId}
                     label={
-                      <Typography data-id={childId} variant="caption">
+                      <Typography
+                        data-id={childId}
+                        variant="caption"
+                        onClick={handleLabelClick}
+                      >
                         {child.title}
                       </Typography>
                     }
-                    onLabelClick={handleLabelClick}
                     classes={{
                       label: clsx(classes.label, classes.childLabel),
                     }}
@@ -75,7 +83,7 @@ function TreeView({ items, onLabelClick, ...props }) {
             </TreeItem>
           );
         })}
-      </MuiTreeView>
+      </SimpleTreeView>
     </div>
   );
 }

diff --git a/apps/pesayetu/src/components/HURUmap/TreeView/useStyles.js b/apps/pesayetu/src/components/HURUmap/TreeView/useStyles.js
@@ -4,13 +4,26 @@ const useStyles = makeStyles(({ typography, palette }) => ({
   root: {
     textAlign: "right",
     background: palette.background.paper,
-    "& .MuiTreeItem-root.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label":
-      {
-        backgroundColor: "unset",
-      },
+    "& .MuiTreeItem-content.Mui-selected": {
+      backgroundColor: "unset",
+    },
     "& .MuiTreeItem-iconContainer": {
       width: 0,
     },
+    "& .MuiTreeItem-iconContainer svg": {
+      display: "none",
+    },
+    "& .MuiTreeItem-content": {
+      padding: 0,
+      borderRadius: 0,
+      "&.Mui-expanded": {
+        borderRightColor: palette.primary.main,
+        borderRightWidth: typography.pxToRem(2),
+        borderRightStyle: "Solid",
+        backgroundColor: palette.background.default,
+        borderBottom: `1px solid ${palette.grey.main}`,
+      },
+    },
   },
   label: {
     marginRight: typography.pxToRem(20),
@@ -29,18 +42,9 @@ const useStyles = makeStyles(({ typography, palette }) => ({
     fill: palette.grey.main,
     width: typography.pxToRem(19),
   },
-  tree: {},
   expanded: {
     "& .MuiCollapse-root": {
       marginLeft: 0,
-      borderTop: `1px solid ${palette.grey.main}`,
-      borderBottom: `1px solid ${palette.grey.main}`,
-    },
-    "&> .MuiTreeItem-content": {
-      borderRightColor: palette.primary.main,
-      borderRightWidth: typography.pxToRem(2),
-      borderRightStyle: "Solid",
-      backgroundColor: palette.background.default,
     },
     "& $icon": {
       fill: "#666666",

diff --git a/packages/hurumap-next/src/Map/LazyMap.js b/packages/hurumap-next/src/Map/LazyMap.js
@@ -50,11 +50,8 @@ const LazyMap = React.forwardRef(function LazyMap(props, ref) {
     [preferredChildren, isPinOrCompare],
   );
 
-  const { choropleth, legend } = generateChoropleth(
-    choroplethProps,
-    locations,
-    mapType,
-  );
+  const { choropleth, legend } =
+    generateChoropleth(choroplethProps, locations, mapType) || {};
 
   useEffect(() => {
     let selectedBound =