refactor(frontend): smoother search panel resizing

Install the resize detector to the whole editor are so that the search panel knows its weight as soon as it is installed.
graphs4value · Nov 23, 2024 · c99595e · c99595e
1 parent 78f0407
commit c99595e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -10,6 +10,7 @@ import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
 import { useRootStore } from '../RootStoreProvider';
 
@@ -38,9 +39,10 @@ function EditorLoading(): JSX.Element {
 
 export default observer(function EditorPane(): JSX.Element {
   const { editorStore } = useRootStore();
+  const { width, ref } = useResizeDetector();
 
   return (
-    <Stack direction="column" height="100%" overflow="auto">
+    <Stack direction="column" height="100%" overflow="auto" ref={ref}>
       <Toolbar
         variant="dense"
         sx={{
@@ -62,7 +64,7 @@ export default observer(function EditorPane(): JSX.Element {
           <>
             <AnalysisErrorNotification editorStore={editorStore} />
             <ConnectionStatusNotification editorStore={editorStore} />
-            <SearchPanelPortal editorStore={editorStore} />
+            <SearchPanelPortal editorStore={editorStore} width={width} />
             <EditorArea editorStore={editorStore} />
           </>
         )}

diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -12,8 +12,10 @@ import SearchToolbar from './SearchToolbar';
 
 export default observer(function SearchPanelPortal({
   editorStore: { searchPanel: searchPanelStore },
+  width,
 }: {
   editorStore: EditorStore;
+  width: number | undefined;
 }): JSX.Element | null {
   const { element: searchPanelContainer } = searchPanelStore;
 
@@ -22,7 +24,7 @@ export default observer(function SearchPanelPortal({
   }
   return (
     <Portal container={searchPanelContainer}>
-      <SearchToolbar searchPanelStore={searchPanelStore} />
+      <SearchToolbar searchPanelStore={searchPanelStore} width={width} />
     </Portal>
   );
 });
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -20,7 +20,6 @@ import Toolbar from '@mui/material/Toolbar';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
 
 import Tooltip from '../Tooltip';
 
@@ -36,15 +35,16 @@ const DimLabel = styled(FormControlLabel)(({ theme }) => ({
 
 export default observer(function SearchToolbar({
   searchPanelStore,
+  width,
 }: {
   searchPanelStore: SearchPanelStore;
+  width: number | undefined;
 }): JSX.Element {
   const {
     id: panelId,
     query: { search, valid, caseSensitive, literal, regexp, replace },
     invalidRegexp,
   } = searchPanelStore;
-  const { width, ref } = useResizeDetector();
   const split = width !== undefined && width <= 1200;
   const [showRepalceState, setShowReplaceState] = useState(false);
 
@@ -68,7 +68,6 @@ export default observer(function SearchToolbar({
         alignItems: 'center',
         minHeight: 'auto',
       }}
-      ref={ref}
     >
       <Stack
         direction={split ? 'column' : 'row'}