overleaf/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx

55 lines
1.5 KiB
TypeScript
Raw Normal View History

import React from 'react'
import { Panel, PanelGroup } from 'react-resizable-panels'
import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
import { FileTree } from '@/features/ide-react/components/file-tree'
import {
FileTreeDeleteHandler,
FileTreeSelectHandler,
} from '@/features/ide-react/types/file-tree'
import classNames from 'classnames'
type EditorSidebarProps = {
shouldShow: boolean
shouldPersistLayout: boolean
onFileTreeInit: () => void
onFileTreeSelect: FileTreeSelectHandler
onFileTreeDelete: FileTreeDeleteHandler
}
export default function EditorSidebar({
shouldShow,
shouldPersistLayout,
onFileTreeInit,
onFileTreeSelect,
onFileTreeDelete,
}: EditorSidebarProps) {
return (
<>
<aside
className={classNames('ide-react-editor-sidebar', {
hidden: !shouldShow,
})}
>
<PanelGroup
autoSaveId={
shouldPersistLayout ? 'ide-react-editor-sidebar-layout' : undefined
}
direction="vertical"
>
<Panel defaultSize={75} className="ide-react-file-tree-panel">
<FileTree
onInit={onFileTreeInit}
onSelect={onFileTreeSelect}
onDelete={onFileTreeDelete}
/>
</Panel>
<VerticalResizeHandle />
<Panel defaultSize={25}>
<div className="outline-container" />
</Panel>
</PanelGroup>
</aside>
</>
)
}