mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
4e74fb2694
* Ordering of log entries in the new errors UI * Don't show the expand-collapse widget when not needed; smaller font size in the raw log output * Expose log actions in the log pane. * Use "This project" instead of "Your project" in the new errors UI * Better handling of long log messages; left-ellipsize the file/line number button * Make log location more button-like; add tooltip when needed. * Add a PDF expand button to the toolbar. * Add a stop compilation button to the new compile UI * Use aria-label for button accessible text; improve handling of long filenames in the log location button * Set max-height correctly for the logs pane dropdown * Avoid changing raw logs sizing when expanded and collapsed * Add comment on the solution for right-to-left text and ellipsis * Improve logs pane actions GitOrigin-RevId: 4098d77a9ee6d333644906876b9ff27035b79319
67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
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]
|
|
)
|
|
|
|
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
|