overleaf/services/web/frontend/js/features/review-panel-new/hooks/use-review-panel-styles.ts
Alf Eaton e61eb1b220 Merge pull request #20008 from overleaf/ae-review-panel-empty-state
Improve calculations of empty state, mini state and sizes variables in review panel

GitOrigin-RevId: 41bcb3b67c9f0019c11b4de0e4590b0407e04e66
2024-08-22 14:01:16 +00:00

54 lines
1.6 KiB
TypeScript

import { CSSProperties, useCallback, useEffect, useState } from 'react'
import { useCodeMirrorViewContext } from '@/features/source-editor/components/codemirror-editor'
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
}