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

package/src/core/NavList/__stories__/NavListEpathlaExample.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  NavListAuto,
+  NavListItem,
+  NavMenu,
+  NavMenuContainer,
+  NavMenuContainerContent,
+  NavMenuContainerContentList,
+  NavMenuContainerContentListItem,
+  NavMenuContainerTitle,
+  isNavListItemLinkInterface,
+} from '@digigov/ui/core/NavList';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
+import { Link } from '@digigov/ui/core';
+
+const LANG = 'el';
+const DEFAULT_HREF_FLAG = true;
+
+const epathlaLinks = [
+  {
+    name: 'index',
+    href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}`,
+    label: 'Αρχική',
+  },
+  {
+    name: 'epathla',
+    label: 'Ε.Π.ΑΘΛ.Α',
+    subMenu: [
+      {
+        name: 'epathla/aim',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/epathla/aim`,
+        label: 'Σκοπός',
+      },
+      {
+        name: 'epathla/structure',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/epathla/structure`,
+        label: 'Δομή',
+      },
+      {
+        name: 'epathla/members',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/epathla/members`,
+        label: 'Συγκρότηση',
+      },
+      {
+        name: 'epathla/wording-groups',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/epathla/working-groups`,
+        label: 'Ομάδες εργασίας',
+      },
+    ],
+  },
+  {
+    name: 'sport-manipulation',
+    label: 'Χειραγώγηση Αγώνων',
+    subMenu: [
+      {
+        name: 'sport-manipulation/macolin',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/sport-manipulation/macolin`,
+        label: 'Σύμβαση Macolin',
+      },
+      {
+        name: 'sport-manipulation/terminology',
+        href: DEFAULT_HREF_FLAG
+          ? '#'
+          : `/${LANG}/sport-manipulation/terminology`,
+        label: 'Ορολογία',
+      },
+      {
+        name: 'sport-manipulation/typology',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/sport-manipulation/typology`,
+        label: 'Τυπολογία',
+      },
+      {
+        name: 'sport-manipulation/law',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/sport-manipulation/law`,
+        label: 'Νομοθεσία',
+      },
+      {
+        name: 'sport-manipulation/documents',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/sport-manipulation/documents`,
+        label: 'Κείμενα αναφοράς διεθνών οργανισμών',
+      },
+    ],
+  },
+  {
+    name: 'educational-material',
+    label: 'Εκπαιδευτικό υλικό',
+    subMenu: [
+      {
+        name: 'educational-material/videos',
+        href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/educational-material/videos`,
+        label: 'Βίντεο',
+      },
+      {
+        name: 'educational-material/presentations',
+        href: DEFAULT_HREF_FLAG
+          ? '#'
+          : `/${LANG}/educational-material/presentations`,
+        label: 'Παρουσιάσεις',
+      },
+      {
+        name: 'educational-material/other-texts',
+        href: DEFAULT_HREF_FLAG
+          ? '#'
+          : `/${LANG}/educational-material/other-texts`,
+        label: 'Άλλα κείμενα',
+      },
+    ],
+  },
+  {
+    name: 'news',
+    href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/news`,
+    label: 'Νέα',
+  },
+  {
+    name: 'send-report',
+    href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/send-report`,
+    label: 'Προστάτεψε το άθλημά σου',
+  },
+  {
+    name: 'links',
+    href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/links`,
+    label: 'Σύνδεσμοι',
+  },
+  {
+    name: 'contact',
+    href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/contact`,
+    label: 'Επικοινωνία',
+  },
+];
+
+export const NavListEpathlaExample = () => {
+  const { container, register } = useNavList();
+
+  const setRegister = (name: string) => {
+    return { ...register(name) };
+  };
+
+  return (
+    <>
+      <NavListAuto
+        layout={'horizontal'}
+        links={epathlaLinks}
+        aria-label="Nav list"
+        role="menu"
+      >
+        {epathlaLinks.map((item, key) => (
+          <React.Fragment key={key}>
+            <NavListItem link={item} setRegister={setRegister} />
+            <NavMenu {...container(item.name)}>
+              <NavMenuContainer paddingLeft={5} paddingRight={5}>
+                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
+                <NavMenuContainerContent>
+                  <NavMenuContainerContentList>
+                    {item.subMenu?.map((subMenu, menuIndex) => {
+                      return (
+                        isNavListItemLinkInterface(subMenu) && (
+                          <NavMenuContainerContentListItem key={menuIndex}>
+                            <Link href={subMenu.href}>{subMenu.label}</Link>
+                          </NavMenuContainerContentListItem>
+                        )
+                      );
+                    })}
+                  </NavMenuContainerContentList>
+                </NavMenuContainerContent>
+              </NavMenuContainer>
+            </NavMenu>
+          </React.Fragment>
+        ))}
+      </NavListAuto>
+    </>
+  );
+};
+
+export default NavListEpathlaExample;

package/src/core/NavList/index.tsx

@@ -1,54 +1,13 @@
-import { useCallback, useRef } from 'react';
-import NavList from '@digigov/ui/core/NavList/NavList';
-import {
-  useTogglableSections,
-  UseTogglableSectionsReturn,
-} from '@digigov/ui/hooks/useTogglableSections';
-
-export interface UseNavListReturn extends UseTogglableSectionsReturn {
-  container: (key: string) => { active: boolean; id: string };
-}
-export const useNavList = (): UseNavListReturn => {
-  const registeredContainers = useRef({});
-
-  const { register: registerListItem, opened, ...rest } = useTogglableSections({
-    singleOpen: true,
-    reOpen: true,
-    toggleProperty: 'active',
-    onToggleProperty: 'onClick',
-    ariaNavigation: true,
-  });
-  const registerNavMenu = useCallback(
-    (key: string) => {
-      return {
-        ref: (el) => {
-          if (el && !registeredContainers.current[el.id]) {
-            registeredContainers.current[el.id] = el;
-          }
-        },
-        active: opened[key],
-        id: key,
-      };
-    },
-    [opened]
-  );
-  return {
-    register: registerListItem,
-    opened,
-    container: registerNavMenu,
-    ...rest,
-  };
-};
-
-export * from '@digigov/ui/core/NavList/NavList';
 export * from '@digigov/ui/core/NavList/NavListItem';
+export * from '@digigov/ui/core/NavList/NavListAuto';
+export * from '@digigov/ui/core/NavList/NavListItemAuto';
 export * from '@digigov/ui/core/NavList/NavListSubMenu';
 export * from '@digigov/ui/core/NavList/NavListContext';
-export * from '@digigov/ui/core/NavList/NavHorizontal';
-export * from '@digigov/ui/core/NavList/NavHorizontalList';
-export * from '@digigov/ui/core/NavList/NavHorizontalListItem';
-export * from '@digigov/ui/core/NavList/NavHorizontalListItemLink';
-export * from '@digigov/ui/core/NavList/NavHorizontalListItemButton';
+export * from '@digigov/ui/core/NavList/Nav';
+export * from '@digigov/ui/core/NavList/NavList';
+export * from '@digigov/ui/core/NavList/NavListItem';
+export * from '@digigov/ui/core/NavList/NavListItemLink';
+export * from '@digigov/ui/core/NavList/NavListItemButton';
 export * from '@digigov/ui/core/NavList/NavMenu';
 export * from '@digigov/ui/core/NavList/NavMenuContainer';
 export * from '@digigov/ui/core/NavList/NavMenuContainerTitle';
@@ -59,4 +18,5 @@ export * from '@digigov/ui/core/NavList/NavVertical';
 export * from '@digigov/ui/core/NavList/NavVerticalItem';
 export * from '@digigov/ui/core/NavList/types';
 
+import NavList from '@digigov/ui/core/NavList/NavList';
 export default NavList;

package/src/core/NavList/types.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 
-export interface NavListProps {
+export type NavListLayout = 'horizontal' | 'vertical';
+
+export interface NavListAutoProps {
   children?: React.ReactNode;
   className?: string;
-  horizontal?: boolean;
+  layout?: NavListLayout;
   role?: string;
   openSubMenus?: boolean;
   floating?: boolean;
@@ -17,6 +19,7 @@ export interface NavListProps {
 interface NavListItemInterface {
   name: string;
   label?: string;
+  title?: string;
   children?: React.ReactNode;
 }
 
@@ -49,11 +52,14 @@ export const isNavListItemLinkInterface = (
 export const isNavListItemSubMenuInterface = (
   item: any
 ): item is NavListItemSubMenuInterface => {
-    return item && 'subMenu' in item;
+  return item && 'subMenu' in item;
 };
 
-export interface NavHorizontalListItemProps {
+export interface NavListItemProps {
   children?: React.ReactNode;
+  role?: string;
   link?: NavListItemType;
+  layout?: NavListLayout;
+  active?: boolean;
   setRegister?: (name: string) => any;
 }