Merge pull request #3246 from ingef/fix-open-close-folders

Fix open / close of folders using the new resizable panels
ingef · Dec 11, 2023 · 61a48cb · 61a48cb
2 parents 8ea09ea + c9ee56d
commit 61a48cb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/frontend/src/js/common/ResizeHandle.tsx b/frontend/src/js/common/ResizeHandle.tsx
@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { CSSProperties } from "react";
 import { PanelResizeHandle } from "react-resizable-panels";
 
 const SxPanelResizeHandle = styled(PanelResizeHandle)`
@@ -33,9 +34,15 @@ const Line = styled("div")`
   background-color: ${({ theme }) => theme.col.grayMediumLight};
 `;
 
-export const ResizeHandle = ({ disabled }: { disabled?: boolean }) => {
+export const ResizeHandle = ({
+  style,
+  disabled,
+}: {
+  style?: CSSProperties;
+  disabled?: boolean;
+}) => {
   return (
-    <SxPanelResizeHandle disabled={disabled}>
+    <SxPanelResizeHandle style={style} disabled={disabled}>
       <Handle>
         <Line />
       </Handle>

diff --git a/frontend/src/js/previous-queries/list/ProjectItemsTab.tsx b/frontend/src/js/previous-queries/list/ProjectItemsTab.tsx
@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -107,6 +107,11 @@ const ProjectItemsTab = ({ datasetId }: PropsT) => {
 
   const { items, loading } = useProjectItems({ datasetId });
 
+  const collapsedStyles = useMemo(
+    () => (areFoldersOpen ? {} : { display: "none" }),
+    [areFoldersOpen],
+  );
+
   return (
     <>
       <Row>
@@ -120,21 +125,12 @@ const ProjectItemsTab = ({ datasetId }: PropsT) => {
         )}
       </Row>
       <FoldersAndQueries>
-        <PanelGroup
-          direction="horizontal"
-          // size={leftPaneSize}
-          // onDragFinished={(newSize) => setLeftPaneSize(newSize)}
-          // resizerStyle={{
-          //   zIndex: 0, // To set below overlaying dropdowns
-          //   marginTop: "46px",
-          //   display: areFoldersOpen ? "inherit" : "none",
-          // }}
-        >
-          <Panel minSize={10} maxSize={75} defaultSize={25}>
+        <PanelGroup direction="horizontal">
+          <Panel key="left" defaultSize={25} style={collapsedStyles}>
             <SxFolders />
           </Panel>
-          <ResizeHandle />
-          <Panel>
+          <ResizeHandle style={collapsedStyles} />
+          <Panel key="right">
             <Expand areFoldersOpen={areFoldersOpen}>
               <Filters>
                 <SxProjectItemsTypeFilter />