overleaf/services/web/frontend/js/shared/hooks/use-expand-collapse.ts
ilkin-overleaf d959dbc236 Merge pull request #11105 from overleaf/ii-shared-hooks-js-to-ts-conversion
[web] Shared React hooks JS to TS conversion

GitOrigin-RevId: 0ccdebff236c7424b1a73cd7d6646a9d01a20eb1
2023-01-10 09:05:52 +00:00

67 lines
1.7 KiB
TypeScript

import { useRef, useState, useLayoutEffect } from 'react'
import classNames from 'classnames'
function useExpandCollapse({
initiallyExpanded = false,
collapsedSize = 0,
dimension = 'height',
classes = { container: '', containerCollapsed: '' },
} = {}) {
const ref = useRef<{ scrollHeight: number; scrollWidth: number }>()
const [isExpanded, setIsExpanded] = useState(initiallyExpanded)
const [sizing, setSizing] = useState<{
size: number | null
needsExpandCollapse: boolean | null
}>({
size: null,
needsExpandCollapse: null,
})
useLayoutEffect(() => {
const expandCollapseEl = ref.current
if (expandCollapseEl) {
const expandedSize =
dimension === 'height'
? expandCollapseEl.scrollHeight
: expandCollapseEl.scrollWidth
const needsExpandCollapse = expandedSize > collapsedSize
if (isExpanded) {
setSizing({ size: expandedSize, needsExpandCollapse })
} else {
setSizing({
size: needsExpandCollapse ? collapsedSize : expandedSize,
needsExpandCollapse,
})
}
}
}, [isExpanded, collapsedSize, dimension])
const expandableClasses = classNames(
'expand-collapse-container',
classes.container,
!isExpanded ? classes.containerCollapsed : null
)
function handleToggle() {
setIsExpanded(!isExpanded)
}
return {
isExpanded,
needsExpandCollapse: sizing.needsExpandCollapse,
expandableProps: {
ref,
style: {
[dimension === 'height' ? 'height' : 'width']: `${sizing.size}px`,
},
className: expandableClasses,
},
toggleProps: {
onClick: handleToggle,
},
}
}
export default useExpandCollapse