overleaf/services/web/frontend/js/features/outline/components/outline-pane.tsx

64 lines
1.5 KiB
TypeScript
Raw Normal View History

import React, { useEffect } from 'react'
import classNames from 'classnames'
import OutlineRoot from './outline-root'
import withErrorBoundary from '../../../infrastructure/error-boundary'
import { OutlineToggleButton } from '@/features/outline/components/outline-toggle-button'
const OutlinePane = React.memo<{
isTexFile: boolean
outline: any[]
jumpToLine(line: number): void
onToggle(value: boolean): void
eventTracking: any
highlightedLine?: number
show: boolean
isPartial?: boolean
expanded?: boolean
toggleExpanded: () => void
}>(function OutlinePane({
isTexFile,
outline,
jumpToLine,
onToggle,
highlightedLine,
isPartial = false,
expanded,
toggleExpanded,
}) {
const isOpen = Boolean(isTexFile && expanded)
useEffect(() => {
onToggle(isOpen)
}, [isOpen, onToggle])
const headerClasses = classNames('outline-pane', {
'outline-pane-disabled': !isTexFile,
})
return (
<div className={headerClasses}>
<header className="outline-header">
<OutlineToggleButton
toggleExpanded={toggleExpanded}
expanded={expanded}
isOpen={isOpen}
isPartial={isPartial}
isTexFile={isTexFile}
/>
</header>
{isOpen && (
<div className="outline-body">
<OutlineRoot
outline={outline}
jumpToLine={jumpToLine}
highlightedLine={highlightedLine}
/>
</div>
)}
</div>
)
})
export default withErrorBoundary(OutlinePane)