162 lines
5.0 KiB
TypeScript
162 lines
5.0 KiB
TypeScript
'use client';
|
|
|
|
import Head from 'next/head';
|
|
import React, { useState } from 'react';
|
|
import { Breadcrumb, LayoutConfig, LayoutContextProps } from '../../types/layout';
|
|
import { ChildContainerProps } from '@/types';
|
|
|
|
export const LayoutContext = React.createContext({} as LayoutContextProps);
|
|
|
|
export const LayoutProvider = (props: ChildContainerProps) => {
|
|
const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([]);
|
|
const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({
|
|
ripple: false,
|
|
inputStyle: 'outlined',
|
|
menuMode: 'static',
|
|
colorScheme: 'dark',
|
|
theme: 'magenta',
|
|
scale: 14
|
|
});
|
|
|
|
const [layoutState, setLayoutState] = useState({
|
|
staticMenuDesktopInactive: false,
|
|
overlayMenuActive: false,
|
|
overlaySubmenuActive: false,
|
|
rightMenuVisible: false,
|
|
configSidebarVisible: false,
|
|
staticMenuMobileActive: false,
|
|
menuHoverActive: false,
|
|
searchBarActive: false,
|
|
resetMenu: false,
|
|
sidebarActive: false,
|
|
anchored: false,
|
|
rightMenuActive: false
|
|
});
|
|
|
|
const onMenuToggle = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
if (isOverlay()) {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
overlayMenuActive: !prevLayoutState.overlayMenuActive
|
|
}));
|
|
}
|
|
if (isDesktop()) {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive
|
|
}));
|
|
} else {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive
|
|
}));
|
|
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
|
|
const hideOverlayMenu = () => {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
overlayMenuActive: false,
|
|
staticMenuMobileActive: false
|
|
}));
|
|
};
|
|
|
|
const toggleSearch = () => {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
searchBarActive: !layoutState.searchBarActive
|
|
}));
|
|
};
|
|
|
|
const onSearchHide = () => {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
searchBarActive: false
|
|
}));
|
|
};
|
|
|
|
const showRightSidebar = () => {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
rightMenuActive: true
|
|
}));
|
|
hideOverlayMenu();
|
|
};
|
|
|
|
const showConfigSidebar = () => {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
configSidebarVisible: true
|
|
}));
|
|
};
|
|
const showSidebar = () => {
|
|
setLayoutState((prevLayoutState) => ({
|
|
...prevLayoutState,
|
|
rightMenuVisible: true
|
|
}));
|
|
};
|
|
|
|
const isOverlay = () => {
|
|
return layoutConfig.menuMode === 'overlay';
|
|
};
|
|
|
|
const isSlim = () => {
|
|
return layoutConfig.menuMode === 'slim';
|
|
};
|
|
|
|
const isSlimPlus = () => {
|
|
return layoutConfig.menuMode === 'slim-plus';
|
|
};
|
|
|
|
const isHorizontal = () => {
|
|
return layoutConfig.menuMode === 'horizontal';
|
|
};
|
|
|
|
const isDesktop = () => {
|
|
return window.innerWidth > 991;
|
|
};
|
|
|
|
const value = {
|
|
layoutConfig,
|
|
setLayoutConfig,
|
|
layoutState,
|
|
setLayoutState,
|
|
isSlim,
|
|
isSlimPlus,
|
|
isHorizontal,
|
|
isDesktop,
|
|
onMenuToggle,
|
|
toggleSearch,
|
|
onSearchHide,
|
|
showRightSidebar,
|
|
breadcrumbs,
|
|
setBreadcrumbs,
|
|
showConfigSidebar,
|
|
showSidebar
|
|
};
|
|
|
|
return (
|
|
<LayoutContext.Provider value={value}>
|
|
<>
|
|
<Head>
|
|
<title>PrimeReact - DIAMOND</title>
|
|
<meta charSet="UTF-8" />
|
|
<meta name="description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
|
|
<meta name="robots" content="index, follow" />
|
|
<meta name="viewport" content="initial-scale=1, width=device-width" />
|
|
<meta property="og:type" content="website"></meta>
|
|
<meta property="og:title" content="Diamond by PrimeReact for NextJS"></meta>
|
|
<meta property="og:url" content="https://diamond.primereact.org"></meta>
|
|
<meta property="og:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
|
|
<meta property="og:image" content="https://www.primefaces.org/static/social/diamond-react.png"></meta>
|
|
<meta property="og:ttl" content="604800"></meta>
|
|
<link rel="icon" href={`/favicon.ico`} type="image/x-icon"></link>
|
|
</Head>
|
|
{props.children}
|
|
</>
|
|
</LayoutContext.Provider>
|
|
);
|
|
};
|