2023-12-15 04:19:42 -05:00
|
|
|
import React, { useEffect } from 'react'
|
2020-06-29 09:05:08 -04:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import classNames from 'classnames'
|
2020-11-30 07:09:51 -05:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2020-09-03 05:23:34 -04:00
|
|
|
|
2020-09-01 04:09:04 -04:00
|
|
|
import OutlineRoot from './outline-root'
|
2020-09-21 10:14:36 -04:00
|
|
|
import Icon from '../../../shared/components/icon'
|
2020-09-16 04:53:29 -04:00
|
|
|
import withErrorBoundary from '../../../infrastructure/error-boundary'
|
2022-11-08 11:45:19 -05:00
|
|
|
import Tooltip from '../../../shared/components/tooltip'
|
2020-06-29 09:05:08 -04:00
|
|
|
|
2021-06-21 06:02:38 -04:00
|
|
|
const OutlinePane = React.memo(function OutlinePane({
|
2020-07-16 10:04:04 -04:00
|
|
|
isTexFile,
|
|
|
|
outline,
|
|
|
|
jumpToLine,
|
|
|
|
onToggle,
|
2021-04-27 03:52:58 -04:00
|
|
|
highlightedLine,
|
2022-11-08 11:45:19 -05:00
|
|
|
isPartial = false,
|
2023-12-15 04:19:42 -05:00
|
|
|
expanded,
|
|
|
|
toggleExpanded,
|
2020-07-16 10:04:04 -04:00
|
|
|
}) {
|
2020-09-03 05:23:34 -04:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
2020-07-16 06:09:01 -04:00
|
|
|
const isOpen = isTexFile && expanded
|
|
|
|
|
2020-12-15 05:23:54 -05:00
|
|
|
useEffect(() => {
|
|
|
|
onToggle(isOpen)
|
2021-01-07 09:22:19 -05:00
|
|
|
}, [isOpen, onToggle])
|
2020-06-29 09:05:08 -04:00
|
|
|
|
|
|
|
const headerClasses = classNames('outline-pane', {
|
2021-04-27 03:52:58 -04:00
|
|
|
'outline-pane-disabled': !isTexFile,
|
2020-06-29 09:05:08 -04:00
|
|
|
})
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={headerClasses}>
|
|
|
|
<header className="outline-header">
|
|
|
|
<button
|
|
|
|
className="outline-header-expand-collapse-btn"
|
|
|
|
disabled={!isTexFile}
|
2023-12-15 04:19:42 -05:00
|
|
|
onClick={toggleExpanded}
|
2020-09-18 06:05:05 -04:00
|
|
|
aria-label={expanded ? t('hide_outline') : t('show_outline')}
|
2020-06-29 09:05:08 -04:00
|
|
|
>
|
2020-09-21 10:14:36 -04:00
|
|
|
<Icon
|
|
|
|
type={isOpen ? 'angle-down' : 'angle-right'}
|
2022-01-19 06:56:57 -05:00
|
|
|
className="outline-caret-icon"
|
2020-09-21 10:14:36 -04:00
|
|
|
/>
|
2020-09-03 05:23:34 -04:00
|
|
|
<h4 className="outline-header-name">{t('file_outline')}</h4>
|
2022-11-08 11:45:19 -05:00
|
|
|
{isPartial && (
|
|
|
|
<Tooltip
|
|
|
|
id="partial-outline"
|
|
|
|
description={t('partial_outline_warning')}
|
|
|
|
overlayProps={{ placement: 'top' }}
|
|
|
|
>
|
|
|
|
<span role="status">
|
|
|
|
<Icon
|
|
|
|
type="exclamation-triangle"
|
|
|
|
aria-label={t('partial_outline_warning')}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</Tooltip>
|
|
|
|
)}
|
2020-06-29 09:05:08 -04:00
|
|
|
</button>
|
|
|
|
</header>
|
2023-12-15 04:19:42 -05:00
|
|
|
{isOpen && (
|
2020-06-29 09:05:08 -04:00
|
|
|
<div className="outline-body">
|
2020-07-28 05:37:46 -04:00
|
|
|
<OutlineRoot
|
|
|
|
outline={outline}
|
|
|
|
jumpToLine={jumpToLine}
|
|
|
|
highlightedLine={highlightedLine}
|
|
|
|
/>
|
2020-06-29 09:05:08 -04:00
|
|
|
</div>
|
2023-12-15 04:19:42 -05:00
|
|
|
)}
|
2020-06-29 09:05:08 -04:00
|
|
|
</div>
|
|
|
|
)
|
2021-06-21 06:02:38 -04:00
|
|
|
})
|
2020-06-29 09:05:08 -04:00
|
|
|
|
|
|
|
OutlinePane.propTypes = {
|
|
|
|
isTexFile: PropTypes.bool.isRequired,
|
|
|
|
outline: PropTypes.array.isRequired,
|
2020-07-16 06:09:01 -04:00
|
|
|
jumpToLine: PropTypes.func.isRequired,
|
2020-09-25 04:40:19 -04:00
|
|
|
onToggle: PropTypes.func.isRequired,
|
2021-04-27 03:52:58 -04:00
|
|
|
highlightedLine: PropTypes.number,
|
2022-11-08 11:45:19 -05:00
|
|
|
isPartial: PropTypes.bool,
|
2023-12-15 04:19:42 -05:00
|
|
|
expanded: PropTypes.bool,
|
|
|
|
toggleExpanded: PropTypes.func.isRequired,
|
2020-06-29 09:05:08 -04:00
|
|
|
}
|
|
|
|
|
2020-09-16 04:53:29 -04:00
|
|
|
export default withErrorBoundary(OutlinePane)
|