upgade package
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,77 @@
|
||||
import {
|
||||
createContext,
|
||||
Dispatch,
|
||||
FC,
|
||||
SetStateAction,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {WithChildren} from '../../helpers'
|
||||
|
||||
const MetronicSplashScreenContext = createContext<Dispatch<SetStateAction<number>> | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
||||
const MetronicSplashScreenProvider: FC<WithChildren> = ({children}) => {
|
||||
const [count, setCount] = useState(0)
|
||||
const visible = count > 0
|
||||
|
||||
useEffect(() => {
|
||||
// Show SplashScreen
|
||||
if (visible) {
|
||||
document.body.classList.remove('page-loading')
|
||||
|
||||
return () => {
|
||||
document.body.classList.add('page-loading')
|
||||
}
|
||||
}
|
||||
|
||||
// Hide SplashScreen
|
||||
let timeout: number
|
||||
if (!visible) {
|
||||
timeout = window.setTimeout(() => {
|
||||
document.body.classList.add('page-loading')
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
return (
|
||||
<MetronicSplashScreenContext.Provider value={setCount}>
|
||||
{children}
|
||||
</MetronicSplashScreenContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const LayoutSplashScreen: FC<{visible?: boolean}> = ({visible = true}) => {
|
||||
// Everything are ready - remove splashscreen
|
||||
const setCount = useContext(MetronicSplashScreenContext)
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
return
|
||||
}
|
||||
|
||||
if (setCount) {
|
||||
setCount((prev) => {
|
||||
return prev + 1
|
||||
})
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (setCount) {
|
||||
setCount((prev) => {
|
||||
return prev - 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [setCount, visible])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export {MetronicSplashScreenProvider, LayoutSplashScreen}
|
||||
@@ -0,0 +1,99 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
|
||||
import {FC, createContext, useContext, useEffect, useState} from 'react'
|
||||
import {WithChildren} from '../../helpers'
|
||||
|
||||
export interface PageLink {
|
||||
title: string
|
||||
path: string
|
||||
isActive: boolean
|
||||
isSeparator?: boolean
|
||||
}
|
||||
|
||||
export interface PageDataContextModel {
|
||||
pageTitle?: string
|
||||
setPageTitle: (_title: string) => void
|
||||
pageDescription?: string
|
||||
setPageDescription: (_description: string) => void
|
||||
pageBreadcrumbs?: Array<PageLink>
|
||||
setPageBreadcrumbs: (_breadcrumbs: Array<PageLink>) => void
|
||||
}
|
||||
|
||||
const PageDataContext = createContext<PageDataContextModel>({
|
||||
setPageTitle: (_title: string) => {},
|
||||
setPageBreadcrumbs: (_breadcrumbs: Array<PageLink>) => {},
|
||||
setPageDescription: (_description: string) => {},
|
||||
})
|
||||
|
||||
const PageDataProvider: FC<WithChildren> = ({children}) => {
|
||||
const [pageTitle, setPageTitle] = useState<string>('')
|
||||
const [pageDescription, setPageDescription] = useState<string>('')
|
||||
const [pageBreadcrumbs, setPageBreadcrumbs] = useState<Array<PageLink>>([])
|
||||
const value: PageDataContextModel = {
|
||||
pageTitle,
|
||||
setPageTitle,
|
||||
pageDescription,
|
||||
setPageDescription,
|
||||
pageBreadcrumbs,
|
||||
setPageBreadcrumbs,
|
||||
}
|
||||
return <PageDataContext.Provider value={value}>{children}</PageDataContext.Provider>
|
||||
}
|
||||
|
||||
function usePageData() {
|
||||
return useContext(PageDataContext)
|
||||
}
|
||||
|
||||
type Props = {
|
||||
description?: string
|
||||
breadcrumbs?: Array<PageLink>
|
||||
}
|
||||
|
||||
const PageTitle: FC<Props & WithChildren> = ({children, description, breadcrumbs}) => {
|
||||
const {setPageTitle, setPageDescription, setPageBreadcrumbs} = usePageData()
|
||||
useEffect(() => {
|
||||
if (children) {
|
||||
setPageTitle(children.toString())
|
||||
}
|
||||
return () => {
|
||||
setPageTitle('')
|
||||
}
|
||||
}, [children])
|
||||
|
||||
useEffect(() => {
|
||||
if (description) {
|
||||
setPageDescription(description)
|
||||
}
|
||||
return () => {
|
||||
setPageDescription('')
|
||||
}
|
||||
}, [description])
|
||||
|
||||
useEffect(() => {
|
||||
if (breadcrumbs) {
|
||||
setPageBreadcrumbs(breadcrumbs)
|
||||
}
|
||||
return () => {
|
||||
setPageBreadcrumbs([])
|
||||
}
|
||||
}, [breadcrumbs])
|
||||
|
||||
return <></>
|
||||
}
|
||||
|
||||
const PageDescription: FC<WithChildren> = ({children}) => {
|
||||
const {setPageDescription} = usePageData()
|
||||
useEffect(() => {
|
||||
if (children) {
|
||||
setPageDescription(children.toString())
|
||||
}
|
||||
return () => {
|
||||
setPageDescription('')
|
||||
}
|
||||
}, [children])
|
||||
return <></>
|
||||
}
|
||||
|
||||
export {PageDescription, PageTitle, PageDataProvider, usePageData}
|
||||
@@ -0,0 +1,139 @@
|
||||
import {ILayout} from './_Models'
|
||||
|
||||
export const DefaultConfig: ILayout = {
|
||||
layoutType: 'dark-sidebar',
|
||||
main: {
|
||||
componentName: 'main',
|
||||
type: 'default',
|
||||
pageBgWhite: false,
|
||||
iconType: 'duotone',
|
||||
},
|
||||
app: {
|
||||
general: {
|
||||
componentName: 'general',
|
||||
evolution: true,
|
||||
layoutType: 'default',
|
||||
mode: 'light',
|
||||
rtl: false,
|
||||
primaryColor: '#50CD89',
|
||||
pageBgWhite: false,
|
||||
pageWidth: 'default',
|
||||
},
|
||||
header: {
|
||||
componentName: 'header',
|
||||
display: true,
|
||||
default: {
|
||||
container: 'fluid',
|
||||
containerClass: 'd-flex align-items-stretch justify-content-between',
|
||||
fixed: {
|
||||
desktop: true,
|
||||
mobile: false,
|
||||
},
|
||||
content: 'menu',
|
||||
menu: {
|
||||
display: true,
|
||||
iconType: 'svg',
|
||||
},
|
||||
},
|
||||
},
|
||||
sidebar: {
|
||||
componentName: 'sidebar',
|
||||
display: true,
|
||||
default: {
|
||||
class: 'flex-column',
|
||||
push: {
|
||||
header: true,
|
||||
toolbar: true,
|
||||
footer: true,
|
||||
},
|
||||
drawer: {
|
||||
enabled: true,
|
||||
attributes: {
|
||||
'data-kt-drawer': 'true',
|
||||
'data-kt-drawer-name': 'app-sidebar',
|
||||
'data-kt-drawer-activate': '{default: true, lg: false}',
|
||||
'data-kt-drawer-overlay': 'true',
|
||||
'data-kt-drawer-width': '225px',
|
||||
'data-kt-drawer-direction': 'start',
|
||||
'data-kt-drawer-toggle': '#kt_app_sidebar_mobile_toggle',
|
||||
},
|
||||
},
|
||||
fixed: {
|
||||
desktop: true,
|
||||
},
|
||||
minimize: {
|
||||
desktop: {
|
||||
enabled: true,
|
||||
default: false,
|
||||
hoverable: true,
|
||||
},
|
||||
},
|
||||
menu: {
|
||||
iconType: 'svg',
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
componentName: 'toolbar',
|
||||
display: true,
|
||||
layout: 'classic',
|
||||
class: 'py-3 py-lg-6',
|
||||
container: 'fluid',
|
||||
containerClass: 'd-flex flex-stack',
|
||||
fixed: {
|
||||
desktop: false,
|
||||
mobile: false,
|
||||
},
|
||||
// custom settings,
|
||||
filterButton: true,
|
||||
daterangepickerButton: false,
|
||||
primaryButton: true,
|
||||
primaryButtonLabel: 'Create',
|
||||
primaryButtonModal: 'create-app',
|
||||
},
|
||||
pageTitle: {
|
||||
componentName: 'page-title',
|
||||
display: true,
|
||||
breadCrumb: true,
|
||||
description: false,
|
||||
direction: 'column',
|
||||
},
|
||||
content: {
|
||||
componentName: 'content',
|
||||
container: 'fluid',
|
||||
},
|
||||
footer: {
|
||||
componentName: 'footer',
|
||||
display: true,
|
||||
container: 'fluid',
|
||||
containerClass: 'd-flex flex-column flex-md-row flex-center flex-md-stack py-3',
|
||||
fixed: {
|
||||
desktop: false,
|
||||
mobile: false,
|
||||
},
|
||||
},
|
||||
pageLoader: {
|
||||
componentName: 'page-loader',
|
||||
type: 'none',
|
||||
logoImage: 'sidelogo.png',
|
||||
logoClass: 'mh-75px',
|
||||
},
|
||||
},
|
||||
illustrations: {
|
||||
componentName: 'illustrations',
|
||||
set: 'sketchy-1',
|
||||
},
|
||||
scrolltop: {
|
||||
componentName: 'scrolltop',
|
||||
display: true,
|
||||
},
|
||||
engage: {
|
||||
componentName: 'engage',
|
||||
demos: {
|
||||
enabled: true,
|
||||
},
|
||||
purchase: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import {FC, createContext, useContext, useState, useEffect} from 'react'
|
||||
import {DefaultConfig} from './_LayoutConfig'
|
||||
import {
|
||||
setLayoutIntoLocalStorage,
|
||||
getEmptyCssClasses,
|
||||
getEmptyCSSVariables,
|
||||
getEmptyHTMLAttributes,
|
||||
LayoutSetup,
|
||||
} from './_LayoutSetup'
|
||||
import {
|
||||
ILayout,
|
||||
ILayoutCSSVariables,
|
||||
ILayoutCSSClasses,
|
||||
ILayoutHTMLAttributes,
|
||||
LayoutType,
|
||||
ToolbarType,
|
||||
} from './_Models'
|
||||
import {WithChildren} from '../../helpers'
|
||||
|
||||
export interface LayoutContextModel {
|
||||
config: ILayout
|
||||
classes: ILayoutCSSClasses
|
||||
attributes: ILayoutHTMLAttributes
|
||||
cssVariables: ILayoutCSSVariables
|
||||
setLayout: (config: LayoutSetup) => void
|
||||
setLayoutType: (layoutType: LayoutType) => void
|
||||
setToolbarType: (toolbarType: ToolbarType) => void
|
||||
}
|
||||
|
||||
const LayoutContext = createContext<LayoutContextModel>({
|
||||
config: DefaultConfig,
|
||||
classes: getEmptyCssClasses(),
|
||||
attributes: getEmptyHTMLAttributes(),
|
||||
cssVariables: getEmptyCSSVariables(),
|
||||
setLayout: (_config: LayoutSetup) => {},
|
||||
setLayoutType: (_layoutType: LayoutType) => {},
|
||||
setToolbarType: (_toolbarType: ToolbarType) => {},
|
||||
})
|
||||
|
||||
const enableSplashScreen = () => {
|
||||
const splashScreen = document.getElementById('splash-screen')
|
||||
if (splashScreen) {
|
||||
splashScreen.style.setProperty('display', 'flex')
|
||||
}
|
||||
}
|
||||
|
||||
const disableSplashScreen = () => {
|
||||
const splashScreen = document.getElementById('splash-screen')
|
||||
if (splashScreen) {
|
||||
splashScreen.style.setProperty('display', 'none')
|
||||
}
|
||||
}
|
||||
|
||||
const LayoutProvider: FC<WithChildren> = ({children}) => {
|
||||
const [config, setConfig] = useState(LayoutSetup.config)
|
||||
const [classes, setClasses] = useState(LayoutSetup.classes)
|
||||
const [attributes, setAttributes] = useState(LayoutSetup.attributes)
|
||||
const [cssVariables, setCSSVariables] = useState(LayoutSetup.cssVariables)
|
||||
|
||||
const setLayout = (_themeConfig: Partial<ILayout>) => {
|
||||
enableSplashScreen()
|
||||
const bodyClasses = Array.from(document.body.classList)
|
||||
bodyClasses.forEach((cl) => document.body.classList.remove(cl))
|
||||
const updatedConfig = LayoutSetup.updatePartialConfig(_themeConfig)
|
||||
setConfig(Object.assign({}, updatedConfig))
|
||||
setClasses(LayoutSetup.classes)
|
||||
setAttributes(LayoutSetup.attributes)
|
||||
setCSSVariables(LayoutSetup.cssVariables)
|
||||
setTimeout(() => {
|
||||
disableSplashScreen()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const setToolbarType = (toolbarType: ToolbarType) => {
|
||||
const updatedConfig = {...config}
|
||||
if (updatedConfig.app?.toolbar) {
|
||||
updatedConfig.app.toolbar.layout = toolbarType
|
||||
}
|
||||
|
||||
setLayoutIntoLocalStorage(updatedConfig)
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
const setLayoutType = (layoutType: LayoutType) => {
|
||||
const updatedLayout = {...config, layoutType}
|
||||
setLayoutIntoLocalStorage(updatedLayout)
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
const value: LayoutContextModel = {
|
||||
config,
|
||||
classes,
|
||||
attributes,
|
||||
cssVariables,
|
||||
setLayout,
|
||||
setLayoutType,
|
||||
setToolbarType,
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
disableSplashScreen()
|
||||
}, [])
|
||||
|
||||
return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>
|
||||
}
|
||||
|
||||
export {LayoutContext, LayoutProvider}
|
||||
|
||||
export function useLayout() {
|
||||
return useContext(LayoutContext)
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
import {
|
||||
ILayout,
|
||||
ILayoutCSSClasses,
|
||||
ILayoutCSSVariables,
|
||||
ILayoutHTMLAttributes,
|
||||
} from "./_Models";
|
||||
import { DefaultConfig } from "./_LayoutConfig";
|
||||
|
||||
const LAYOUT_CONFIG_KEY =
|
||||
import.meta.env.VITE_APP_BASE_LAYOUT_CONFIG_KEY || "LayoutConfig";
|
||||
|
||||
const getLayoutFromLocalStorage = (): ILayout => {
|
||||
const ls = localStorage.getItem(LAYOUT_CONFIG_KEY);
|
||||
if (ls) {
|
||||
try {
|
||||
return JSON.parse(ls) as ILayout;
|
||||
} catch (er) {
|
||||
console.error(er);
|
||||
}
|
||||
}
|
||||
return DefaultConfig;
|
||||
};
|
||||
|
||||
const setLayoutIntoLocalStorage = (config: ILayout) => {
|
||||
try {
|
||||
localStorage.setItem(LAYOUT_CONFIG_KEY, JSON.stringify(config));
|
||||
} catch (er) {
|
||||
console.error(er);
|
||||
}
|
||||
};
|
||||
|
||||
const getEmptyCssClasses = (): ILayoutCSSClasses => {
|
||||
return {
|
||||
header: [],
|
||||
headerContainer: [],
|
||||
headerMobile: [],
|
||||
headerMenu: [],
|
||||
aside: [],
|
||||
asideMenu: [],
|
||||
asideToggle: [],
|
||||
toolbar: [],
|
||||
toolbarContainer: [],
|
||||
content: [],
|
||||
contentContainer: [],
|
||||
footerContainer: [],
|
||||
sidebar: [],
|
||||
pageTitle: [],
|
||||
pageContainer: [],
|
||||
};
|
||||
};
|
||||
|
||||
const getEmptyHTMLAttributes = () => {
|
||||
return {
|
||||
asideMenu: new Map(),
|
||||
headerMobile: new Map(),
|
||||
headerMenu: new Map(),
|
||||
headerContainer: new Map(),
|
||||
pageTitle: new Map(),
|
||||
};
|
||||
};
|
||||
|
||||
const getEmptyCSSVariables = () => {
|
||||
return {
|
||||
body: new Map(),
|
||||
};
|
||||
};
|
||||
|
||||
class LayoutSetup {
|
||||
public static isLoaded: boolean = false;
|
||||
public static config: ILayout = getLayoutFromLocalStorage();
|
||||
public static classes: ILayoutCSSClasses = getEmptyCssClasses();
|
||||
public static attributes: ILayoutHTMLAttributes = getEmptyHTMLAttributes();
|
||||
public static cssVariables: ILayoutCSSVariables = getEmptyCSSVariables();
|
||||
|
||||
private static initCSSClasses(): void {
|
||||
LayoutSetup.classes = getEmptyCssClasses();
|
||||
}
|
||||
|
||||
private static initHTMLAttributes(): void {
|
||||
LayoutSetup.attributes = Object.assign({}, getEmptyHTMLAttributes());
|
||||
}
|
||||
|
||||
private static initCSSVariables(): void {
|
||||
LayoutSetup.cssVariables = getEmptyCSSVariables();
|
||||
}
|
||||
|
||||
private static initConfig(config: ILayout): ILayout {
|
||||
let updatedConfig = LayoutSetup.initLayoutSettings(config);
|
||||
updatedConfig = LayoutSetup.initToolbarSetting(updatedConfig);
|
||||
return LayoutSetup.initWidthSettings(updatedConfig);
|
||||
}
|
||||
|
||||
private static initLayoutSettings(config: ILayout): ILayout {
|
||||
const updatedConfig = { ...config };
|
||||
// clear body classes
|
||||
document.body.className = "";
|
||||
// clear body attributes
|
||||
const bodyAttributes = document.body
|
||||
.getAttributeNames()
|
||||
.filter((t) => t.indexOf("data-") > -1);
|
||||
bodyAttributes.forEach((attr) => document.body.removeAttribute(attr));
|
||||
document.body.setAttribute("style", "");
|
||||
document.body.setAttribute("id", "kt_app_body");
|
||||
document.body.setAttribute("data-kt-app-layout", updatedConfig.layoutType);
|
||||
document.body.classList.add("app-default");
|
||||
|
||||
const pageWidth = updatedConfig.app?.general?.pageWidth;
|
||||
if (
|
||||
updatedConfig.layoutType === "light-header" ||
|
||||
updatedConfig.layoutType === "dark-header"
|
||||
) {
|
||||
if (pageWidth === "default") {
|
||||
const header = updatedConfig.app?.header;
|
||||
if (header && header.default && header.default.container) {
|
||||
header.default.container = "fixed";
|
||||
}
|
||||
|
||||
const toolbar = updatedConfig.app?.toolbar;
|
||||
if (toolbar) {
|
||||
toolbar.container = "fixed";
|
||||
}
|
||||
|
||||
const content = updatedConfig.app?.content;
|
||||
if (content) {
|
||||
content.container = "fixed";
|
||||
}
|
||||
|
||||
const footer = updatedConfig.app?.footer;
|
||||
if (footer) {
|
||||
footer.container = "fixed";
|
||||
}
|
||||
|
||||
const updatedApp = {
|
||||
...updatedConfig.app,
|
||||
...header,
|
||||
...toolbar,
|
||||
...content,
|
||||
...footer,
|
||||
};
|
||||
return { ...updatedConfig, app: updatedApp };
|
||||
}
|
||||
}
|
||||
|
||||
LayoutSetup.initHeaderSettigs(updatedConfig);
|
||||
|
||||
return updatedConfig;
|
||||
}
|
||||
|
||||
private static initToolbarSetting(config: ILayout): ILayout {
|
||||
const updatedConfig = { ...config };
|
||||
const appHeaderDefaultContent = updatedConfig.app?.header?.default?.content;
|
||||
if (appHeaderDefaultContent === "page-title") {
|
||||
const toolbar = updatedConfig.app?.toolbar;
|
||||
if (toolbar) {
|
||||
toolbar.display = false;
|
||||
const updatedApp = { ...updatedConfig.app, ...toolbar };
|
||||
return { ...updatedConfig, app: updatedApp };
|
||||
}
|
||||
return updatedConfig;
|
||||
}
|
||||
|
||||
const pageTitle = updatedConfig.app?.pageTitle;
|
||||
if (pageTitle) {
|
||||
pageTitle.description = false;
|
||||
pageTitle.breadCrumb = true;
|
||||
const updatedApp = { ...updatedConfig.app, ...pageTitle };
|
||||
return { ...updatedConfig, app: updatedApp };
|
||||
}
|
||||
|
||||
return updatedConfig;
|
||||
}
|
||||
|
||||
private static initHeaderSettigs(config: ILayout) {
|
||||
const container = config.app?.header?.default?.container;
|
||||
if (container === "fluid") {
|
||||
this.classes.headerContainer.push("container-fluid");
|
||||
} else {
|
||||
this.classes.headerContainer.push("container-xxl");
|
||||
}
|
||||
}
|
||||
|
||||
private static initWidthSettings(config: ILayout): ILayout {
|
||||
const updatedConfig = { ...config };
|
||||
const pageWidth = updatedConfig.app?.general?.pageWidth;
|
||||
if (!pageWidth || pageWidth === "default") {
|
||||
return config;
|
||||
}
|
||||
|
||||
const header = updatedConfig.app?.header;
|
||||
if (header && header.default) {
|
||||
header.default.container = pageWidth;
|
||||
}
|
||||
const toolbar = updatedConfig.app?.toolbar;
|
||||
if (toolbar) {
|
||||
toolbar.container = pageWidth;
|
||||
}
|
||||
const content = updatedConfig.app?.content;
|
||||
if (content) {
|
||||
content.container = pageWidth;
|
||||
}
|
||||
const footer = updatedConfig.app?.footer;
|
||||
if (footer) {
|
||||
footer.container = pageWidth;
|
||||
}
|
||||
const updatedApp = {
|
||||
...updatedConfig.app,
|
||||
...header,
|
||||
...toolbar,
|
||||
...content,
|
||||
...footer,
|
||||
};
|
||||
return { ...updatedConfig, app: updatedApp };
|
||||
}
|
||||
|
||||
public static updatePartialConfig(fieldsToUpdate: Partial<ILayout>): ILayout {
|
||||
const config = LayoutSetup.config;
|
||||
const updatedConfig = { ...config, ...fieldsToUpdate };
|
||||
LayoutSetup.initCSSClasses();
|
||||
LayoutSetup.initCSSVariables();
|
||||
LayoutSetup.initHTMLAttributes();
|
||||
LayoutSetup.isLoaded = false;
|
||||
LayoutSetup.config = LayoutSetup.initConfig(
|
||||
Object.assign({}, updatedConfig)
|
||||
);
|
||||
LayoutSetup.isLoaded = true; // remove loading there
|
||||
return updatedConfig;
|
||||
}
|
||||
|
||||
public static setConfig(config: ILayout): void {
|
||||
setLayoutIntoLocalStorage(config);
|
||||
}
|
||||
|
||||
public static bootstrap = (() => {
|
||||
LayoutSetup.updatePartialConfig(LayoutSetup.config);
|
||||
})();
|
||||
}
|
||||
|
||||
export {
|
||||
LayoutSetup,
|
||||
getLayoutFromLocalStorage,
|
||||
setLayoutIntoLocalStorage,
|
||||
getEmptyCssClasses,
|
||||
getEmptyCSSVariables,
|
||||
getEmptyHTMLAttributes,
|
||||
};
|
||||
@@ -0,0 +1,258 @@
|
||||
export type LayoutType = 'dark-sidebar' | 'light-sidebar' | 'dark-header' | 'light-header'
|
||||
|
||||
export type CSSClassesType = {
|
||||
[key: string]: string[]
|
||||
}
|
||||
|
||||
export type HTMLAttributesType = {
|
||||
[key: string]: {
|
||||
[attrName: string]: string | boolean
|
||||
}
|
||||
}
|
||||
|
||||
export interface ILayoutComponent {
|
||||
componentName?: string
|
||||
}
|
||||
|
||||
export interface IPageLoader extends ILayoutComponent {
|
||||
componentName?: 'page-loader'
|
||||
type?: 'none' | 'default' | 'spinner-message' | 'spinner-logo'
|
||||
logoImage?: string
|
||||
logoClass?: string
|
||||
}
|
||||
|
||||
export interface IScrollTop extends ILayoutComponent {
|
||||
display?: boolean
|
||||
}
|
||||
|
||||
export interface IHeader extends ILayoutComponent {
|
||||
componentName?: 'header'
|
||||
display?: boolean
|
||||
default?: {
|
||||
container?: 'fluid' | 'fixed'
|
||||
containerClass?: string
|
||||
fixed?: {
|
||||
desktop?: boolean
|
||||
mobile?: boolean
|
||||
}
|
||||
content?: string
|
||||
menu?: {
|
||||
display?: boolean
|
||||
iconType?: 'svg' | 'font'
|
||||
}
|
||||
stacked?: boolean
|
||||
sticky?: {
|
||||
enabled?: boolean
|
||||
attributes?: {[attrName: string]: string}
|
||||
}
|
||||
minimize?: {
|
||||
enabled?: boolean
|
||||
attributes?: {[attrName: string]: string}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface ISidebar extends ILayoutComponent {
|
||||
componentName?: 'sidebar'
|
||||
display?: boolean
|
||||
default?: {
|
||||
class?: string
|
||||
push?: {
|
||||
header?: boolean
|
||||
toolbar?: boolean
|
||||
footer?: boolean
|
||||
}
|
||||
drawer?: {
|
||||
enabled?: boolean
|
||||
attributes?: {[attrName: string]: string}
|
||||
}
|
||||
sticky?: {
|
||||
enabled?: boolean
|
||||
attributes?: {[attrName: string]: string}
|
||||
}
|
||||
fixed?: {
|
||||
desktop?: boolean
|
||||
}
|
||||
minimize?: {
|
||||
desktop?: {
|
||||
enabled?: boolean
|
||||
default?: boolean
|
||||
hoverable?: boolean
|
||||
}
|
||||
mobile?: {
|
||||
enabled?: boolean
|
||||
default?: boolean
|
||||
hoverable?: boolean
|
||||
}
|
||||
}
|
||||
menu?: {
|
||||
iconType?: 'svg' | 'font'
|
||||
}
|
||||
collapse?: {
|
||||
desktop?: {
|
||||
enabled?: boolean
|
||||
default?: boolean
|
||||
}
|
||||
mobile?: {
|
||||
enabled?: boolean
|
||||
default?: boolean
|
||||
}
|
||||
}
|
||||
stacked?: boolean
|
||||
}
|
||||
toggle?: boolean
|
||||
}
|
||||
|
||||
export type ToolbarType = 'classic' | 'accounting' | 'extended' | 'reports' | 'saas'
|
||||
|
||||
export interface IToolbar extends ILayoutComponent {
|
||||
componentName?: 'toolbar'
|
||||
display?: boolean
|
||||
layout?: ToolbarType
|
||||
class?: string
|
||||
container?: 'fixed' | 'fluid'
|
||||
containerClass?: string
|
||||
fixed?: {
|
||||
desktop?: boolean
|
||||
mobile?: boolean
|
||||
}
|
||||
swap?: {
|
||||
enabled?: boolean
|
||||
attributes?: {[attrName: string]: string}
|
||||
}
|
||||
sticky?: {
|
||||
enabled?: boolean
|
||||
attributes?: {[attrName: string]: string}
|
||||
}
|
||||
minimize?: {
|
||||
enabled?: boolean
|
||||
attributes?: {[attrName: string]: string}
|
||||
}
|
||||
|
||||
// Custom settings
|
||||
filterButton?: boolean
|
||||
daterangepickerButton?: boolean
|
||||
primaryButton?: boolean
|
||||
primaryButtonLabel?: string
|
||||
primaryButtonModal?: string
|
||||
secondaryButton?: boolean
|
||||
}
|
||||
|
||||
export interface IMain extends ILayoutComponent {
|
||||
type?: 'blank' | 'default' | 'none' // Set layout type: default|blank|none
|
||||
pageBgWhite?: boolean // Set true if page background color is white
|
||||
iconType: 'duotone' | 'solid' | 'outline'
|
||||
}
|
||||
|
||||
export interface IIllustrations extends ILayoutComponent {
|
||||
componentName?: 'illustrations'
|
||||
set?: 'dozzy-1' | 'sigma-1' | 'sketchy-1' | 'unitedpalms-1'
|
||||
}
|
||||
|
||||
export interface IGeneral extends ILayoutComponent {
|
||||
componentName?: 'general'
|
||||
evolution?: boolean
|
||||
layoutType?: 'default' | 'blank'
|
||||
mode?: 'light' | 'dark' | 'system'
|
||||
rtl?: boolean
|
||||
primaryColor?: string // Used in email templates
|
||||
pageBgWhite?: boolean // Set true if page background color is white
|
||||
pageWidth?: 'default' | 'fluid' | 'fixed'
|
||||
}
|
||||
|
||||
export interface IMegaMenu extends ILayoutComponent {
|
||||
display: boolean
|
||||
}
|
||||
|
||||
export interface ISidebarPanel extends ILayoutComponent {
|
||||
componentName?: 'sidebar-panel'
|
||||
display: boolean
|
||||
}
|
||||
|
||||
export interface IContent extends ILayoutComponent {
|
||||
componentName?: 'content'
|
||||
container?: 'fixed' | 'fluid'
|
||||
class?: string
|
||||
}
|
||||
|
||||
export interface IFooter extends ILayoutComponent {
|
||||
componentName?: 'footer'
|
||||
display?: boolean
|
||||
container?: 'fluid' | 'fixed'
|
||||
containerClass?: string
|
||||
placement?: string
|
||||
fixed?: {
|
||||
desktop?: boolean
|
||||
mobile?: boolean
|
||||
}
|
||||
}
|
||||
|
||||
export interface IPageTitle extends ILayoutComponent {
|
||||
componentName?: 'page-title'
|
||||
display?: boolean
|
||||
breadCrumb?: boolean
|
||||
description?: boolean
|
||||
direction?: 'row' | 'column'
|
||||
class?: string
|
||||
}
|
||||
|
||||
export interface IEngage extends ILayoutComponent {
|
||||
componentName?: 'engage'
|
||||
demos?: {
|
||||
enabled?: boolean
|
||||
}
|
||||
purchase?: {
|
||||
enabled?: boolean
|
||||
}
|
||||
}
|
||||
|
||||
export interface IApp {
|
||||
general?: IGeneral
|
||||
header?: IHeader
|
||||
sidebar?: ISidebar
|
||||
sidebarPanel?: ISidebarPanel
|
||||
toolbar?: IToolbar
|
||||
pageTitle?: IPageTitle
|
||||
content?: IContent
|
||||
footer?: IFooter
|
||||
pageLoader?: IPageLoader
|
||||
}
|
||||
|
||||
export interface ILayout {
|
||||
layoutType: LayoutType
|
||||
main?: IMain
|
||||
app?: IApp
|
||||
illustrations?: IIllustrations
|
||||
scrolltop?: IScrollTop
|
||||
engage?: IEngage
|
||||
}
|
||||
|
||||
export interface ILayoutCSSClasses {
|
||||
header: Array<string>
|
||||
headerContainer: Array<string>
|
||||
headerMobile: Array<string>
|
||||
headerMenu: Array<string>
|
||||
aside: Array<string>
|
||||
asideMenu: Array<string>
|
||||
asideToggle: Array<string>
|
||||
sidebar: Array<string>
|
||||
toolbar: Array<string>
|
||||
toolbarContainer: Array<string>
|
||||
content: Array<string>
|
||||
contentContainer: Array<string>
|
||||
footerContainer: Array<string>
|
||||
pageTitle: Array<string>
|
||||
pageContainer: Array<string>
|
||||
}
|
||||
|
||||
export interface ILayoutHTMLAttributes {
|
||||
asideMenu: Map<string, string | number | boolean>
|
||||
headerMobile: Map<string, string | number | boolean>
|
||||
headerMenu: Map<string, string | number | boolean>
|
||||
headerContainer: Map<string, string | number | boolean>
|
||||
pageTitle: Map<string, string | number | boolean>
|
||||
}
|
||||
|
||||
export interface ILayoutCSSVariables {
|
||||
body: Map<string, string | number | boolean>
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export * from './_LayoutConfig'
|
||||
export * from './_LayoutProvider'
|
||||
export * from './_Models'
|
||||
export * from './_LayoutSetup'
|
||||
export * from './PageData'
|
||||
export * from './MetronicSplashScreen'
|
||||
Reference in New Issue
Block a user