overleaf/services/web/frontend/js/features/outline/components/outline-item.js
Mathias Jakobsen 81e2265e72 Merge pull request #10397 from overleaf/td-memoize-file-outline
Memoize file outline

GitOrigin-RevId: cb086bab2b6ead251362180d776e7eaff18fc639
2022-11-15 09:05:12 +00:00

119 lines
3.6 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 { useTranslation } from 'react-i18next'
import OutlineList from './outline-list'
import Icon from '../../../shared/components/icon'
const OutlineItem = memo(function OutlineItem({
outlineItem,
jumpToLine,
highlightedLine,
matchesHighlightedLine,
containsHighlightedLine,
}) {
const { t } = useTranslation()
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 handleExpandCollapseClick() {
setExpanded(!expanded)
}
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}
role="treeitem"
aria-current={isHighlighted}
aria-label={outlineItem.title}
>
<div className="outline-item-row">
{outlineItem.children ? (
<button
className="outline-item-expand-collapse-btn"
onClick={handleExpandCollapseClick}
aria-label={expanded ? t('collapse') : t('expand')}
>
<Icon
type={expanded ? 'angle-down' : 'angle-right'}
className="outline-caret-icon"
/>
</button>
) : null}
<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