mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
ea1fc5f74e
* React IDE page shell * Set the maximum height of the symbol palette to 336px * Tidy export * Remove unnecessary destructuring * Update comment * Optimize toggle Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> * Change snap-to-collapse threshold to 5% * Synchronize left column width between history and editor views and remove duplication in ide-page * Replace resizer dots with SVG * Rermove unnecessary import and comment the remaining ones * Use block prepend to avoid duplication * Improve vertical content divider styling * Implement fixed width during container resize on left column * Change IDE page file extension * Refactor fixed-size panel into a hook and use for chat panel --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> GitOrigin-RevId: aa881e48a2838a192b6f8f9e16e561f5cd706bd3
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import React, { ReactNode, useEffect } from 'react'
|
|
import { Panel, PanelGroup } from 'react-resizable-panels'
|
|
import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
|
|
import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
|
|
import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
|
|
|
|
type TwoColumnMainContentProps = {
|
|
leftColumnId: string
|
|
leftColumnContent: ReactNode
|
|
leftColumnDefaultSize: number
|
|
setLeftColumnDefaultSize: React.Dispatch<React.SetStateAction<number>>
|
|
rightColumnContent: ReactNode
|
|
leftColumnIsOpen: boolean
|
|
setLeftColumnIsOpen: (
|
|
leftColumnIsOpen: TwoColumnMainContentProps['leftColumnIsOpen']
|
|
) => void
|
|
shouldPersistLayout?: boolean
|
|
}
|
|
|
|
export default function TwoColumnMainContent({
|
|
leftColumnId,
|
|
leftColumnContent,
|
|
leftColumnDefaultSize,
|
|
setLeftColumnDefaultSize,
|
|
rightColumnContent,
|
|
leftColumnIsOpen,
|
|
setLeftColumnIsOpen,
|
|
shouldPersistLayout = false,
|
|
}: TwoColumnMainContentProps) {
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
fixedPanelRef: leftColumnPanelRef,
|
|
fixedPanelWidthRef: leftColumnWidthRef,
|
|
handleLayout,
|
|
} = useFixedSizeColumn(leftColumnDefaultSize, leftColumnIsOpen)
|
|
|
|
useCollapsiblePanel(leftColumnIsOpen, leftColumnPanelRef)
|
|
|
|
// Update the left column default size on unmount rather than doing it on
|
|
// every resize, which causes ResizeObserver errors
|
|
useEffect(() => {
|
|
if (leftColumnWidthRef.current) {
|
|
setLeftColumnDefaultSize(leftColumnWidthRef.current.size)
|
|
}
|
|
}, [leftColumnWidthRef, setLeftColumnDefaultSize])
|
|
|
|
return (
|
|
<PanelGroup
|
|
autoSaveId={
|
|
shouldPersistLayout ? 'ide-react-main-content-layout' : undefined
|
|
}
|
|
direction="horizontal"
|
|
onLayout={handleLayout}
|
|
>
|
|
<Panel
|
|
ref={leftColumnPanelRef}
|
|
defaultSize={leftColumnDefaultSize}
|
|
minSize={5}
|
|
collapsible
|
|
onCollapse={collapsed => setLeftColumnIsOpen(!collapsed)}
|
|
>
|
|
{leftColumnIsOpen ? leftColumnContent : null}
|
|
</Panel>
|
|
<HorizontalResizeHandle>
|
|
<HorizontalToggler
|
|
id={leftColumnId}
|
|
togglerType="west"
|
|
isOpen={leftColumnIsOpen}
|
|
setIsOpen={isOpen => setLeftColumnIsOpen(isOpen)}
|
|
tooltipWhenOpen={t('tooltip_hide_filetree')}
|
|
tooltipWhenClosed={t('tooltip_show_filetree')}
|
|
/>
|
|
</HorizontalResizeHandle>
|
|
<Panel>{rightColumnContent}</Panel>
|
|
</PanelGroup>
|
|
)
|
|
}
|