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

package/core/NavList/__stories__/NavListEpathlaExample.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavListEpathlaExample = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = require("@digigov/ui/core/NavList");
+
+var _useNavList2 = require("@digigov/ui/hooks/useNavList");
+
+var _core = require("@digigov/ui/core");
+
+var LANG = 'el';
+var DEFAULT_HREF_FLAG = true;
+var epathlaLinks = [{
+  name: 'index',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG),
+  label: 'Αρχική'
+}, {
+  name: 'epathla',
+  label: 'Ε.Π.ΑΘΛ.Α',
+  subMenu: [{
+    name: 'epathla/aim',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/aim"),
+    label: 'Σκοπός'
+  }, {
+    name: 'epathla/structure',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/structure"),
+    label: 'Δομή'
+  }, {
+    name: 'epathla/members',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/members"),
+    label: 'Συγκρότηση'
+  }, {
+    name: 'epathla/wording-groups',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/working-groups"),
+    label: 'Ομάδες εργασίας'
+  }]
+}, {
+  name: 'sport-manipulation',
+  label: 'Χειραγώγηση Αγώνων',
+  subMenu: [{
+    name: 'sport-manipulation/macolin',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/macolin"),
+    label: 'Σύμβαση Macolin'
+  }, {
+    name: 'sport-manipulation/terminology',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/terminology"),
+    label: 'Ορολογία'
+  }, {
+    name: 'sport-manipulation/typology',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/typology"),
+    label: 'Τυπολογία'
+  }, {
+    name: 'sport-manipulation/law',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/law"),
+    label: 'Νομοθεσία'
+  }, {
+    name: 'sport-manipulation/documents',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/documents"),
+    label: 'Κείμενα αναφοράς διεθνών οργανισμών'
+  }]
+}, {
+  name: 'educational-material',
+  label: 'Εκπαιδευτικό υλικό',
+  subMenu: [{
+    name: 'educational-material/videos',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/educational-material/videos"),
+    label: 'Βίντεο'
+  }, {
+    name: 'educational-material/presentations',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/educational-material/presentations"),
+    label: 'Παρουσιάσεις'
+  }, {
+    name: 'educational-material/other-texts',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/educational-material/other-texts"),
+    label: 'Άλλα κείμενα'
+  }]
+}, {
+  name: 'news',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/news"),
+  label: 'Νέα'
+}, {
+  name: 'send-report',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/send-report"),
+  label: 'Προστάτεψε το άθλημά σου'
+}, {
+  name: 'links',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/links"),
+  label: 'Σύνδεσμοι'
+}, {
+  name: 'contact',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/contact"),
+  label: 'Επικοινωνία'
+}];
+
+var NavListEpathlaExample = function NavListEpathlaExample() {
+  var _useNavList = (0, _useNavList2.useNavList)(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return (0, _extends2["default"])({}, register(name));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavListAuto, {
+    layout: 'horizontal',
+    links: epathlaLinks,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, epathlaLinks.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: key
+    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
+      link: item,
+      setRegister: setRegister
+    }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, container(item.name), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
+      paddingLeft: 5,
+      paddingRight: 5
+    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, null, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, null, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (0, _NavList.isNavListItemLinkInterface)(subMenu) && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentListItem, {
+        key: menuIndex
+      }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
+        href: subMenu.href
+      }, subMenu.label));
+    }))))));
+  })));
+};
+
+exports.NavListEpathlaExample = NavListEpathlaExample;
+var _default = NavListEpathlaExample;
+exports["default"] = _default;

package/core/NavList/index.d.ts

@@ -1,21 +1,13 @@
-import NavList from '@digigov/ui/core/NavList/NavList';
-import { UseTogglableSectionsReturn } from '@digigov/ui/hooks/useTogglableSections';
-export interface UseNavListReturn extends UseTogglableSectionsReturn {
-    container: (key: string) => {
-        active: boolean;
-        id: string;
-    };
-}
-export declare const useNavList: () => UseNavListReturn;
-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';
@@ -25,4 +17,5 @@ export * from '@digigov/ui/core/NavList/NavMenuContainerContentListItem';
 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/core/NavList/index.js

@@ -1,147 +1,135 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  useNavList: true
-};
-exports.useNavList = exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _exportNames = {};
+exports["default"] = void 0;
 
-var _react = require("react");
-
-var _NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavList"));
+var _NavListItem = require("@digigov/ui/core/NavList/NavListItem");
 
-Object.keys(_NavList).forEach(function (key) {
+Object.keys(_NavListItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavList[key]) return;
+  if (key in exports && exports[key] === _NavListItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavList[key];
+      return _NavListItem[key];
     }
   });
 });
 
-var _useTogglableSections2 = require("@digigov/ui/hooks/useTogglableSections");
+var _NavListAuto = require("@digigov/ui/core/NavList/NavListAuto");
 
-var _NavListItem = require("@digigov/ui/core/NavList/NavListItem");
-
-Object.keys(_NavListItem).forEach(function (key) {
+Object.keys(_NavListAuto).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListItem[key]) return;
+  if (key in exports && exports[key] === _NavListAuto[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItem[key];
+      return _NavListAuto[key];
     }
   });
 });
 
-var _NavListSubMenu = require("@digigov/ui/core/NavList/NavListSubMenu");
+var _NavListItemAuto = require("@digigov/ui/core/NavList/NavListItemAuto");
 
-Object.keys(_NavListSubMenu).forEach(function (key) {
+Object.keys(_NavListItemAuto).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListSubMenu[key]) return;
+  if (key in exports && exports[key] === _NavListItemAuto[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListSubMenu[key];
+      return _NavListItemAuto[key];
     }
   });
 });
 
-var _NavListContext = require("@digigov/ui/core/NavList/NavListContext");
+var _NavListSubMenu = require("@digigov/ui/core/NavList/NavListSubMenu");
 
-Object.keys(_NavListContext).forEach(function (key) {
+Object.keys(_NavListSubMenu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListContext[key]) return;
+  if (key in exports && exports[key] === _NavListSubMenu[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListContext[key];
+      return _NavListSubMenu[key];
     }
   });
 });
 
-var _NavHorizontal = require("@digigov/ui/core/NavList/NavHorizontal");
+var _NavListContext = require("@digigov/ui/core/NavList/NavListContext");
 
-Object.keys(_NavHorizontal).forEach(function (key) {
+Object.keys(_NavListContext).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavHorizontal[key]) return;
+  if (key in exports && exports[key] === _NavListContext[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavHorizontal[key];
+      return _NavListContext[key];
     }
   });
 });
 
-var _NavHorizontalList = require("@digigov/ui/core/NavList/NavHorizontalList");
+var _Nav = require("@digigov/ui/core/NavList/Nav");
 
-Object.keys(_NavHorizontalList).forEach(function (key) {
+Object.keys(_Nav).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavHorizontalList[key]) return;
+  if (key in exports && exports[key] === _Nav[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavHorizontalList[key];
+      return _Nav[key];
     }
   });
 });
 
-var _NavHorizontalListItem = require("@digigov/ui/core/NavList/NavHorizontalListItem");
+var _NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavList"));
 
-Object.keys(_NavHorizontalListItem).forEach(function (key) {
+Object.keys(_NavList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavHorizontalListItem[key]) return;
+  if (key in exports && exports[key] === _NavList[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavHorizontalListItem[key];
+      return _NavList[key];
     }
   });
 });
 
-var _NavHorizontalListItemLink = require("@digigov/ui/core/NavList/NavHorizontalListItemLink");
+var _NavListItemLink = require("@digigov/ui/core/NavList/NavListItemLink");
 
-Object.keys(_NavHorizontalListItemLink).forEach(function (key) {
+Object.keys(_NavListItemLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavHorizontalListItemLink[key]) return;
+  if (key in exports && exports[key] === _NavListItemLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavHorizontalListItemLink[key];
+      return _NavListItemLink[key];
     }
   });
 });
 
-var _NavHorizontalListItemButton = require("@digigov/ui/core/NavList/NavHorizontalListItemButton");
+var _NavListItemButton = require("@digigov/ui/core/NavList/NavListItemButton");
 
-Object.keys(_NavHorizontalListItemButton).forEach(function (key) {
+Object.keys(_NavListItemButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavHorizontalListItemButton[key]) return;
+  if (key in exports && exports[key] === _NavListItemButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavHorizontalListItemButton[key];
+      return _NavListItemButton[key];
     }
   });
 });
@@ -271,44 +259,10 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-var _excluded = ["register", "opened"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useNavList = function useNavList() {
-  var registeredContainers = (0, _react.useRef)({});
-
-  var _useTogglableSections = (0, _useTogglableSections2.useTogglableSections)({
-    singleOpen: true,
-    reOpen: true,
-    toggleProperty: 'active',
-    onToggleProperty: 'onClick',
-    ariaNavigation: true
-  }),
-      registerListItem = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = (0, _objectWithoutProperties2["default"])(_useTogglableSections, _excluded);
-
-  var registerNavMenu = (0, _react.useCallback)(function (key) {
-    return {
-      ref: function ref(el) {
-        if (el && !registeredContainers.current[el.id]) {
-          registeredContainers.current[el.id] = el;
-        }
-      },
-      active: opened[key],
-      id: key
-    };
-  }, [opened]);
-  return (0, _extends2["default"])({
-    register: registerListItem,
-    opened: opened,
-    container: registerNavMenu
-  }, rest);
-};
-
-exports.useNavList = useNavList;
 var _default = _NavList["default"];
 exports["default"] = _default;

package/core/NavList/types.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
-export interface NavListProps {
+export declare type NavListLayout = 'horizontal' | 'vertical';
+export interface NavListAutoProps {
     children?: React.ReactNode;
     className?: string;
-    horizontal?: boolean;
+    layout?: NavListLayout;
     role?: string;
     openSubMenus?: boolean;
     floating?: boolean;
@@ -15,6 +16,7 @@ export interface NavListProps {
 interface NavListItemInterface {
     name: string;
     label?: string;
+    title?: string;
     children?: React.ReactNode;
 }
 interface NavListItemLinkInterface extends NavListItemInterface {
@@ -33,9 +35,12 @@ export interface NavListItemSubMenuInterface extends NavListItemInterface {
 }
 export declare const isNavListItemLinkInterface: (item: any) => item is NavListItemLinkInterface;
 export declare const isNavListItemSubMenuInterface: (item: any) => item is NavListItemSubMenuInterface;
-export interface NavHorizontalListItemProps {
+export interface NavListItemProps {
     children?: React.ReactNode;
+    role?: string;
     link?: NavListItemType;
+    layout?: NavListLayout;
+    active?: boolean;
     setRegister?: (name: string) => any;
 }
 export {};