50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Panel, PanelGroup } from 'react-resizable-panels'
|
|
import { FileTree } from '@/features/ide-react/components/file-tree'
|
|
import { OutlineContainer } from '@/features/outline/components/outline-container'
|
|
import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
|
|
import { useOutlinePane } from '@/features/ide-react/hooks/use-outline-pane'
|
|
import useCollapsibleFileTree from '../hooks/use-collapsible-file-tree'
|
|
import classNames from 'classnames'
|
|
|
|
function FileTreeOutlinePanel() {
|
|
const { outlineEnabled, outlinePanelRef } = useOutlinePane()
|
|
const { fileTreeExpanded, fileTreePanelRef } = useCollapsibleFileTree()
|
|
|
|
return (
|
|
<PanelGroup
|
|
className="file-tree-outline-panel-group"
|
|
autoSaveId="ide-redesign-file-tree-outline"
|
|
direction="vertical"
|
|
>
|
|
<Panel
|
|
className={classNames('file-tree-panel', {
|
|
'file-tree-panel-collapsed': !fileTreeExpanded,
|
|
})}
|
|
defaultSize={50}
|
|
id="ide-redesign-file-tree"
|
|
order={1}
|
|
collapsible
|
|
ref={fileTreePanelRef}
|
|
>
|
|
<FileTree />
|
|
</Panel>
|
|
<VerticalResizeHandle
|
|
hitAreaMargins={{ coarse: 0, fine: 0 }}
|
|
disabled={!outlineEnabled || !fileTreeExpanded}
|
|
/>
|
|
<Panel
|
|
className="file-outline-panel"
|
|
defaultSize={50}
|
|
id="ide-redesign-file-outline"
|
|
order={2}
|
|
collapsible
|
|
ref={outlinePanelRef}
|
|
>
|
|
<OutlineContainer />
|
|
</Panel>
|
|
</PanelGroup>
|
|
)
|
|
}
|
|
|
|
export default FileTreeOutlinePanel
|