mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:36:00 -05:00
30860ae9f9
* [web] Migrate Logs components JSX to Bootstrap 5 * [web] Migrate logs.less to logs.scss * [web] Remove unused class names * [storybook] Define default Bootstrap version in Storybook This prevents some warning in the console * [storybook] Update pdf-preview.stories.jsx * [storybook] Add pdf-log-entry.stories.tsx * [storybook] Force re-renders when switching BS version * [web] Keep files dropdown menu in bounds * [web] Make files dropdown items not bold in BS5 * [web] Revert unrelated change * [web] Fixup PreviewLogsPaneMaxEntries * [web] Add style for log-entry-content-link * [web] Replace log-entry by OLNotification in `PdfCodeCheckFailedNotice` * [web] Use `BootstrapVersionSwitcher` instead of `isBootstrap5` * [web] Rename `DropdownBS3` to `BS3Dropdown` * [web] Reuse variables for `toolbar-height` and `toolbar-small-height` * [web] Set `id` on `DropdownToggle` not `Dropdown` * [web] Set `log-entry-btn-expand-collapse` in BS3 only * [web] Remove `block: true` from StartFreeTrialButton in BS3 * [web] Remove unnecessary CSS in `.log-entry-header-link` * [web] Use semantic color names * Migrate the downloadable pdf file list to Bootstrap 5 * Remove nested BootstrapVersionSwitcher, fix "key" prop * Update roles to: `<li role="menuitem">` `<a role="link">` * Update `log-entry-header-link`: variant ghost and fix colors --------- Co-authored-by: Rebeka <o.dekany@gmail.com> GitOrigin-RevId: 89848970ab5d8a8c135335386caf24363f69a34c
75 lines
2.1 KiB
JavaScript
75 lines
2.1 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 OLButton from '@/features/ui/components/ol/ol-button'
|
|
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(true)
|
|
|
|
const { elementRef } = useResizeObserver(
|
|
useCallback(
|
|
element => {
|
|
if (element.scrollHeight === 0) return // skip update when logs-pane is closed
|
|
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,
|
|
})}
|
|
>
|
|
<OLButton
|
|
variant="secondary"
|
|
size="sm"
|
|
bs3Props={{
|
|
bsSize: 'xsmall',
|
|
className: 'log-entry-btn-expand-collapse',
|
|
}}
|
|
onClick={() => setExpanded(value => !value)}
|
|
>
|
|
{expanded ? (
|
|
<>
|
|
<Icon type="angle-up" /> {t('collapse')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Icon type="angle-down" /> {t('expand')}
|
|
</>
|
|
)}
|
|
</OLButton>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
PdfLogEntryRawContent.propTypes = {
|
|
rawContent: PropTypes.string.isRequired,
|
|
collapsedSize: PropTypes.number,
|
|
}
|