overleaf/services/web/frontend/js/features/outline/components/outline-item.jsx
Alf Eaton c443322a41 Memoize FileTree and outline toggle button components (#16776)
GitOrigin-RevId: 299ed9d568650ce37edba87643112d1cd6d12fd4
2024-02-02 09:03:08 +00:00

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