mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
1918ef3767
[web] Create context api for review panel GitOrigin-RevId: 3d550e2f3c14ecd0586d088f4ecb75acd44aa782
109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
import { createContext, useContext, useMemo } from 'react'
|
|
import useScopeValue from '../../../shared/hooks/use-scope-value'
|
|
import { SubView } from '../components/review-panel/nav'
|
|
|
|
interface ReviewPanelState {
|
|
values: {
|
|
subView: SubView
|
|
collapsed: Record<string, boolean>
|
|
}
|
|
updaterFns: {
|
|
setSubView: React.Dispatch<
|
|
React.SetStateAction<ReviewPanelState['values']['subView']>
|
|
>
|
|
setCollapsed: React.Dispatch<
|
|
React.SetStateAction<ReviewPanelState['values']['collapsed']>
|
|
>
|
|
}
|
|
}
|
|
|
|
function useAngularReviewPanelState(): ReviewPanelState {
|
|
const [subView, setSubView] = useScopeValue<SubView>('reviewPanel.subView')
|
|
const [collapsed, setCollapsed] = useScopeValue<Record<string, boolean>>(
|
|
'reviewPanel.overview.docsCollapsedState'
|
|
)
|
|
|
|
const values = useMemo<ReviewPanelState['values']>(
|
|
() => ({
|
|
subView,
|
|
collapsed,
|
|
}),
|
|
[subView, collapsed]
|
|
)
|
|
|
|
const updaterFns = useMemo<ReviewPanelState['updaterFns']>(
|
|
() => ({
|
|
setSubView,
|
|
setCollapsed,
|
|
}),
|
|
[setSubView, setCollapsed]
|
|
)
|
|
|
|
return { values, updaterFns }
|
|
}
|
|
|
|
const ReviewPanelStateValueContext = createContext<
|
|
ReviewPanelState['values'] | undefined
|
|
>(undefined)
|
|
|
|
type ReviewPanelStateValueProps = {
|
|
children?: React.ReactNode
|
|
value: ReviewPanelState['values']
|
|
}
|
|
|
|
function ReviewPanelStateValueProvider(props: ReviewPanelStateValueProps) {
|
|
return <ReviewPanelStateValueContext.Provider {...props} />
|
|
}
|
|
|
|
const ReviewPanelStateUpdaterFnsContext = createContext<
|
|
ReviewPanelState['updaterFns'] | undefined
|
|
>(undefined)
|
|
|
|
type ReviewPanelStateUpdaterFnsProviderProps = {
|
|
children?: React.ReactNode
|
|
value: ReviewPanelState['updaterFns']
|
|
}
|
|
|
|
function ReviewPanelStateUpdaterFnsProvider(
|
|
props: ReviewPanelStateUpdaterFnsProviderProps
|
|
) {
|
|
return <ReviewPanelStateUpdaterFnsContext.Provider {...props} />
|
|
}
|
|
|
|
type ReviewPanelStateProviderProps = {
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export function ReviewPanelStateProvider({
|
|
children,
|
|
}: ReviewPanelStateProviderProps) {
|
|
const { values, updaterFns } = useAngularReviewPanelState()
|
|
|
|
return (
|
|
<ReviewPanelStateValueProvider value={values}>
|
|
<ReviewPanelStateUpdaterFnsProvider value={updaterFns}>
|
|
{children}
|
|
</ReviewPanelStateUpdaterFnsProvider>
|
|
</ReviewPanelStateValueProvider>
|
|
)
|
|
}
|
|
|
|
export function useReviewPanelStateValueContext() {
|
|
const context = useContext(ReviewPanelStateValueContext)
|
|
if (!context) {
|
|
throw new Error(
|
|
'ReviewPanelStateValueContext is only available inside ReviewPanelStateProvider'
|
|
)
|
|
}
|
|
return context
|
|
}
|
|
|
|
export function useReviewPanelStateUpdaterFnsContext() {
|
|
const context = useContext(ReviewPanelStateUpdaterFnsContext)
|
|
if (!context) {
|
|
throw new Error(
|
|
'ReviewPanelStateUpdaterFnsContext is only available inside ReviewPanelStateProvider'
|
|
)
|
|
}
|
|
return context
|
|
}
|