mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-15 14:40:59 -05:00
c6633632d6
GitOrigin-RevId: 8425454a75ff8160a03fda1be5bda2242b41f6cd
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { CSSProperties, useCallback, useEffect, useState } from 'react'
|
|
import { useCodeMirrorViewContext } from '@/features/source-editor/components/codemirror-context'
|
|
|
|
export const useReviewPanelStyles = (mini: boolean) => {
|
|
const view = useCodeMirrorViewContext()
|
|
const [styles, setStyles] = useState<CSSProperties>()
|
|
|
|
const updateScrollDomVariables = useCallback((element: HTMLDivElement) => {
|
|
const { top, bottom } = element.getBoundingClientRect()
|
|
|
|
setStyles(value => ({
|
|
...value,
|
|
'--review-panel-top': `${top}px`,
|
|
'--review-panel-bottom': `${bottom}px`,
|
|
}))
|
|
}, [])
|
|
|
|
const updateContentDomVariables = useCallback((element: HTMLDivElement) => {
|
|
const { height } = element.getBoundingClientRect()
|
|
|
|
setStyles(value => ({
|
|
...value,
|
|
'--review-panel-height': `${height}px`,
|
|
}))
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
setStyles(value => ({
|
|
...value,
|
|
'--review-panel-width': mini ? '22px' : '230px',
|
|
}))
|
|
}, [mini])
|
|
|
|
useEffect(() => {
|
|
if ('ResizeObserver' in window) {
|
|
const scrollDomObserver = new window.ResizeObserver(entries =>
|
|
updateScrollDomVariables(entries[0]?.target as HTMLDivElement)
|
|
)
|
|
scrollDomObserver.observe(view.scrollDOM)
|
|
|
|
const contentDomObserver = new window.ResizeObserver(entries =>
|
|
updateContentDomVariables(entries[0]?.target as HTMLDivElement)
|
|
)
|
|
contentDomObserver.observe(view.contentDOM)
|
|
|
|
return () => {
|
|
scrollDomObserver.disconnect()
|
|
contentDomObserver.disconnect()
|
|
}
|
|
}
|
|
}, [view, updateScrollDomVariables, updateContentDomVariables])
|
|
|
|
return styles
|
|
}
|