138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
import type { Action } from 'easy-peasy'
|
|
import { action } from 'easy-peasy'
|
|
import { themeConfig } from '../configs/theme.config'
|
|
import {
|
|
LAYOUT_TYPE_CLASSIC,
|
|
LAYOUT_TYPE_DECKED,
|
|
LAYOUT_TYPE_MODERN,
|
|
LAYOUT_TYPE_STACKED_SIDE,
|
|
MODE_DARK,
|
|
MODE_LIGHT,
|
|
NAV_MODE_DARK,
|
|
NAV_MODE_LIGHT,
|
|
NAV_MODE_THEMED,
|
|
NAV_MODE_TRANSPARENT,
|
|
} from '../constants/theme.constant'
|
|
import { Direction, Mode, NavMode } from '@/@types/theme'
|
|
|
|
export interface ThemeStoreModel {
|
|
themeColor: string
|
|
direction: Direction
|
|
mode: Mode
|
|
primaryColorLevel: number
|
|
cardBordered: boolean
|
|
panelExpand: boolean
|
|
controlSize: string
|
|
navMode: NavMode
|
|
layout: {
|
|
previousType?: string
|
|
type: string
|
|
sideNavCollapse: boolean
|
|
}
|
|
}
|
|
|
|
export interface ThemeStoreActions {
|
|
setDirection: Action<ThemeStoreModel, Direction>
|
|
setMode: Action<ThemeStoreModel, Mode>
|
|
setLayout: Action<ThemeStoreModel, string>
|
|
setPreviousLayout: Action<ThemeStoreModel, string>
|
|
setSideNavCollapse: Action<ThemeStoreModel, boolean>
|
|
setNavMode: Action<ThemeStoreModel, NavMode | 'default'>
|
|
setPanelExpand: Action<ThemeStoreModel, boolean>
|
|
setThemeColor: Action<ThemeStoreModel, string>
|
|
setThemeColorLevel: Action<ThemeStoreModel, number>
|
|
}
|
|
|
|
export type ThemeModel = ThemeStoreModel & ThemeStoreActions
|
|
|
|
const availableNavColorLayouts = [LAYOUT_TYPE_CLASSIC, LAYOUT_TYPE_STACKED_SIDE, LAYOUT_TYPE_DECKED]
|
|
|
|
const initialNavMode = () => {
|
|
if (themeConfig.layout.type === LAYOUT_TYPE_MODERN && themeConfig.navMode !== NAV_MODE_THEMED) {
|
|
return NAV_MODE_TRANSPARENT
|
|
}
|
|
|
|
return themeConfig.navMode
|
|
}
|
|
|
|
const initialState: ThemeStoreModel = {
|
|
themeColor: themeConfig.themeColor,
|
|
direction: themeConfig.direction,
|
|
mode: themeConfig.mode,
|
|
primaryColorLevel: themeConfig.primaryColorLevel,
|
|
panelExpand: themeConfig.panelExpand,
|
|
navMode: initialNavMode(),
|
|
layout: themeConfig.layout,
|
|
cardBordered: true,
|
|
controlSize: 'md',
|
|
}
|
|
|
|
export const themeModel: ThemeModel = {
|
|
...initialState,
|
|
setDirection: action((state, payload) => {
|
|
state.direction = payload
|
|
}),
|
|
setMode: action((state, payload) => {
|
|
const availableColorNav = availableNavColorLayouts.includes(state.layout.type)
|
|
|
|
if (availableColorNav && payload === MODE_DARK && state.navMode !== NAV_MODE_THEMED) {
|
|
state.navMode = NAV_MODE_DARK
|
|
}
|
|
if (availableColorNav && payload === MODE_LIGHT && state.navMode !== NAV_MODE_THEMED) {
|
|
state.navMode = NAV_MODE_LIGHT
|
|
}
|
|
state.mode = payload
|
|
}),
|
|
setLayout: action((state, payload) => {
|
|
state.cardBordered = payload === LAYOUT_TYPE_MODERN
|
|
if (payload === LAYOUT_TYPE_MODERN) {
|
|
state.navMode = NAV_MODE_TRANSPARENT
|
|
}
|
|
|
|
const availableColorNav = availableNavColorLayouts.includes(payload)
|
|
|
|
if (availableColorNav && state.mode === MODE_LIGHT) {
|
|
state.navMode = NAV_MODE_LIGHT
|
|
}
|
|
|
|
if (availableColorNav && state.mode === MODE_DARK) {
|
|
state.navMode = NAV_MODE_DARK
|
|
}
|
|
|
|
state.layout.type = payload
|
|
}),
|
|
setPreviousLayout: action((state, payload) => {
|
|
state.layout.previousType = payload
|
|
}),
|
|
setSideNavCollapse: action((state, payload) => {
|
|
state.layout.sideNavCollapse = payload
|
|
}),
|
|
setNavMode: action((state, payload) => {
|
|
if (payload !== 'default') {
|
|
state.navMode = payload
|
|
} else {
|
|
if (state.layout.type === LAYOUT_TYPE_MODERN) {
|
|
state.navMode = NAV_MODE_TRANSPARENT
|
|
}
|
|
|
|
const availableColorNav = availableNavColorLayouts.includes(state.layout.type)
|
|
|
|
if (availableColorNav && state.mode === MODE_LIGHT) {
|
|
state.navMode = NAV_MODE_LIGHT
|
|
}
|
|
|
|
if (availableColorNav && state.mode === MODE_DARK) {
|
|
state.navMode = NAV_MODE_DARK
|
|
}
|
|
}
|
|
}),
|
|
setPanelExpand: action((state, payload) => {
|
|
state.panelExpand = payload
|
|
}),
|
|
setThemeColor: action((state, payload) => {
|
|
state.themeColor = payload
|
|
}),
|
|
setThemeColorLevel: action((state, payload) => {
|
|
state.primaryColorLevel = payload
|
|
}),
|
|
}
|