{"ast":null,"code":"import _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/MenuDemo.js\";\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Menubar } from 'primereact/menubar';\nimport { InputText } from 'primereact/inputtext';\nimport { BreadCrumb } from 'primereact/breadcrumb';\nimport { Steps } from 'primereact/steps';\nimport { TabMenu } from 'primereact/tabmenu';\nimport { TieredMenu } from 'primereact/tieredmenu';\nimport { Menu } from 'primereact/menu';\nimport { Button } from 'primereact/button';\nimport { ContextMenu } from 'primereact/contextmenu';\nimport { MegaMenu } from 'primereact/megamenu';\nimport { PanelMenu } from 'primereact/panelmenu';\nimport { Route, useHistory, useLocation } from 'react-router-dom';\nimport { PersonalDemo } from '../components/menu/PersonalDemo';\nimport { ConfirmationDemo } from '../components/menu/ConfirmationDemo';\nimport { PaymentDemo } from '../components/menu/PaymentDemo';\nimport { SeatDemo } from '../components/menu/SeatDemo';\n\nvar MenuDemo = function MenuDemo() {\n var _useState = useState(0),\n _useState2 = _slicedToArray(_useState, 2),\n activeIndex = _useState2[0],\n setActiveIndex = _useState2[1];\n\n var menu = useRef(null);\n var contextMenu = useRef(null);\n var history = useHistory();\n var location = useLocation();\n var checkActiveIndex = useCallback(function () {\n var paths = location.pathname.split('/');\n var currentPath = paths[paths.length - 1];\n\n switch (currentPath) {\n case 'seat':\n setActiveIndex(1);\n break;\n\n case 'payment':\n setActiveIndex(2);\n break;\n\n case 'confirmation':\n setActiveIndex(3);\n break;\n\n default:\n break;\n }\n }, [location]);\n useEffect(function () {\n checkActiveIndex();\n }, [checkActiveIndex]);\n var nestedMenuitems = [{\n label: 'Customers',\n icon: 'pi pi-fw pi-table',\n items: [{\n label: 'New',\n icon: 'pi pi-fw pi-user-plus',\n items: [{\n label: 'Customer',\n icon: 'pi pi-fw pi-plus'\n }, {\n label: 'Duplicate',\n icon: 'pi pi-fw pi-copy'\n }]\n }, {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }]\n }, {\n label: 'Orders',\n icon: 'pi pi-fw pi-shopping-cart',\n items: [{\n label: 'View',\n icon: 'pi pi-fw pi-list'\n }, {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n }]\n }, {\n label: 'Shipments',\n icon: 'pi pi-fw pi-envelope',\n items: [{\n label: 'Tracker',\n icon: 'pi pi-fw pi-compass'\n }, {\n label: 'Map',\n icon: 'pi pi-fw pi-map-marker'\n }, {\n label: 'Manage',\n icon: 'pi pi-fw pi-pencil'\n }]\n }, {\n label: 'Profile',\n icon: 'pi pi-fw pi-user',\n items: [{\n label: 'Settings',\n icon: 'pi pi-fw pi-cog'\n }, {\n label: 'Billing',\n icon: 'pi pi-fw pi-file'\n }]\n }, {\n label: 'Quit',\n icon: 'pi pi-fw pi-sign-out'\n }];\n var breadcrumbHome = {\n icon: 'pi pi-home',\n to: '/'\n };\n var breadcrumbItems = [{\n label: 'Computer'\n }, {\n label: 'Notebook'\n }, {\n label: 'Accessories'\n }, {\n label: 'Backpacks'\n }, {\n label: 'Item'\n }];\n var wizardItems = [{\n label: 'Personal',\n command: function command() {\n return history.push('/menu');\n }\n }, {\n label: 'Seat',\n command: function command() {\n return history.push('/menu/seat');\n }\n }, {\n label: 'Payment',\n command: function command() {\n return history.push('/menu/payment');\n }\n }, {\n label: 'Confirmation',\n command: function command() {\n return history.push('/menu/confirmation');\n }\n }];\n var tieredMenuItems = [{\n label: 'Customers',\n icon: 'pi pi-fw pi-table',\n items: [{\n label: 'New',\n icon: 'pi pi-fw pi-user-plus',\n items: [{\n label: 'Customer',\n icon: 'pi pi-fw pi-plus'\n }, {\n label: 'Duplicate',\n icon: 'pi pi-fw pi-copy'\n }]\n }, {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }]\n }, {\n label: 'Orders',\n icon: 'pi pi-fw pi-shopping-cart',\n items: [{\n label: 'View',\n icon: 'pi pi-fw pi-list'\n }, {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n }]\n }, {\n label: 'Shipments',\n icon: 'pi pi-fw pi-envelope',\n items: [{\n label: 'Tracker',\n icon: 'pi pi-fw pi-compass'\n }, {\n label: 'Map',\n icon: 'pi pi-fw pi-map-marker'\n }, {\n label: 'Manage',\n icon: 'pi pi-fw pi-pencil'\n }]\n }, {\n label: 'Profile',\n icon: 'pi pi-fw pi-user',\n items: [{\n label: 'Settings',\n icon: 'pi pi-fw pi-cog'\n }, {\n label: 'Billing',\n icon: 'pi pi-fw pi-file'\n }]\n }, {\n separator: true\n }, {\n label: 'Quit',\n icon: 'pi pi-fw pi-sign-out'\n }];\n var overlayMenuItems = [{\n label: 'Save',\n icon: 'pi pi-save'\n }, {\n label: 'Update',\n icon: 'pi pi-refresh'\n }, {\n label: 'Delete',\n icon: 'pi pi-trash'\n }, {\n separator: true\n }, {\n label: 'Home',\n icon: 'pi pi-home'\n }];\n var menuitems = [{\n label: 'Customers',\n items: [{\n label: 'New',\n icon: 'pi pi-fw pi-plus'\n }, {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }]\n }, {\n label: 'Orders',\n items: [{\n label: 'View',\n icon: 'pi pi-fw pi-list'\n }, {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n }]\n }];\n var contextMenuItems = [{\n label: 'Save',\n icon: 'pi pi-save'\n }, {\n label: 'Update',\n icon: 'pi pi-refresh'\n }, {\n label: 'Delete',\n icon: 'pi pi-trash'\n }, {\n separator: true\n }, {\n label: 'Options',\n icon: 'pi pi-cog'\n }];\n var megamenuItems = [{\n label: 'Fashion',\n icon: 'pi pi-fw pi-tag',\n items: [[{\n label: 'Woman',\n items: [{\n label: 'Woman Item'\n }, {\n label: 'Woman Item'\n }, {\n label: 'Woman Item'\n }]\n }, {\n label: 'Men',\n items: [{\n label: 'Men Item'\n }, {\n label: 'Men Item'\n }, {\n label: 'Men Item'\n }]\n }], [{\n label: 'Kids',\n items: [{\n label: 'Kids Item'\n }, {\n label: 'Kids Item'\n }]\n }, {\n label: 'Luggage',\n items: [{\n label: 'Luggage Item'\n }, {\n label: 'Luggage Item'\n }, {\n label: 'Luggage Item'\n }]\n }]]\n }, {\n label: 'Electronics',\n icon: 'pi pi-fw pi-desktop',\n items: [[{\n label: 'Computer',\n items: [{\n label: 'Computer Item'\n }, {\n label: 'Computer Item'\n }]\n }, {\n label: 'Camcorder',\n items: [{\n label: 'Camcorder Item'\n }, {\n label: 'Camcorder Item'\n }, {\n label: 'Camcorder Item'\n }]\n }], [{\n label: 'TV',\n items: [{\n label: 'TV Item'\n }, {\n label: 'TV Item'\n }]\n }, {\n label: 'Audio',\n items: [{\n label: 'Audio Item'\n }, {\n label: 'Audio Item'\n }, {\n label: 'Audio Item'\n }]\n }], [{\n label: 'Sports.7',\n items: [{\n label: 'Sports.7.1'\n }, {\n label: 'Sports.7.2'\n }]\n }]]\n }, {\n label: 'Furniture',\n icon: 'pi pi-fw pi-image',\n items: [[{\n label: 'Living Room',\n items: [{\n label: 'Living Room Item'\n }, {\n label: 'Living Room Item'\n }]\n }, {\n label: 'Kitchen',\n items: [{\n label: 'Kitchen Item'\n }, {\n label: 'Kitchen Item'\n }, {\n label: 'Kitchen Item'\n }]\n }], [{\n label: 'Bedroom',\n items: [{\n label: 'Bedroom Item'\n }, {\n label: 'Bedroom Item'\n }]\n }, {\n label: 'Outdoor',\n items: [{\n label: 'Outdoor Item'\n }, {\n label: 'Outdoor Item'\n }, {\n label: 'Outdoor Item'\n }]\n }]]\n }, {\n label: 'Sports',\n icon: 'pi pi-fw pi-star',\n items: [[{\n label: 'Basketball',\n items: [{\n label: 'Basketball Item'\n }, {\n label: 'Basketball Item'\n }]\n }, {\n label: 'Football',\n items: [{\n label: 'Football Item'\n }, {\n label: 'Football Item'\n }, {\n label: 'Football Item'\n }]\n }], [{\n label: 'Tennis',\n items: [{\n label: 'Tennis Item'\n }, {\n label: 'Tennis Item'\n }]\n }]]\n }];\n var panelMenuitems = [{\n label: 'Customers',\n icon: 'pi pi-fw pi-table',\n items: [{\n label: 'New',\n icon: 'pi pi-fw pi-user-plus',\n items: [{\n label: 'Customer',\n icon: 'pi pi-fw pi-plus'\n }, {\n label: 'Duplicate',\n icon: 'pi pi-fw pi-copy'\n }]\n }, {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }]\n }, {\n label: 'Orders',\n icon: 'pi pi-fw pi-shopping-cart',\n items: [{\n label: 'View',\n icon: 'pi pi-fw pi-list'\n }, {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n }]\n }, {\n label: 'Shipments',\n icon: 'pi pi-fw pi-envelope',\n items: [{\n label: 'Tracker',\n icon: 'pi pi-fw pi-compass'\n }, {\n label: 'Map',\n icon: 'pi pi-fw pi-map-marker'\n }, {\n label: 'Manage',\n icon: 'pi pi-fw pi-pencil'\n }]\n }, {\n label: 'Profile',\n icon: 'pi pi-fw pi-user',\n items: [{\n label: 'Settings',\n icon: 'pi pi-fw pi-cog'\n }, {\n label: 'Billing',\n icon: 'pi pi-fw pi-file'\n }]\n }];\n\n var toggleMenu = function toggleMenu(event) {\n menu.current.toggle(event);\n };\n\n var onContextRightClick = function onContextRightClick(event) {\n contextMenu.current.show(event);\n };\n\n var menubarEndTemplate = function menubarEndTemplate() {\n return /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-input-icon-left\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 493,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 494,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n placeholder: \"Search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 495,\n columnNumber: 17\n }\n }));\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid p-fluid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 501,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 502,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card card-w-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 503,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 504,\n columnNumber: 21\n }\n }, \"Menubar\"), /*#__PURE__*/React.createElement(Menubar, {\n model: nestedMenuitems,\n end: menubarEndTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 505,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 509,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card card-w-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 510,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 511,\n columnNumber: 21\n }\n }, \"Breadcrumb\"), /*#__PURE__*/React.createElement(BreadCrumb, {\n home: breadcrumbHome,\n model: breadcrumbItems,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 512,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 516,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card card-w-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 517,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 518,\n columnNumber: 21\n }\n }, \"Steps\"), /*#__PURE__*/React.createElement(Steps, {\n model: wizardItems,\n activeIndex: activeIndex,\n onSelect: function onSelect(e) {\n return setActiveIndex(e.index);\n },\n readOnly: false,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 519,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n exact: true,\n path: '/menu',\n component: PersonalDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 520,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: '/menu/confirmation',\n component: ConfirmationDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 521,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: '/menu/payment',\n component: PaymentDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 522,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: '/menu/seat',\n component: SeatDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 523,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 527,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card card-w-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 528,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 529,\n columnNumber: 21\n }\n }, \"TabMenu\"), /*#__PURE__*/React.createElement(TabMenu, {\n model: wizardItems,\n activeIndex: activeIndex,\n onTabChange: function onTabChange(e) {\n return setActiveIndex(e.index);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 530,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n exact: true,\n path: '/menu',\n component: PersonalDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 531,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: '/menu/confirmation',\n component: ConfirmationDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 532,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: '/menu/payment',\n component: PaymentDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 533,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: '/menu/seat',\n component: SeatDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 534,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 538,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 539,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 540,\n columnNumber: 21\n }\n }, \"Tiered Menu\"), /*#__PURE__*/React.createElement(TieredMenu, {\n model: tieredMenuItems,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 541,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 545,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 546,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 547,\n columnNumber: 21\n }\n }, \"Plain Menu\"), /*#__PURE__*/React.createElement(Menu, {\n model: menuitems,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 548,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 552,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 553,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 554,\n columnNumber: 21\n }\n }, \"Overlay Menu\"), /*#__PURE__*/React.createElement(Menu, {\n ref: menu,\n model: overlayMenuItems,\n popup: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 556,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n label: \"Options\",\n icon: \"pi pi-angle-down\",\n onClick: toggleMenu,\n style: {\n width: 'auto'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 557,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n onContextMenu: onContextRightClick,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 560,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 561,\n columnNumber: 21\n }\n }, \"ContextMenu\"), \"Right click to display.\", /*#__PURE__*/React.createElement(ContextMenu, {\n ref: contextMenu,\n model: contextMenuItems,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 563,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 567,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 568,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 569,\n columnNumber: 21\n }\n }, \"MegaMenu - Horizontal\"), /*#__PURE__*/React.createElement(MegaMenu, {\n model: megamenuItems,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 570,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n style: {\n marginTop: '1.55em'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 572,\n columnNumber: 21\n }\n }, \"MegaMenu - Vertical\"), /*#__PURE__*/React.createElement(MegaMenu, {\n model: megamenuItems,\n orientation: \"vertical\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 573,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 577,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 578,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 579,\n columnNumber: 21\n }\n }, \"PanelMenu\"), /*#__PURE__*/React.createElement(PanelMenu, {\n model: panelMenuitems,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 580,\n columnNumber: 21\n }\n }))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(MenuDemo, comparisonFn);","map":{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Menubar","InputText","BreadCrumb","Steps","TabMenu","TieredMenu","Menu","Button","ContextMenu","MegaMenu","PanelMenu","Route","useHistory","useLocation","PersonalDemo","ConfirmationDemo","PaymentDemo","SeatDemo","MenuDemo","activeIndex","setActiveIndex","menu","contextMenu","history","location","checkActiveIndex","paths","pathname","split","currentPath","length","nestedMenuitems","label","icon","items","breadcrumbHome","to","breadcrumbItems","wizardItems","command","push","tieredMenuItems","separator","overlayMenuItems","menuitems","contextMenuItems","megamenuItems","panelMenuitems","toggleMenu","event","current","toggle","onContextRightClick","show","menubarEndTemplate","e","index","width","marginTop","comparisonFn","prevProps","nextProps","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/MenuDemo.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Menubar } from 'primereact/menubar';\nimport { InputText } from 'primereact/inputtext';\nimport { BreadCrumb } from 'primereact/breadcrumb';\nimport { Steps } from 'primereact/steps';\nimport { TabMenu } from 'primereact/tabmenu';\nimport { TieredMenu } from 'primereact/tieredmenu';\nimport { Menu } from 'primereact/menu';\nimport { Button } from 'primereact/button';\nimport { ContextMenu } from 'primereact/contextmenu';\nimport { MegaMenu } from 'primereact/megamenu';\nimport { PanelMenu } from 'primereact/panelmenu';\nimport { Route, useHistory, useLocation } from 'react-router-dom';\nimport { PersonalDemo } from '../components/menu/PersonalDemo';\nimport { ConfirmationDemo } from '../components/menu/ConfirmationDemo';\nimport { PaymentDemo } from '../components/menu/PaymentDemo';\nimport { SeatDemo } from '../components/menu/SeatDemo';\n\nconst MenuDemo = () => {\n const [activeIndex, setActiveIndex] = useState(0);\n\n const menu = useRef(null);\n const contextMenu = useRef(null);\n const history = useHistory();\n const location = useLocation();\n\n const checkActiveIndex = useCallback(() => {\n const paths = location.pathname.split('/');\n const currentPath = paths[paths.length - 1];\n\n switch (currentPath) {\n case 'seat':\n setActiveIndex(1);\n break;\n case 'payment':\n setActiveIndex(2);\n break;\n case 'confirmation':\n setActiveIndex(3);\n break;\n default:\n break;\n }\n },[location])\n\n useEffect(() => {\n checkActiveIndex();\n }, [checkActiveIndex])\n\n const nestedMenuitems = [\n {\n label: 'Customers',\n icon: 'pi pi-fw pi-table',\n items: [\n {\n label: 'New',\n icon: 'pi pi-fw pi-user-plus',\n items: [\n {\n label: 'Customer',\n icon: 'pi pi-fw pi-plus'\n },\n {\n label: 'Duplicate',\n icon: 'pi pi-fw pi-copy'\n },\n\n ]\n },\n {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }\n ]\n },\n {\n label: 'Orders',\n icon: 'pi pi-fw pi-shopping-cart',\n items: [\n {\n label: 'View',\n icon: 'pi pi-fw pi-list'\n },\n {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n },\n\n ]\n },\n {\n label: 'Shipments',\n icon: 'pi pi-fw pi-envelope',\n items: [\n {\n label: 'Tracker',\n icon: 'pi pi-fw pi-compass'\n\n },\n {\n label: 'Map',\n icon: 'pi pi-fw pi-map-marker'\n\n },\n {\n label: 'Manage',\n icon: 'pi pi-fw pi-pencil'\n }\n ]\n },\n {\n label: 'Profile',\n icon: 'pi pi-fw pi-user',\n items: [\n {\n label: 'Settings',\n icon: 'pi pi-fw pi-cog'\n },\n {\n label: 'Billing',\n icon: 'pi pi-fw pi-file'\n }\n ]\n },\n {\n label: 'Quit',\n icon: 'pi pi-fw pi-sign-out'\n }\n ];\n\n const breadcrumbHome = { icon: 'pi pi-home', to: '/' };\n const breadcrumbItems = [\n { label: 'Computer' },\n { label: 'Notebook' },\n { label: 'Accessories' },\n { label: 'Backpacks' },\n { label: 'Item' }\n ];\n\n const wizardItems = [\n { label: 'Personal', command: () => history.push('/menu') },\n { label: 'Seat', command: () => history.push('/menu/seat') },\n { label: 'Payment', command: () => history.push('/menu/payment') },\n { label: 'Confirmation', command: () => history.push('/menu/confirmation') }\n ];\n\n const tieredMenuItems = [\n {\n label: 'Customers',\n icon: 'pi pi-fw pi-table',\n items: [\n {\n label: 'New',\n icon: 'pi pi-fw pi-user-plus',\n items: [\n {\n label: 'Customer',\n icon: 'pi pi-fw pi-plus'\n },\n {\n label: 'Duplicate',\n icon: 'pi pi-fw pi-copy'\n }\n ]\n },\n {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }\n ]\n },\n {\n label: 'Orders',\n icon: 'pi pi-fw pi-shopping-cart',\n items: [\n {\n label: 'View',\n icon: 'pi pi-fw pi-list'\n },\n {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n }\n ]\n },\n {\n label: 'Shipments',\n icon: 'pi pi-fw pi-envelope',\n items: [\n {\n label: 'Tracker',\n icon: 'pi pi-fw pi-compass'\n\n },\n {\n label: 'Map',\n icon: 'pi pi-fw pi-map-marker'\n\n },\n {\n label: 'Manage',\n icon: 'pi pi-fw pi-pencil'\n }\n ]\n },\n {\n label: 'Profile',\n icon: 'pi pi-fw pi-user',\n items: [\n {\n label: 'Settings',\n icon: 'pi pi-fw pi-cog'\n },\n {\n label: 'Billing',\n icon: 'pi pi-fw pi-file'\n }\n ]\n },\n {\n separator: true\n },\n {\n label: 'Quit',\n icon: 'pi pi-fw pi-sign-out'\n }\n ];\n\n const overlayMenuItems = [\n {\n label: 'Save',\n icon: 'pi pi-save'\n },\n {\n label: 'Update',\n icon: 'pi pi-refresh'\n },\n {\n label: 'Delete',\n icon: 'pi pi-trash'\n },\n {\n separator: true\n },\n {\n label: 'Home',\n icon: 'pi pi-home'\n }\n ];\n\n const menuitems = [\n {\n label: 'Customers',\n items: [\n {\n label: 'New',\n icon: 'pi pi-fw pi-plus',\n },\n {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }\n ]\n },\n {\n label: 'Orders',\n items: [\n {\n label: 'View',\n icon: 'pi pi-fw pi-list'\n },\n {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n }\n ]\n }\n ];\n\n const contextMenuItems = [\n {\n label: 'Save',\n icon: 'pi pi-save'\n },\n {\n label: 'Update',\n icon: 'pi pi-refresh'\n },\n {\n label: 'Delete',\n icon: 'pi pi-trash'\n },\n {\n separator: true\n },\n {\n label: 'Options',\n icon: 'pi pi-cog'\n }\n ];\n\n const megamenuItems = [\n {\n label: 'Fashion', icon: 'pi pi-fw pi-tag',\n items: [\n [\n {\n label: 'Woman',\n items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }]\n },\n {\n label: 'Men',\n items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]\n }\n ],\n [\n {\n label: 'Kids',\n items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]\n },\n {\n label: 'Luggage',\n items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]\n }\n ]\n ]\n },\n {\n label: 'Electronics', icon: 'pi pi-fw pi-desktop',\n items: [\n [\n {\n label: 'Computer',\n items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]\n },\n {\n label: 'Camcorder',\n items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' },]\n },\n ],\n [\n {\n label: 'TV',\n items: [{ label: 'TV Item' }, { label: 'TV Item' }]\n },\n {\n label: 'Audio',\n items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]\n }\n ],\n [\n {\n label: 'Sports.7',\n items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]\n }\n ]\n ]\n },\n {\n label: 'Furniture', icon: 'pi pi-fw pi-image',\n items: [\n [\n {\n label: 'Living Room',\n items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' },]\n },\n {\n label: 'Kitchen',\n items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]\n }\n ],\n [\n {\n label: 'Bedroom',\n items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]\n },\n {\n label: 'Outdoor',\n items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]\n }\n ]\n ]\n },\n {\n label: 'Sports', icon: 'pi pi-fw pi-star',\n items: [\n [\n {\n label: 'Basketball',\n items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]\n },\n {\n label: 'Football',\n items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]\n }\n ],\n [\n {\n label: 'Tennis',\n items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]\n }\n ]\n ]\n }\n ];\n\n const panelMenuitems = [\n {\n label: 'Customers',\n icon: 'pi pi-fw pi-table',\n items: [\n {\n label: 'New',\n icon: 'pi pi-fw pi-user-plus',\n items: [\n {\n label: 'Customer',\n icon: 'pi pi-fw pi-plus'\n },\n {\n label: 'Duplicate',\n icon: 'pi pi-fw pi-copy'\n },\n\n ]\n },\n {\n label: 'Edit',\n icon: 'pi pi-fw pi-user-edit'\n }\n ]\n },\n {\n label: 'Orders',\n icon: 'pi pi-fw pi-shopping-cart',\n items: [\n {\n label: 'View',\n icon: 'pi pi-fw pi-list'\n },\n {\n label: 'Search',\n icon: 'pi pi-fw pi-search'\n }\n ]\n },\n {\n label: 'Shipments',\n icon: 'pi pi-fw pi-envelope',\n items: [\n {\n label: 'Tracker',\n icon: 'pi pi-fw pi-compass'\n\n },\n {\n label: 'Map',\n icon: 'pi pi-fw pi-map-marker'\n\n },\n {\n label: 'Manage',\n icon: 'pi pi-fw pi-pencil'\n }\n ]\n },\n {\n label: 'Profile',\n icon: 'pi pi-fw pi-user',\n items: [\n {\n label: 'Settings',\n icon: 'pi pi-fw pi-cog'\n },\n {\n label: 'Billing',\n icon: 'pi pi-fw pi-file'\n }\n ]\n }\n ];\n\n const toggleMenu = (event) => {\n menu.current.toggle(event);\n };\n\n const onContextRightClick = (event) => {\n contextMenu.current.show(event);\n };\n\n const menubarEndTemplate = () => {\n return (\n \n \n