68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import React, {createContext, useContext, useReducer} from 'react'
|
|
import DefaultHeader from "../components/header/DefaultHeader";
|
|
|
|
interface StateInterface {
|
|
renderHeader: () => React.ReactNode
|
|
}
|
|
|
|
interface LayoutContextInterface {
|
|
states: StateInterface
|
|
dispatch: React.Dispatch<{
|
|
type: ActionType
|
|
payload?: any
|
|
}>
|
|
}
|
|
|
|
const defaultState = {
|
|
renderHeader: () => <DefaultHeader/>,
|
|
}
|
|
|
|
const LayoutContext = createContext<LayoutContextInterface>({
|
|
states: defaultState,
|
|
dispatch: () => {
|
|
},
|
|
})
|
|
|
|
export enum ActionType {
|
|
'renderHeader' = 'renderHeader',
|
|
'resetHeader' = 'resetHeader',
|
|
}
|
|
|
|
const reducer: (
|
|
states: StateInterface,
|
|
action: { type: ActionType; payload?: any },
|
|
) => StateInterface = (states = defaultState, action) => {
|
|
switch (action.type) {
|
|
case ActionType.renderHeader:
|
|
return {
|
|
...states,
|
|
renderHeader: action.payload,
|
|
}
|
|
case ActionType.resetHeader:
|
|
return {
|
|
...states,
|
|
renderHeader: () => <DefaultHeader/>,
|
|
}
|
|
default:
|
|
return states
|
|
}
|
|
}
|
|
|
|
const LayoutProvider: React.FC = (props) => {
|
|
const [states, dispatch] = useReducer(reducer, defaultState)
|
|
|
|
return (
|
|
<LayoutContext.Provider
|
|
value={{
|
|
states,
|
|
dispatch,
|
|
}}
|
|
>
|
|
{props.children}
|
|
</LayoutContext.Provider>
|
|
)
|
|
}
|
|
|
|
export const useLayout = () => useContext(LayoutContext)
|
|
|
|
export default LayoutProvider |