mirror of
https://github.com/overleaf/overleaf.git
synced 2025-03-04 06:31:10 +00:00
23593f8650
* Defer script loading * Refactor loading * Wait for project:joined * Only mount IdePage once everything has connected * Add useConnectionState hook and comments * Remove placeholder components * Move props into EditorAndSidebar * Move props into MainLayout * Tidy editor and sidebar components * Lazy-load the symbol palette pane and separate the loading pane GitOrigin-RevId: 4b721a06d6aba0ae0ec91768e6a6e29cf15e2083
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
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
|
|
onFileTreeInit: () => void
|
|
onFileTreeSelect: FileTreeSelectHandler
|
|
onFileTreeDelete: FileTreeDeleteHandler
|
|
}
|
|
|
|
export default function EditorSidebar({
|
|
shouldShow = false,
|
|
onFileTreeInit,
|
|
onFileTreeSelect,
|
|
onFileTreeDelete,
|
|
}: EditorSidebarProps) {
|
|
return (
|
|
<aside
|
|
className={classNames('ide-react-editor-sidebar', {
|
|
hidden: !shouldShow,
|
|
})}
|
|
>
|
|
<PanelGroup
|
|
autoSaveId="ide-react-editor-sidebar-layout"
|
|
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>
|
|
)
|
|
}
|