overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.jsx
Alf Eaton e9dbaf20b8 Wrap useResizeObserver dependency in useCallback (#16972)
GitOrigin-RevId: fd4a10a2897878361a87bb02c5c6e8e6abfa8f26
2024-02-12 09:03:11 +00:00

71 lines
1.9 KiB
JavaScript

import { useCallback, useState } from 'react'
import { useResizeObserver } from '../../../shared/hooks/use-resize-observer'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'
import { Button } from 'react-bootstrap'
import Icon from '../../../shared/components/icon'
import PropTypes from 'prop-types'
export default function PdfLogEntryRawContent({
rawContent,
collapsedSize = 0,
}) {
const [expanded, setExpanded] = useState(false)
const [needsExpander, setNeedsExpander] = useState(false)
const { elementRef } = useResizeObserver(
useCallback(
element => {
setNeedsExpander(element.scrollHeight > collapsedSize)
},
[collapsedSize]
)
)
const { t } = useTranslation()
return (
<div className="log-entry-content-raw-container">
<div
className="expand-collapse-container"
style={{
height: expanded || !needsExpander ? 'auto' : collapsedSize,
}}
>
<pre className="log-entry-content-raw" ref={elementRef}>
{rawContent.trim()}
</pre>
</div>
{needsExpander && (
<div
className={classNames('log-entry-content-button-container', {
'log-entry-content-button-container-collapsed': !expanded,
})}
>
<Button
bsSize="xs"
bsStyle={null}
className="log-entry-btn-expand-collapse btn-secondary"
onClick={() => setExpanded(value => !value)}
>
{expanded ? (
<>
<Icon type="angle-up" /> {t('collapse')}
</>
) : (
<>
<Icon type="angle-down" /> {t('expand')}
</>
)}
</Button>
</div>
)}
</div>
)
}
PdfLogEntryRawContent.propTypes = {
rawContent: PropTypes.string.isRequired,
collapsedSize: PropTypes.number,
}