Clean ColumnNavDropdown

process-analytics · Aug 1, 2023 · 9548621 · 9548621
1 parent 040fe03
commit 9548621
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 89 deletions.
diff --git a/src/components/material-kit/Navbar/desktop/navDropdown/ColumnNavDropdown.tsx b/src/components/material-kit/Navbar/desktop/navDropdown/ColumnNavDropdown.tsx
@@ -33,96 +33,114 @@ import { getHoverConfiguration, HoverStyle } from '../../common';
 
 import { HeaderMenu, isHeaderMenuWithItems } from '../../../../Header';
 import { MKTypography } from '../../..';
-import { Link } from '../../../..';
+import { Link, LinkContent } from '../../../..';
 
-export const ColumnNavDropdown = (
-  menus: HeaderMenu[],
-  name: string,
-  hoverStyle: HoverStyle,
-  rowsPerColumn?: number,
-): JSX.Element => {
-  const calculateColumns = menus.reduce(
-    (resultArray: HeaderMenu[][], item, index) => {
-      const chunkIndex = Math.floor(index / (rowsPerColumn ?? 3));
-      if (!resultArray[chunkIndex]) {
-        resultArray[chunkIndex] = [];
-      }
+function splitArrayByColumns<T>(array: T[], rowsPerColumn: number): T[][] {
+  return array.reduce((resultArray: T[][], item, index) => {
+    const chunkIndex = Math.floor(index / rowsPerColumn);
+    if (!resultArray[chunkIndex]) {
+      resultArray[chunkIndex] = [];
+    }
 
-      resultArray[chunkIndex].push(item);
-      return resultArray;
-    },
-    [],
-  );
+    resultArray[chunkIndex].push(item);
+    return resultArray;
+  }, []);
+}
 
-  return (
-    <Grid key={name} container spacing={3} py={1} px={1.5}>
-      {calculateColumns.map((menus, key) => {
-        const gridKey = `grid-${key}`;
-        const dividerKey = `divider-${key}`;
+const DropdownDropdown = (
+  item: LinkContent & {
+    hoverStyle: HoverStyle;
+  },
+): JSX.Element => (
+  <Link
+    component={MKTypography}
+    type={item.type}
+    url={item.url}
+    key={item.name}
+    minWidth="11.25rem"
+    display="block"
+    variant="button"
+    textTransform="capitalize"
+    fontWeight="regular"
+    py={0.625}
+    px={2}
+    sx={({ palette, borders: { borderRadius } }: Theme) => ({
+      borderRadius: borderRadius.md,
+      cursor: 'pointer',
+      transition: 'all 300ms linear',
+      ...getHoverConfiguration(palette, item.hoverStyle),
+    })}
+  >
+    {item.name}
+  </Link>
+);
 
-        return (
-          <Grid
-            key={gridKey}
-            item
-            xs={12 / (rowsPerColumn ?? 5)}
-            sx={{ position: 'relative' }}
-          >
-            {menus.map((menu, index) => (
-              <Fragment key={menu.name}>
-                <MKTypography
-                  display="block"
-                  variant="button"
-                  fontWeight="bold"
-                  textTransform="capitalize"
-                  py={1}
-                  px={0.5}
-                  mt={index !== 0 ? 2 : 0}
-                >
-                  {menu.name}
-                </MKTypography>
+const DropdownItem = ({
+  menu,
+  index,
+  hoverStyle,
+}: {
+  menu: HeaderMenu;
+  index: number;
+  hoverStyle: HoverStyle;
+}): JSX.Element => (
+  <Fragment key={menu.name}>
+    <MKTypography
+      display="block"
+      variant="button"
+      fontWeight="bold"
+      textTransform="capitalize"
+      py={1}
+      px={0.5}
+      mt={index !== 0 ? 2 : 0}
+    >
+      {menu.name}
+    </MKTypography>
 
-                {isHeaderMenuWithItems(menu) &&
-                  menu.items.map(item => (
-                    <Link
-                      component={MKTypography}
-                      type={item.type}
-                      url={item.url}
-                      key={item.name}
-                      minWidth="11.25rem"
-                      display="block"
-                      variant="button"
-                      textTransform="capitalize"
-                      fontWeight="regular"
-                      py={0.625}
-                      px={2}
-                      sx={({ palette, borders: { borderRadius } }: Theme) => ({
-                        borderRadius: borderRadius.md,
-                        cursor: 'pointer',
-                        transition: 'all 300ms linear',
-                        ...getHoverConfiguration(palette, hoverStyle),
-                      })}
-                    >
-                      {item.name}
-                    </Link>
-                  ))}
-              </Fragment>
-            ))}
-            {key !== 0 && (
-              <Divider
-                key={dividerKey}
-                orientation="vertical"
-                sx={{
-                  position: 'absolute',
-                  top: '50%',
-                  left: '-4px',
-                  transform: 'translateY(-45%)',
-                  height: '90%',
-                }}
-              />
-            )}
-          </Grid>
-        );
-      })}
-    </Grid>
-  );
-};
+    {isHeaderMenuWithItems(menu) &&
+      menu.items.map(item => (
+        <DropdownDropdown hoverStyle={hoverStyle} {...item} />
+      ))}
+  </Fragment>
+);
+
+export const ColumnNavDropdown = ({
+  menus,
+  name,
+  hoverStyle,
+  rowsPerColumn = 3,
+}: {
+  menus: HeaderMenu[];
+  name: string;
+  hoverStyle: HoverStyle;
+  rowsPerColumn?: number;
+}): JSX.Element => (
+  <Grid key={name} container spacing={3} py={1} px={1.5}>
+    {splitArrayByColumns(menus, rowsPerColumn).map((menus, key) => (
+      <Grid
+        key={`grid-${key}`}
+        item
+        xs={12 / rowsPerColumn}
+        sx={{ position: 'relative' }}
+      >
+        {menus.map((menu, index) => (
+          <DropdownItem menu={menu} index={index} hoverStyle={hoverStyle} />
+        ))}
+
+        {key !== 0 && (
+          <Divider
+            key={`divider-${key}`}
+            orientation="vertical"
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '-4px',
+              transform: 'translateY(-45%)',
+              height: '90%',
+            }}
+          />
+        )}
+      </Grid>
+    ))}
+  </Grid>
+);
diff --git a/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx b/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
@@ -106,7 +106,12 @@ export const NavDropdown = ({
               {routes.map(({ name, menus, withColumns, rowsPerColumn }) =>
                 withColumns ? (
                   // Render the dropdown menu that should be display as columns
-                  ColumnNavDropdown(menus, name, hoverStyle, rowsPerColumn)
+                  <ColumnNavDropdown
+                    menus={menus}
+                    name={name}
+                    rowsPerColumn={rowsPerColumn}
+                    hoverStyle={hoverStyle}
+                  />
                 ) : (
                   // Render the dropdown menu that should be display as list items
                   <ListNavDropdown