mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-09 12:13:41 -05:00
c443322a41
GitOrigin-RevId: 299ed9d568650ce37edba87643112d1cd6d12fd4
108 lines
3.4 KiB
JavaScript
108 lines
3.4 KiB
JavaScript
import { useState, useEffect, useRef, memo } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
|
|
import classNames from 'classnames'
|
|
import OutlineList from './outline-list'
|
|
import { OutlineItemToggleButton } from '@/features/outline/components/outline-item-toggle-button'
|
|
|
|
const OutlineItem = memo(function OutlineItem({
|
|
outlineItem,
|
|
jumpToLine,
|
|
highlightedLine,
|
|
matchesHighlightedLine,
|
|
containsHighlightedLine,
|
|
}) {
|
|
const [expanded, setExpanded] = useState(true)
|
|
const titleElementRef = useRef()
|
|
const isHighlightedRef = useRef(false)
|
|
|
|
const mainItemClasses = classNames('outline-item', {
|
|
'outline-item-no-children': !outlineItem.children,
|
|
})
|
|
|
|
const hasHighlightedChild = !expanded && containsHighlightedLine
|
|
const isHighlighted = matchesHighlightedLine || hasHighlightedChild
|
|
|
|
const itemLinkClasses = classNames('outline-item-link', {
|
|
'outline-item-link-highlight': isHighlighted,
|
|
})
|
|
|
|
function handleOutlineItemLinkClick(event) {
|
|
const syncToPdf = event.detail === 2 // double-click = sync to PDF
|
|
jumpToLine(outlineItem.line, syncToPdf)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const wasHighlighted = isHighlightedRef.current
|
|
isHighlightedRef.current = isHighlighted
|
|
|
|
if (!wasHighlighted && isHighlighted) {
|
|
scrollIntoViewIfNeeded(titleElementRef.current, {
|
|
scrollMode: 'if-needed',
|
|
block: 'center',
|
|
})
|
|
}
|
|
}, [isHighlighted, titleElementRef, isHighlightedRef])
|
|
|
|
// don't set the aria-expanded attribute when there are no children
|
|
const ariaExpandedValue = outlineItem.children ? expanded : undefined
|
|
|
|
return (
|
|
<li
|
|
className={mainItemClasses}
|
|
aria-expanded={ariaExpandedValue}
|
|
// FIXME
|
|
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
role="treeitem"
|
|
aria-current={isHighlighted}
|
|
aria-label={outlineItem.title}
|
|
>
|
|
<div className="outline-item-row">
|
|
{!!outlineItem.children && (
|
|
<OutlineItemToggleButton
|
|
expanded={expanded}
|
|
setExpanded={setExpanded}
|
|
/>
|
|
)}
|
|
<button
|
|
className={itemLinkClasses}
|
|
onClick={handleOutlineItemLinkClick}
|
|
ref={titleElementRef}
|
|
>
|
|
{outlineItem.title}
|
|
</button>
|
|
</div>
|
|
{expanded && outlineItem.children ? (
|
|
// highlightedLine is only provided to this list if the list contains
|
|
// the highlighted line. This means that whenever the list does not
|
|
// contain the highlighted line, the props provided to it are the same
|
|
// and the component can be memoized.
|
|
<OutlineList
|
|
outline={outlineItem.children}
|
|
jumpToLine={jumpToLine}
|
|
isRoot={false}
|
|
highlightedLine={containsHighlightedLine ? highlightedLine : null}
|
|
containsHighlightedLine={containsHighlightedLine}
|
|
/>
|
|
) : null}
|
|
</li>
|
|
)
|
|
})
|
|
|
|
OutlineItem.propTypes = {
|
|
outlineItem: PropTypes.exact({
|
|
line: PropTypes.number.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
level: PropTypes.number,
|
|
children: PropTypes.array,
|
|
// Used for caching in CM6
|
|
from: PropTypes.number,
|
|
to: PropTypes.number,
|
|
}).isRequired,
|
|
jumpToLine: PropTypes.func.isRequired,
|
|
highlightedLine: PropTypes.number,
|
|
matchesHighlightedLine: PropTypes.bool,
|
|
containsHighlightedLine: PropTypes.bool,
|
|
}
|
|
|
|
export default OutlineItem
|