55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { useEffect, useCallback } from 'react'
|
|
import { useStoreState, useStoreActions } from '@/store'
|
|
import { useLocation } from 'react-router-dom'
|
|
import type { LayoutType } from '@/@types/theme'
|
|
import type { ComponentType } from 'react'
|
|
|
|
export type AppRouteProps<T> = {
|
|
component: ComponentType<T>
|
|
routeKey: string
|
|
layout?: LayoutType
|
|
}
|
|
|
|
const AppRoute = <T extends Record<string, unknown>>({
|
|
component: Component,
|
|
routeKey,
|
|
...props
|
|
}: AppRouteProps<T>) => {
|
|
const location = useLocation()
|
|
|
|
const { setCurrentRouteKey } = useStoreActions((actions) => actions.base.common)
|
|
const { setLayout, setPreviousLayout } = useStoreActions((actions) => actions.theme)
|
|
|
|
const layoutType = useStoreState((state) => state.theme.layout.type)
|
|
const previousLayout = useStoreState((state) => state.theme.layout.previousType)
|
|
|
|
const handleLayoutChange = useCallback(() => {
|
|
setCurrentRouteKey(routeKey)
|
|
|
|
if (props.layout && props.layout !== layoutType) {
|
|
setPreviousLayout(layoutType)
|
|
setLayout(props.layout)
|
|
}
|
|
|
|
if (!props.layout && previousLayout && layoutType !== previousLayout) {
|
|
setLayout(previousLayout)
|
|
setPreviousLayout('')
|
|
}
|
|
}, [
|
|
layoutType,
|
|
previousLayout,
|
|
props.layout,
|
|
routeKey,
|
|
setCurrentRouteKey,
|
|
setLayout,
|
|
setPreviousLayout,
|
|
])
|
|
|
|
useEffect(() => {
|
|
handleLayoutChange()
|
|
}, [location, handleLayoutChange])
|
|
|
|
return <Component {...(props as T)} />
|
|
}
|
|
|
|
export default AppRoute
|