{"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/App.js\";\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Route, useLocation } from 'react-router-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport { AppTopbar } from './AppTopbar';\nimport { AppFooter } from './AppFooter';\nimport { AppMenu } from './AppMenu';\nimport { AppConfig } from './AppConfig';\nimport Dashboard from './components/Dashboard';\nimport ButtonDemo from './components/ButtonDemo';\nimport ChartDemo from './components/ChartDemo';\nimport Documentation from './components/Documentation';\nimport FileDemo from './components/FileDemo';\nimport FloatLabelDemo from './components/FloatLabelDemo';\nimport FormLayoutDemo from './components/FormLayoutDemo';\nimport InputDemo from './components/InputDemo';\nimport ListDemo from './components/ListDemo';\nimport MenuDemo from './components/MenuDemo';\nimport MessagesDemo from './components/MessagesDemo';\nimport MiscDemo from './components/MiscDemo';\nimport OverlayDemo from './components/OverlayDemo';\nimport MediaDemo from './components/MediaDemo';\nimport PanelDemo from './components/PanelDemo';\nimport TableDemo from './components/TableDemo';\nimport TreeDemo from './components/TreeDemo';\nimport InvalidStateDemo from './components/InvalidStateDemo';\nimport BlocksDemo from './components/BlocksDemo';\nimport IconsDemo from './components/IconsDemo';\nimport Crud from './pages/Crud';\nimport EmptyPage from './pages/EmptyPage';\nimport TimelineDemo from './pages/TimelineDemo';\nimport PrimeReact from 'primereact/api';\nimport { Tooltip } from 'primereact/tooltip';\nimport 'primereact/resources/primereact.css';\nimport 'primeicons/primeicons.css';\nimport 'primeflex/primeflex.css';\nimport 'prismjs/themes/prism-coy.css';\nimport './assets/demo/flags/flags.css';\nimport './assets/demo/Demos.scss';\nimport './assets/layout/layout.scss';\nimport './App.scss';\n\nvar App = function App() {\n var _useState = useState('static'),\n _useState2 = _slicedToArray(_useState, 2),\n layoutMode = _useState2[0],\n setLayoutMode = _useState2[1];\n\n var _useState3 = useState('light'),\n _useState4 = _slicedToArray(_useState3, 2),\n layoutColorMode = _useState4[0],\n setLayoutColorMode = _useState4[1];\n\n var _useState5 = useState('outlined'),\n _useState6 = _slicedToArray(_useState5, 2),\n inputStyle = _useState6[0],\n setInputStyle = _useState6[1];\n\n var _useState7 = useState(true),\n _useState8 = _slicedToArray(_useState7, 2),\n ripple = _useState8[0],\n setRipple = _useState8[1];\n\n var _useState9 = useState(false),\n _useState10 = _slicedToArray(_useState9, 2),\n staticMenuInactive = _useState10[0],\n setStaticMenuInactive = _useState10[1];\n\n var _useState11 = useState(false),\n _useState12 = _slicedToArray(_useState11, 2),\n overlayMenuActive = _useState12[0],\n setOverlayMenuActive = _useState12[1];\n\n var _useState13 = useState(false),\n _useState14 = _slicedToArray(_useState13, 2),\n mobileMenuActive = _useState14[0],\n setMobileMenuActive = _useState14[1];\n\n var _useState15 = useState(false),\n _useState16 = _slicedToArray(_useState15, 2),\n mobileTopbarMenuActive = _useState16[0],\n setMobileTopbarMenuActive = _useState16[1];\n\n var copyTooltipRef = useRef();\n var location = useLocation();\n PrimeReact.ripple = true;\n var menuClick = false;\n var mobileTopbarMenuClick = false;\n useEffect(function () {\n if (mobileMenuActive) {\n addClass(document.body, \"body-overflow-hidden\");\n } else {\n removeClass(document.body, \"body-overflow-hidden\");\n }\n }, [mobileMenuActive]);\n useEffect(function () {\n copyTooltipRef && copyTooltipRef.current && copyTooltipRef.current.updateTargetEvents();\n }, [location]);\n\n var onInputStyleChange = function onInputStyleChange(inputStyle) {\n setInputStyle(inputStyle);\n };\n\n var onRipple = function onRipple(e) {\n PrimeReact.ripple = e.value;\n setRipple(e.value);\n };\n\n var onLayoutModeChange = function onLayoutModeChange(mode) {\n setLayoutMode(mode);\n };\n\n var onColorModeChange = function onColorModeChange(mode) {\n setLayoutColorMode(mode);\n };\n\n var onWrapperClick = function onWrapperClick(event) {\n if (!menuClick) {\n setOverlayMenuActive(false);\n setMobileMenuActive(false);\n }\n\n if (!mobileTopbarMenuClick) {\n setMobileTopbarMenuActive(false);\n }\n\n mobileTopbarMenuClick = false;\n menuClick = false;\n };\n\n var onToggleMenuClick = function onToggleMenuClick(event) {\n menuClick = true;\n\n if (isDesktop()) {\n if (layoutMode === 'overlay') {\n if (mobileMenuActive === true) {\n setOverlayMenuActive(true);\n }\n\n setOverlayMenuActive(function (prevState) {\n return !prevState;\n });\n setMobileMenuActive(false);\n } else if (layoutMode === 'static') {\n setStaticMenuInactive(function (prevState) {\n return !prevState;\n });\n }\n } else {\n setMobileMenuActive(function (prevState) {\n return !prevState;\n });\n }\n\n event.preventDefault();\n };\n\n var onSidebarClick = function onSidebarClick() {\n menuClick = true;\n };\n\n var onMobileTopbarMenuClick = function onMobileTopbarMenuClick(event) {\n mobileTopbarMenuClick = true;\n setMobileTopbarMenuActive(function (prevState) {\n return !prevState;\n });\n event.preventDefault();\n };\n\n var onMobileSubTopbarMenuClick = function onMobileSubTopbarMenuClick(event) {\n mobileTopbarMenuClick = true;\n event.preventDefault();\n };\n\n var onMenuItemClick = function onMenuItemClick(event) {\n if (!event.item.items) {\n setOverlayMenuActive(false);\n setMobileMenuActive(false);\n }\n };\n\n var isDesktop = function isDesktop() {\n return window.innerWidth >= 992;\n };\n\n var menu = [{\n label: 'Home',\n items: [{\n label: 'Dashboard',\n icon: 'pi pi-fw pi-home',\n to: '/'\n }]\n }, {\n label: 'UI Components',\n icon: 'pi pi-fw pi-sitemap',\n items: [{\n label: 'Form Layout',\n icon: 'pi pi-fw pi-id-card',\n to: '/formlayout'\n }, {\n label: 'Input',\n icon: 'pi pi-fw pi-check-square',\n to: '/input'\n }, {\n label: \"Float Label\",\n icon: \"pi pi-fw pi-bookmark\",\n to: \"/floatlabel\"\n }, {\n label: \"Invalid State\",\n icon: \"pi pi-fw pi-exclamation-circle\",\n to: \"invalidstate\"\n }, {\n label: 'Button',\n icon: 'pi pi-fw pi-mobile',\n to: '/button'\n }, {\n label: 'Table',\n icon: 'pi pi-fw pi-table',\n to: '/table'\n }, {\n label: 'List',\n icon: 'pi pi-fw pi-list',\n to: '/list'\n }, {\n label: 'Tree',\n icon: 'pi pi-fw pi-share-alt',\n to: '/tree'\n }, {\n label: 'Panel',\n icon: 'pi pi-fw pi-tablet',\n to: '/panel'\n }, {\n label: 'Overlay',\n icon: 'pi pi-fw pi-clone',\n to: '/overlay'\n }, {\n label: \"Media\",\n icon: \"pi pi-fw pi-image\",\n to: \"/media\"\n }, {\n label: 'Menu',\n icon: 'pi pi-fw pi-bars',\n to: '/menu'\n }, {\n label: 'Message',\n icon: 'pi pi-fw pi-comment',\n to: '/messages'\n }, {\n label: 'File',\n icon: 'pi pi-fw pi-file',\n to: '/file'\n }, {\n label: 'Chart',\n icon: 'pi pi-fw pi-chart-bar',\n to: '/chart'\n }, {\n label: 'Misc',\n icon: 'pi pi-fw pi-circle-off',\n to: '/misc'\n }]\n }, {\n label: 'UI Blocks',\n items: [{\n label: 'Free Blocks',\n icon: 'pi pi-fw pi-eye',\n to: '/blocks',\n badge: \"NEW\"\n }, {\n label: 'All Blocks',\n icon: 'pi pi-fw pi-globe',\n url: 'https://www.primefaces.org/primeblocks-react'\n }]\n }, {\n label: 'Icons',\n items: [{\n label: 'PrimeIcons',\n icon: 'pi pi-fw pi-prime',\n to: '/icons'\n }]\n }, {\n label: 'Pages',\n icon: 'pi pi-fw pi-clone',\n items: [{\n label: 'Crud',\n icon: 'pi pi-fw pi-user-edit',\n to: '/crud'\n }, {\n label: 'Timeline',\n icon: 'pi pi-fw pi-calendar',\n to: '/timeline'\n }, {\n label: 'Empty',\n icon: 'pi pi-fw pi-circle-off',\n to: '/empty'\n }]\n }, {\n label: 'Menu Hierarchy',\n icon: 'pi pi-fw pi-search',\n items: [{\n label: 'Submenu 1',\n icon: 'pi pi-fw pi-bookmark',\n items: [{\n label: 'Submenu 1.1',\n icon: 'pi pi-fw pi-bookmark',\n items: [{\n label: 'Submenu 1.1.1',\n icon: 'pi pi-fw pi-bookmark'\n }, {\n label: 'Submenu 1.1.2',\n icon: 'pi pi-fw pi-bookmark'\n }, {\n label: 'Submenu 1.1.3',\n icon: 'pi pi-fw pi-bookmark'\n }]\n }, {\n label: 'Submenu 1.2',\n icon: 'pi pi-fw pi-bookmark',\n items: [{\n label: 'Submenu 1.2.1',\n icon: 'pi pi-fw pi-bookmark'\n }, {\n label: 'Submenu 1.2.2',\n icon: 'pi pi-fw pi-bookmark'\n }]\n }]\n }, {\n label: 'Submenu 2',\n icon: 'pi pi-fw pi-bookmark',\n items: [{\n label: 'Submenu 2.1',\n icon: 'pi pi-fw pi-bookmark',\n items: [{\n label: 'Submenu 2.1.1',\n icon: 'pi pi-fw pi-bookmark'\n }, {\n label: 'Submenu 2.1.2',\n icon: 'pi pi-fw pi-bookmark'\n }, {\n label: 'Submenu 2.1.3',\n icon: 'pi pi-fw pi-bookmark'\n }]\n }, {\n label: 'Submenu 2.2',\n icon: 'pi pi-fw pi-bookmark',\n items: [{\n label: 'Submenu 2.2.1',\n icon: 'pi pi-fw pi-bookmark'\n }, {\n label: 'Submenu 2.2.2',\n icon: 'pi pi-fw pi-bookmark'\n }]\n }]\n }]\n }, {\n label: 'Get Started',\n items: [{\n label: 'Documentation',\n icon: 'pi pi-fw pi-question',\n command: function command() {\n window.location = \"#/documentation\";\n }\n }, {\n label: 'View Source',\n icon: 'pi pi-fw pi-search',\n command: function command() {\n window.location = \"https://github.com/primefaces/sakai-react\";\n }\n }]\n }];\n\n var addClass = function addClass(element, className) {\n if (element.classList) element.classList.add(className);else element.className += ' ' + className;\n };\n\n var removeClass = function removeClass(element, className) {\n if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\\\b)' + className.split(' ').join('|') + '(\\\\b|$)', 'gi'), ' ');\n };\n\n var wrapperClass = classNames('layout-wrapper', {\n 'layout-overlay': layoutMode === 'overlay',\n 'layout-static': layoutMode === 'static',\n 'layout-static-sidebar-inactive': staticMenuInactive && layoutMode === 'static',\n 'layout-overlay-sidebar-active': overlayMenuActive && layoutMode === 'overlay',\n 'layout-mobile-sidebar-active': mobileMenuActive,\n 'p-input-filled': inputStyle === 'filled',\n 'p-ripple-disabled': ripple === false,\n 'layout-theme-light': layoutColorMode === 'light'\n });\n return /*#__PURE__*/React.createElement(\"div\", {\n className: wrapperClass,\n onClick: onWrapperClick,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 287,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(Tooltip, {\n ref: copyTooltipRef,\n target: \".block-action-copy\",\n position: \"bottom\",\n content: \"Copied to clipboard\",\n event: \"focus\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 288,\n columnNumber: 13\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"layout-sidebar\",\n onClick: onSidebarClick,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 293,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(AppMenu, {\n model: menu,\n onMenuItemClick: onMenuItemClick,\n layoutColorMode: layoutColorMode,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 294,\n columnNumber: 17\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"layout-main-container\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 297,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"layout-main\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 298,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(Route, {\n path: \"/\",\n exact: true,\n render: function render() {\n return /*#__PURE__*/React.createElement(Dashboard, {\n colorMode: layoutColorMode,\n location: location,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 299,\n columnNumber: 57\n }\n });\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 299,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/formlayout\",\n component: FormLayoutDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 300,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/input\",\n component: InputDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 301,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/floatlabel\",\n component: FloatLabelDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 302,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/invalidstate\",\n component: InvalidStateDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 303,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/button\",\n component: ButtonDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 304,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/table\",\n component: TableDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 305,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/list\",\n component: ListDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 306,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/tree\",\n component: TreeDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 307,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/panel\",\n component: PanelDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 308,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/overlay\",\n component: OverlayDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 309,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/media\",\n component: MediaDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 310,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/menu\",\n component: MenuDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 311,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/messages\",\n component: MessagesDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 312,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/blocks\",\n component: BlocksDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 313,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/icons\",\n component: IconsDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 314,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/file\",\n component: FileDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 315,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/chart\",\n render: function render() {\n return /*#__PURE__*/React.createElement(ChartDemo, {\n colorMode: layoutColorMode,\n location: location,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 316,\n columnNumber: 56\n }\n });\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 316,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/misc\",\n component: MiscDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 317,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/timeline\",\n component: TimelineDemo,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 318,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/crud\",\n component: Crud,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 319,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/empty\",\n component: EmptyPage,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Route, {\n path: \"/documentation\",\n component: Documentation,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 321,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(AppFooter, {\n layoutColorMode: layoutColorMode,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 324,\n columnNumber: 17\n }\n })), /*#__PURE__*/React.createElement(AppConfig, {\n rippleEffect: ripple,\n onRippleEffect: onRipple,\n inputStyle: inputStyle,\n onInputStyleChange: onInputStyleChange,\n layoutMode: layoutMode,\n onLayoutModeChange: onLayoutModeChange,\n layoutColorMode: layoutColorMode,\n onColorModeChange: onColorModeChange,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 327,\n columnNumber: 13\n }\n }), /*#__PURE__*/React.createElement(CSSTransition, {\n classNames: \"layout-mask\",\n timeout: {\n enter: 200,\n exit: 200\n },\n in: mobileMenuActive,\n unmountOnExit: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 330,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"layout-mask p-component-overlay\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 331,\n columnNumber: 17\n }\n })));\n};\n\nexport default App;","map":{"version":3,"names":["React","useState","useEffect","useRef","classNames","Route","useLocation","CSSTransition","AppTopbar","AppFooter","AppMenu","AppConfig","Dashboard","ButtonDemo","ChartDemo","Documentation","FileDemo","FloatLabelDemo","FormLayoutDemo","InputDemo","ListDemo","MenuDemo","MessagesDemo","MiscDemo","OverlayDemo","MediaDemo","PanelDemo","TableDemo","TreeDemo","InvalidStateDemo","BlocksDemo","IconsDemo","Crud","EmptyPage","TimelineDemo","PrimeReact","Tooltip","App","layoutMode","setLayoutMode","layoutColorMode","setLayoutColorMode","inputStyle","setInputStyle","ripple","setRipple","staticMenuInactive","setStaticMenuInactive","overlayMenuActive","setOverlayMenuActive","mobileMenuActive","setMobileMenuActive","mobileTopbarMenuActive","setMobileTopbarMenuActive","copyTooltipRef","location","menuClick","mobileTopbarMenuClick","addClass","document","body","removeClass","current","updateTargetEvents","onInputStyleChange","onRipple","e","value","onLayoutModeChange","mode","onColorModeChange","onWrapperClick","event","onToggleMenuClick","isDesktop","prevState","preventDefault","onSidebarClick","onMobileTopbarMenuClick","onMobileSubTopbarMenuClick","onMenuItemClick","item","items","window","innerWidth","menu","label","icon","to","badge","url","command","element","className","classList","add","remove","replace","RegExp","split","join","wrapperClass","enter","exit"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/App.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Route, useLocation } from 'react-router-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { AppTopbar } from './AppTopbar';\nimport { AppFooter } from './AppFooter';\nimport { AppMenu } from './AppMenu';\nimport { AppConfig } from './AppConfig';\n\nimport Dashboard from './components/Dashboard';\nimport ButtonDemo from './components/ButtonDemo';\nimport ChartDemo from './components/ChartDemo';\nimport Documentation from './components/Documentation';\nimport FileDemo from './components/FileDemo';\nimport FloatLabelDemo from './components/FloatLabelDemo';\nimport FormLayoutDemo from './components/FormLayoutDemo';\nimport InputDemo from './components/InputDemo';\nimport ListDemo from './components/ListDemo';\nimport MenuDemo from './components/MenuDemo';\nimport MessagesDemo from './components/MessagesDemo';\nimport MiscDemo from './components/MiscDemo';\nimport OverlayDemo from './components/OverlayDemo';\nimport MediaDemo from './components/MediaDemo';\nimport PanelDemo from './components/PanelDemo';\nimport TableDemo from './components/TableDemo';\nimport TreeDemo from './components/TreeDemo';\nimport InvalidStateDemo from './components/InvalidStateDemo';\nimport BlocksDemo from './components/BlocksDemo';\nimport IconsDemo from './components/IconsDemo';\n\nimport Crud from './pages/Crud';\nimport EmptyPage from './pages/EmptyPage';\nimport TimelineDemo from './pages/TimelineDemo';\n\nimport PrimeReact from 'primereact/api';\nimport { Tooltip } from 'primereact/tooltip';\n\nimport 'primereact/resources/primereact.css';\nimport 'primeicons/primeicons.css';\nimport 'primeflex/primeflex.css';\nimport 'prismjs/themes/prism-coy.css';\nimport './assets/demo/flags/flags.css';\nimport './assets/demo/Demos.scss';\nimport './assets/layout/layout.scss';\nimport './App.scss';\n\nconst App = () => {\n const [layoutMode, setLayoutMode] = useState('static');\n const [layoutColorMode, setLayoutColorMode] = useState('light')\n const [inputStyle, setInputStyle] = useState('outlined');\n const [ripple, setRipple] = useState(true);\n const [staticMenuInactive, setStaticMenuInactive] = useState(false);\n const [overlayMenuActive, setOverlayMenuActive] = useState(false);\n const [mobileMenuActive, setMobileMenuActive] = useState(false);\n const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);\n const copyTooltipRef = useRef();\n const location = useLocation();\n\n PrimeReact.ripple = true;\n\n let menuClick = false;\n let mobileTopbarMenuClick = false;\n\n useEffect(() => {\n if (mobileMenuActive) {\n addClass(document.body, \"body-overflow-hidden\");\n } else {\n removeClass(document.body, \"body-overflow-hidden\");\n }\n }, [mobileMenuActive]);\n\n useEffect(() => {\n copyTooltipRef && copyTooltipRef.current && copyTooltipRef.current.updateTargetEvents();\n }, [location]);\n\n const onInputStyleChange = (inputStyle) => {\n setInputStyle(inputStyle);\n }\n\n const onRipple = (e) => {\n PrimeReact.ripple = e.value;\n setRipple(e.value)\n }\n\n const onLayoutModeChange = (mode) => {\n setLayoutMode(mode)\n }\n\n const onColorModeChange = (mode) => {\n setLayoutColorMode(mode)\n }\n\n const onWrapperClick = (event) => {\n if (!menuClick) {\n setOverlayMenuActive(false);\n setMobileMenuActive(false);\n }\n\n if (!mobileTopbarMenuClick) {\n setMobileTopbarMenuActive(false);\n }\n\n mobileTopbarMenuClick = false;\n menuClick = false;\n }\n\n const onToggleMenuClick = (event) => {\n menuClick = true;\n\n if (isDesktop()) {\n if (layoutMode === 'overlay') {\n if (mobileMenuActive === true) {\n setOverlayMenuActive(true);\n }\n\n setOverlayMenuActive((prevState) => !prevState);\n setMobileMenuActive(false);\n }\n else if (layoutMode === 'static') {\n setStaticMenuInactive((prevState) => !prevState);\n }\n }\n else {\n setMobileMenuActive((prevState) => !prevState);\n }\n\n event.preventDefault();\n }\n\n const onSidebarClick = () => {\n menuClick = true;\n }\n\n const onMobileTopbarMenuClick = (event) => {\n mobileTopbarMenuClick = true;\n\n setMobileTopbarMenuActive((prevState) => !prevState);\n event.preventDefault();\n }\n\n const onMobileSubTopbarMenuClick = (event) => {\n mobileTopbarMenuClick = true;\n\n event.preventDefault();\n }\n\n const onMenuItemClick = (event) => {\n if (!event.item.items) {\n setOverlayMenuActive(false);\n setMobileMenuActive(false);\n }\n }\n const isDesktop = () => {\n return window.innerWidth >= 992;\n }\n\n const menu = [\n {\n label: 'Home',\n items: [{\n label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/'\n }]\n },\n {\n label: 'UI Components', icon: 'pi pi-fw pi-sitemap',\n items: [\n { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/formlayout' },\n { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },\n { label: \"Float Label\", icon: \"pi pi-fw pi-bookmark\", to: \"/floatlabel\" },\n { label: \"Invalid State\", icon: \"pi pi-fw pi-exclamation-circle\", to: \"invalidstate\" },\n { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' },\n { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },\n { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },\n { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },\n { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },\n { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },\n { label: \"Media\", icon: \"pi pi-fw pi-image\", to: \"/media\" },\n { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },\n { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },\n { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },\n { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },\n { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },\n ]\n },\n {\n label: 'UI Blocks',\n items: [\n { label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: \"NEW\" },\n { label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-react' }\n ]\n },\n {\n label: 'Icons',\n items: [\n { label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }\n ]\n },\n {\n label: 'Pages', icon: 'pi pi-fw pi-clone',\n items: [\n { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' },\n { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },\n { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' }\n ]\n },\n {\n label: 'Menu Hierarchy', icon: 'pi pi-fw pi-search',\n items: [\n {\n label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',\n items: [\n {\n label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',\n items: [\n { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },\n { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },\n { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },\n ]\n },\n {\n label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',\n items: [\n { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' },\n { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' }\n ]\n },\n ]\n },\n {\n label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',\n items: [\n {\n label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',\n items: [\n { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },\n { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },\n { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' },\n ]\n },\n {\n label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',\n items: [\n { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },\n { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' }\n ]\n }\n ]\n }\n ]\n },\n {\n label: 'Get Started',\n items: [\n { label: 'Documentation', icon: 'pi pi-fw pi-question', command: () => { window.location = \"#/documentation\" } },\n { label: 'View Source', icon: 'pi pi-fw pi-search', command: () => { window.location = \"https://github.com/primefaces/sakai-react\" } }\n ]\n }\n ];\n\n const addClass = (element, className) => {\n if (element.classList)\n element.classList.add(className);\n else\n element.className += ' ' + className;\n }\n\n const removeClass = (element, className) => {\n if (element.classList)\n element.classList.remove(className);\n else\n element.className = element.className.replace(new RegExp('(^|\\\\b)' + className.split(' ').join('|') + '(\\\\b|$)', 'gi'), ' ');\n }\n\n const wrapperClass = classNames('layout-wrapper', {\n 'layout-overlay': layoutMode === 'overlay',\n 'layout-static': layoutMode === 'static',\n 'layout-static-sidebar-inactive': staticMenuInactive && layoutMode === 'static',\n 'layout-overlay-sidebar-active': overlayMenuActive && layoutMode === 'overlay',\n 'layout-mobile-sidebar-active': mobileMenuActive,\n 'p-input-filled': inputStyle === 'filled',\n 'p-ripple-disabled': ripple === false,\n 'layout-theme-light': layoutColorMode === 'light'\n });\n\n return (\n