@digigov/ui 0.30.0-navlist.alpha.3 → 0.30.1

package/src/core/NavList/NavListItemAuto.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import Divider from '@digigov/react-core/SectionBreak';
+import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
+import NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
+import NavListContext from '@digigov/ui/core/NavList/NavListContext';
+
+export interface NavListItemAutoProps {
+  item?: any;
+  children?: React.ReactNode;
+  role?: string;
+}
+
+export const NavListItemAuto: React.FC<NavListItemAutoProps> = ({
+  item,
+  children,
+  role,
+  ...props
+}) => {
+  const { layout, showDividers, links, container, setRegister } = useContext(
+    NavListContext
+  );
+  const { subMenu } = links.find((link) => link.name === item.name) || {};
+
+  return (
+    <React.Fragment>
+      <NavListItemBase
+        container={container}
+        setRegister={setRegister}
+        item={item}
+        layout={layout}
+        role={role}
+        {...props}
+      >
+        {subMenu && subMenu?.length > 0 && <NavListSubMenu links={subMenu} />}
+      </NavListItemBase>
+      {showDividers && <Divider />}
+    </React.Fragment>
+  );
+};
+
+export default NavListItemAuto;

package/src/core/NavList/NavListItemBase.tsx

@@ -1,149 +1,66 @@
-import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import ExpandMore from '@material-ui/icons/ExpandMore';
+import React from 'react';
 import Link from '@digigov/ui/core/Link';
-import { useRouter } from '@digigov/ui/router';
+import {
+  isNavListItemLinkInterface,
+  NavListLayout,
+} from '@digigov/ui/core/NavList/types';
+import NavListItem from '@digigov/ui/core/NavList/NavListItem';
+import NavMenu from '@digigov/ui/core/NavList/NavMenu';
+import NavMenuContainer from '@digigov/ui/core/NavList/NavMenuContainer';
+import NavMenuContainerTitle from '@digigov/ui/core/NavList/NavMenuContainerTitle';
+import NavMenuContainerContent from '@digigov/ui/core/NavList/NavMenuContainerContent';
+import NavMenuContainerContentList from '@digigov/ui/core/NavList/NavMenuContainerContentList';
+import NavMenuContainerContentListItem from '@digigov/ui/core/NavList/NavMenuContainerContentListItem';
 
-const TRAILING_SLASH = /\/$/gm;
-export const useNavListItemBaseStyles = makeStyles(
-  (theme) => {
-    const transition = {
-      duration: theme.transitions.duration.shortest,
-    };
-    return {
-      root: {
-        position: 'relative',
-        listStyle: 'none',
-        boxSizing: 'border-box',
-        textAlign: 'left',
-        margin: theme.spacing(0),
-        ...theme.typography.body1,
-        '&$horizontal': {
-          flexDirection: 'column',
-        },
-      },
-      link: {
-        display: 'flex',
-        flexGrow: 1,
-        padding: theme.spacing(1),
-        textDecoration: 'none',
-        '&:hover': {
-          textDecoration: 'underline',
-        },
-      },
-      selected: {
-        fontWeight: 'bolder',
-        '&$horizontal': {
-          borderStyle: 'solid',
-          borderColor: theme.palette.secondary.main,
-          borderTop: 0,
-          borderLeft: 0,
-          borderRight: 0,
-        },
-        '&$vertical': {
-          border: 0,
-        },
-      },
-      // Pseudoclasses - do not remove //
-      horizontal: {},
-      vertical: {},
-      // End Pseudoclasses //
-      label: {
-        display: 'flex',
-        alignItems: 'center',
-        flex: 'auto',
-      },
-      icon: {
-        display: 'flex',
-        alignItems: 'center',
-        transform: 'rotate(0deg)',
-        transition: theme.transitions.create('transform', transition),
-        '&$open': {
-          transform: 'rotate(180deg)',
-        },
-      },
-      submenu: {
-        display: 'flex',
-      },
-      /* Pseudo-class applied to the Expand icon if `open={true}`. */
-      open: {},
-    };
-  },
-  { name: 'MuiNavListItemBase' }
-);
 export interface NavListItemBaseProps {
+  container?: (key: string) => { active: boolean; id: string };
+  setRegister?: (name: string) => any;
   children?: React.ReactNode;
-  href?: string;
-  label?: React.ReactNode;
-  className?: string;
-  expandOn?: 'hover' | 'click';
-  selected?: boolean;
-  isNested?: boolean;
-  horizontal?: boolean;
-  open?: boolean;
-  onClick?: (e: any) => void;
+  item?: any;
+  layout?: NavListLayout;
   role?: string;
 }
 
-export const NavListItemBase = React.forwardRef<
-  HTMLLIElement,
-  NavListItemBaseProps
->(function NavListItemBase(
-  {
-    href = '#',
-    label,
-    children,
-    className,
-    open = false,
-    horizontal = false,
-    selected = false,
-    isNested,
-    expandOn,
-    onClick,
-    role,
-    ...props
-  },
-  ref
-) {
-  const classes = useNavListItemBaseStyles();
-  const [privateSelected, setPrivateSelected] = useState<boolean>(selected);
-  const { router } = useRouter();
-
-  useEffect(() => {
-    const asPath = router?.asPath.split('?').shift();
-    const isSelected =
-      asPath?.replace(TRAILING_SLASH, '') === href.replace(TRAILING_SLASH, '');
-    if (isSelected !== privateSelected) {
-      setPrivateSelected(isSelected);
-    }
-  }, [href, router?.asPath, selected, privateSelected]);
+export const NavListItemBase: React.FC<NavListItemBaseProps> = ({
+  container,
+  setRegister,
+  children,
+  item,
+  layout = 'horizontal',
+  role,
+  ...props
+}) => {
   return (
-    <li
-      ref={ref}
-      className={clsx(
-        className,
-        classes.root,
-        horizontal && classes.horizontal
-      )}
-      onClick={onClick}
-      role="none"
-    >
-      <div
-        className={clsx(
-          horizontal ? classes.horizontal : classes.vertical,
-          (selected || privateSelected) && classes.selected
-        )}
-      >
-        <Link href={href} className={classes.link} {...props} role={role}>
-          <span className={classes.label}>{label}</span>
-          <span className={clsx(classes.icon, open && classes.open)}>
-            {isNested && <ExpandMore />}
-          </span>
-        </Link>
-      </div>
-      <div className={classes.submenu}>{children}</div>
-    </li>
+    <>
+      <NavListItem
+        layout={layout}
+        link={item}
+        setRegister={setRegister}
+        role="menuitem"
+        {...props}
+      />
+      <NavMenu layout={layout} {...(container && container(item.name))}>
+        <NavMenuContainer layout={layout} paddingLeft={5} paddingRight={5}>
+          <NavMenuContainerTitle layout={layout}>
+            {item.label}
+          </NavMenuContainerTitle>
+          <NavMenuContainerContent>
+            <NavMenuContainerContentList layout={layout}>
+              {item.subMenu?.map((subMenu, menuIndex) => {
+                return (
+                  isNavListItemLinkInterface(subMenu) && (
+                    <NavMenuContainerContentListItem key={menuIndex}>
+                      <Link href={subMenu.href}>{subMenu.label}</Link>
+                    </NavMenuContainerContentListItem>
+                  )
+                );
+              })}
+            </NavMenuContainerContentList>
+          </NavMenuContainerContent>
+        </NavMenuContainer>
+      </NavMenu>
+    </>
   );
-});
+};
+
 export default NavListItemBase;

package/src/core/NavList/NavListItemButton.tsx

@@ -0,0 +1,3 @@
+import NavListItemButton from '@digigov/react-core/NavListItemButton';
+export * from '@digigov/react-core/NavListItemButton';
+export default NavListItemButton;

package/src/core/NavList/NavListItemLink.tsx

@@ -0,0 +1,3 @@
+import NavListItemLink from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemLink';
+export default NavListItemLink;

package/src/core/NavList/NavListSubMenu.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { NavListProps } from '@digigov/ui/core/NavList/types';
+import { NavListAutoProps } from '@digigov/ui/core/NavList/types';
 import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
 import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
 import NavListContext, {
   NavLinkInterface,
 } from '@digigov/ui/core/NavList/NavListContext';
 
-export interface NavListSubMenuProps extends NavListProps {
+export interface NavListSubMenuProps extends NavListAutoProps {
   links: NavLinkInterface[];
 }
 
@@ -14,19 +14,13 @@ export const NavListSubMenu: React.FC<NavListSubMenuProps> = ({
   links,
   ...props
 }) => {
-  const { horizontal } = useContext(NavListContext);
+  const { layout } = useContext(NavListContext);
+
   return (
-    <NavListBase subMenu floating={horizontal} {...props}>
+    <NavListBase subMenu floating={layout === 'horizontal'} {...props}>
       {links &&
         links.map((subMenuLink, key) => {
-          return (
-            <NavListItemBase
-              expandOn="hover"
-              key={key}
-              href={subMenuLink.href}
-              label={subMenuLink.label}
-            />
-          );
+          return <NavListItemBase key={key} item={subMenuLink} />;
         })}
     </NavListBase>
   );

package/src/core/NavList/NavMenu.tsx

@@ -1,4 +1,3 @@
 import NavMenu from '@digigov/react-core/NavMenu';
-
-export { NavMenu };
+export * from '@digigov/react-core/NavMenu';
 export default NavMenu;

package/src/core/NavList/NavMenuContainer.tsx

@@ -1,4 +1,3 @@
 import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
-
-export { NavMenuContainer };
+export * from '@digigov/react-core/NavMenuContainer';
 export default NavMenuContainer;

package/src/core/NavList/NavMenuContainerContent.tsx

@@ -1,4 +1,3 @@
 import NavMenuContainerContent from '@digigov/react-core/NavMenuContainerContent';
-
-export { NavMenuContainerContent };
+export * from '@digigov/react-core/NavMenuContainerContent';
 export default NavMenuContainerContent;

package/src/core/NavList/NavMenuContainerContentList.tsx

@@ -1,4 +1,3 @@
 import NavMenuContainerContentList from '@digigov/react-core/NavMenuContainerContentList';
-
-export { NavMenuContainerContentList };
+export * from '@digigov/react-core/NavMenuContainerContentList';
 export default NavMenuContainerContentList;

package/src/core/NavList/NavMenuContainerContentListItem.tsx

@@ -1,4 +1,3 @@
 import NavMenuContainerContentListItem from '@digigov/react-core/NavMenuContainerContentListItem';
-
-export { NavMenuContainerContentListItem };
+export * from '@digigov/react-core/NavMenuContainerContentListItem';
 export default NavMenuContainerContentListItem;

package/src/core/NavList/NavMenuContainerTitle.tsx

@@ -1,4 +1,3 @@
 import NavMenuContainerTitle from '@digigov/react-core/NavMenuContainerTitle';
-
-export { NavMenuContainerTitle };
+export * from '@digigov/react-core/NavMenuContainerTitle';
 export default NavMenuContainerTitle;

package/src/core/NavList/NavVertical.tsx

@@ -1,4 +1,3 @@
 import NavVertical from '@digigov/react-core/NavVertical';
-
-export { NavVertical };
+export * from '@digigov/react-core/NavVertical';
 export default NavVertical;

package/src/core/NavList/NavVerticalItem.tsx

@@ -1,4 +1,3 @@
 import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
-
-export { NavVerticalItem };
+export * from '@digigov/react-core/NavVerticalItem';
 export default NavVerticalItem;