github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

[ide-react] Remove useFixedSizeColumn (#16299)

Browse source 
GitOrigin-RevId: 7cee1e153d5ae3d15250097dc87f430f4e799957
This commit is contained in:
Alf Eaton 2023-12-20 11:54:02 +00:00 committed by Copybot
parent 5c6b8ec015
commit 6c73a1d38a
4 changed files with 1 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
View file

@ -24,7 +24,6 @@ export const MainLayout: FC = () => {
isOpen: sidebarIsOpen,
setIsOpen: setSidebarIsOpen,
panelRef: sidebarPanelRef,
handleLayout: handleSidebarLayout,
togglePane: toggleSidebar,
handlePaneExpand: handleSidebarExpand,
handlePaneCollapse: handleSidebarCollapse,
@ -35,7 +34,6 @@ export const MainLayout: FC = () => {
const {
isOpen: chatIsOpen,
panelRef: chatPanelRef,
handleLayout: handleChatLayout,
togglePane: toggleChat,
resizing: chatResizing,
setResizing: setChatResizing,
@ -57,7 +55,6 @@ export const MainLayout: FC = () => {
<PanelGroup
autoSaveId="ide-outer-layout"
direction="horizontal"
onLayout={handleSidebarLayout}
className={classNames({
'ide-panel-group-resizing': sidebarResizing || chatResizing,
})}
@ -94,11 +91,7 @@ export const MainLayout: FC = () => {
</HorizontalResizeHandle>
<Panel id="panel-outer-main" order={2}>
<PanelGroup
autoSaveId="ide-inner-layout"
direction="horizontal"
onLayout={handleChatLayout}
>
<PanelGroup autoSaveId="ide-inner-layout" direction="horizontal">
<Panel className="ide-react-panel" id="panel-main" order={1}>
{view === 'history' ? (
<HistoryProvider>

3
services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts
View file

@ -1,5 +1,4 @@
import { useLayoutContext } from '@/shared/context/layout-context'
import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
import { useCallback, useRef, useState } from 'react'
import { ImperativePanelHandle } from 'react-resizable-panels'
@ -9,7 +8,6 @@ export const useChatPane = () => {
const [resizing, setResizing] = useState(false)
const panelRef = useRef<ImperativePanelHandle>(null)
const handleLayout = useFixedSizeColumn(isOpen, panelRef)
useCollapsiblePanel(isOpen, panelRef)
const togglePane = useCallback(() => {
@ -27,7 +25,6 @@ export const useChatPane = () => {
return {
isOpen,
panelRef,
handleLayout,
resizing,
setResizing,
togglePane,

56
services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts
View file

@ -1,56 +0,0 @@
import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
import {
ImperativePanelHandle,
PanelGroupOnLayout,
} from 'react-resizable-panels'
export default function useFixedSizeColumn(
isOpen: boolean,
fixedPanelRef: RefObject<ImperativePanelHandle>
) {
const fixedPanelSizeRef = useRef<number>(0)
const [initialLayoutDone, setInitialLayoutDone] = useState(false)
const handleLayout: PanelGroupOnLayout = useCallback(() => {
if (fixedPanelRef.current) {
fixedPanelSizeRef.current = fixedPanelRef.current.getSize()
setInitialLayoutDone(true)
}
}, [fixedPanelRef])
useEffect(() => {
if (!isOpen) {
return
}
// Only start watching for resizes once the initial layout is done,
// otherwise we could measure the fixed column while it has zero width and
// collapse it
if (!initialLayoutDone || !fixedPanelRef.current) {
return
}
const fixedPanelElement = document.querySelector(
`[data-panel-id="${fixedPanelRef.current.getId()}"]`
)
if (!fixedPanelElement) {
return
}
const panelGroupElement = fixedPanelElement.closest('[data-panel-group]')
if (!panelGroupElement) {
return
}
const resizeObserver = new ResizeObserver(() => {
// when the panel group resizes, set the size of this panel to the previous size, in pixels
fixedPanelRef.current?.resize(fixedPanelSizeRef.current)
})
resizeObserver.observe(panelGroupElement)
return () => resizeObserver.unobserve(panelGroupElement)
}, [fixedPanelRef, initialLayoutDone, isOpen])
return handleLayout
}

3
services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts
View file

@ -1,5 +1,4 @@
import { useCallback, useRef, useState } from 'react'
import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
import { ImperativePanelHandle } from 'react-resizable-panels'
@ -7,7 +6,6 @@ export const useSidebarPane = () => {
const [isOpen, setIsOpen] = useState(true)
const [resizing, setResizing] = useState(false)
const panelRef = useRef<ImperativePanelHandle>(null)
const handleLayout = useFixedSizeColumn(isOpen, panelRef)
useCollapsiblePanel(isOpen, panelRef)
const togglePane = useCallback(() => {
@ -26,7 +24,6 @@ export const useSidebarPane = () => {
isOpen,
setIsOpen,
panelRef,
handleLayout,
togglePane,
handlePaneExpand,
handlePaneCollapse,