From 6c73a1d38a173045bf2e74f123a04b6a913501e8 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Wed, 20 Dec 2023 11:54:02 +0000 Subject: [PATCH] [ide-react] Remove useFixedSizeColumn (#16299) GitOrigin-RevId: 7cee1e153d5ae3d15250097dc87f430f4e799957 --- .../components/layout/main-layout.tsx | 9 +-- .../features/ide-react/hooks/use-chat-pane.ts | 3 - .../ide-react/hooks/use-fixed-size-column.ts | 56 ------------------- .../ide-react/hooks/use-sidebar-pane.ts | 3 - 4 files changed, 1 insertion(+), 70 deletions(-) delete mode 100644 services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx index 8dcd65a4cc..b874640898 100644 --- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx +++ b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx @@ -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 = () => { { - + {view === 'history' ? ( diff --git a/services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts b/services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts index 6f0c7ce89f..0c6d816181 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts +++ b/services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts @@ -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(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, diff --git a/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts b/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts deleted file mode 100644 index 938ad8a2fd..0000000000 --- a/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts +++ /dev/null @@ -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 -) { - const fixedPanelSizeRef = useRef(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 -} diff --git a/services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts b/services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts index a6ea3c4709..928b8fb156 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts +++ b/services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts @@ -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(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,