93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import type { Action } from 'easy-peasy'
|
|
import { action } from 'easy-peasy'
|
|
import { availableNavColorLayouts, themeConfig } from '../proxy/theme/theme.config'
|
|
import {
|
|
LAYOUT_TYPE_MODERN,
|
|
NAV_MODE_TRANSPARENT,
|
|
} from '../constants/theme.constant'
|
|
import { Direction, Mode, NavMode } from '../proxy/theme/models'
|
|
|
|
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
|
|
}
|
|
style: string
|
|
}
|
|
|
|
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>
|
|
setPanelExpand: Action<ThemeStoreModel, boolean>
|
|
setThemeColor: Action<ThemeStoreModel, string>
|
|
setThemeColorLevel: Action<ThemeStoreModel, number>
|
|
setStyle: Action<ThemeStoreModel, string>
|
|
}
|
|
|
|
export type ThemeModel = ThemeStoreModel & ThemeStoreActions
|
|
|
|
const initialState: ThemeStoreModel = {
|
|
themeColor: themeConfig.themeColor,
|
|
direction: themeConfig.direction,
|
|
mode: themeConfig.mode,
|
|
primaryColorLevel: themeConfig.primaryColorLevel,
|
|
panelExpand: themeConfig.panelExpand,
|
|
navMode: NAV_MODE_TRANSPARENT,
|
|
layout: themeConfig.layout,
|
|
cardBordered: true,
|
|
controlSize: 'md',
|
|
style: themeConfig.style,
|
|
}
|
|
|
|
export const themeModel: ThemeModel = {
|
|
...initialState,
|
|
setDirection: action((state, payload) => {
|
|
state.direction = payload
|
|
}),
|
|
setMode: action((state, payload) => {
|
|
state.mode = payload
|
|
}),
|
|
setLayout: action((state, payload) => {
|
|
state.cardBordered = payload === LAYOUT_TYPE_MODERN
|
|
|
|
if (availableNavColorLayouts.includes(payload)) {
|
|
state.navMode = NAV_MODE_TRANSPARENT
|
|
}
|
|
|
|
state.layout.type = payload
|
|
}),
|
|
setPreviousLayout: action((state, payload) => {
|
|
state.layout.previousType = payload
|
|
}),
|
|
setSideNavCollapse: action((state, payload) => {
|
|
state.layout.sideNavCollapse = payload
|
|
}),
|
|
setNavMode: action((state, payload) => {
|
|
state.navMode = payload
|
|
}),
|
|
setPanelExpand: action((state, payload) => {
|
|
state.panelExpand = payload
|
|
}),
|
|
setThemeColor: action((state, payload) => {
|
|
state.themeColor = payload
|
|
}),
|
|
setThemeColorLevel: action((state, payload) => {
|
|
state.primaryColorLevel = payload
|
|
}),
|
|
setStyle: action((state, payload) => {
|
|
state.style = payload
|
|
}),
|
|
}
|