overleaf/services/web/frontend/js/shared/hooks/use-expand-collapse.js

65 lines
1.5 KiB
JavaScript
Raw Normal View History

import { useRef, useState, useLayoutEffect } from 'react'
import classNames from 'classnames'
function useExpandCollapse({
initiallyExpanded = false,
collapsedSize = '0',
dimension = 'height',
classes = {}
} = {}) {
const ref = useRef()
const [isExpanded, setIsExpanded] = useState(initiallyExpanded)
const [sizing, setSizing] = useState({
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