wip

suitenumerique · Jan 28, 2025 · 1d785a3 · 1d785a3
1 parent 7907671
commit 1d785a3
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 42 deletions.
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
@@ -38,10 +38,12 @@
     "react-dom": "*",
     "react-i18next": "15.4.0",
     "react-intersection-observer": "9.13.1",
+    "react-resizable-panels": "^2.1.7",
     "react-select": "5.9.0",
     "sass": "^1.83.4",
     "styled-components": "6.1.13",
     "use-debounce": "10.0.4",
+    "use-resize-observer": "^9.1.0",
     "y-protocols": "1.0.6",
     "yjs": "13.6.21",
     "zustand": "5.0.2"

diff --git a/src/frontend/apps/impress/src/components/common/tree/TreeView.tsx b/src/frontend/apps/impress/src/components/common/tree/TreeView.tsx
@@ -27,7 +27,7 @@ const addAllChildren = <T,>(
   data: TreeViewDataType<T>[],
 ): TreeViewDataType<T>[] => {
   return data.map((item) => {
-    console.log('item', item);
+    // console.log('item', item);
     return {
       ...item,
       children: item.children ? addAllChildren(item.children) : [],
@@ -37,7 +37,7 @@ const addAllChildren = <T,>(
 
 export type TreeViewProps<T> = {
   data: TreeViewDataType<T>[];
-  width?: number;
+  width?: number | string;
   allCanBeFolder?: boolean;
 
   renderNode?: (node: TreeViewDataType<T>) => React.ReactNode;
@@ -262,7 +262,7 @@ export const Node = <T,>({
       })}
       style={{
         ...style,
-        width: `calc(100% + ${node.level * 20}px)`,
+        // width: `calc(100% + ${node.level * 20}px)`,
       }}
       ref={dragHandle}
     >

diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
@@ -1,4 +1,11 @@
-import { useState } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { useEffect, useRef, useState } from 'react';
+import {
+  ImperativePanelHandle,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from 'react-resizable-panels';
 import { css } from 'styled-components';
 import useResizeObserver from 'use-resize-observer';
 
@@ -138,16 +145,26 @@ const ItemTextCss = css`
   -webkit-box-orient: vertical;
 `;
 
+const MIN_WIDTH = 300;
+const MAX_WIDTH = 500;
 export const LeftPanelDocContent = () => {
-  const { ref, width, height } = useResizeObserver();
+  const leftPanelRef = useRef<ImperativePanelHandle>(null);
 
+  const { ref, width = 0, height = 1 } = useResizeObserver<HTMLDivElement>();
+  const {
+    ref: ref2,
+    width: width2 = 1,
+    height: height2 = 1,
+  } = useResizeObserver<HTMLDivElement>();
+  // const [width, setWidth] = useState(300);
+
+  const [isInit, setIsInit] = useState(false);
   const { currentDoc } = useDocStore();
   const { spacingsTokens } = useCunninghamTheme();
   const spacing = spacingsTokens();
   const [data, setData] = useState<TreeViewDataType<DataType>[]>(initialData);
 
   const loadChildren = async (node: TreeViewDataType<DataType>) => {
-    console.log('loading children', node);
     const children = await loadNodeChildren(node);
     const newData = [...data];
     const index = newData.findIndex((n) => n.id === node.id);
@@ -160,45 +177,112 @@ export const LeftPanelDocContent = () => {
     return newData;
   };
 
-  // if (!currentDoc) {
-  //   return null;
-  // }
+  const minSize = (MIN_WIDTH * 100) / window.innerWidth;
+  const maxSize = (MAX_WIDTH * 100) / window.innerWidth;
+
+  useEffect(() => {
+    if (!isInit) {
+      setIsInit(true);
+    }
+  }, []);
+
+  if (!isInit) {
+    return null;
+  }
 
   return (
-    <div style={{ maxWidth: '300px', overflow: 'auto' }}>
-      <div
-        className="sidebar"
-        style={{
-          height: '100vh',
-          overflow: 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        <div
-          className="tree-parent"
-          style={{ flexGrow: 1, minBlockSize: 0, overflow: 'auto' }}
-          ref={ref}
+    <>
+      <PanelGroup direction="horizontal">
+        <Panel
+          ref={leftPanelRef}
+          minSize={0}
+          maxSize={maxSize}
+          id="left-panel"
+          defaultSize={minSize}
+          order={1}
+          style={{
+            position: 'relative',
+            borderRight: '1px solid red',
+          }}
+          // defaultSize={30}
+          onResize={console.log}
         >
-          {width}
-          <TreeView
-            width={width}
-            data={data}
-            loadChildren={loadChildren}
-            allCanBeFolder={true}
-            afterMove={console.log}
-            renderNode={(node) => (
-              <Box $direction="row" $gap={spacing['xs']} $align="center">
-                <Logo />
-
-                <Text $css={ItemTextCss} $size="sm">
-                  {node.wesh || node.name || node.title}
-                </Text>
-              </Box>
-            )}
+          <div ref={ref} style={{ position: 'relative', overflow: 'visible' }}>
+            {width}
+            <TreeView
+              width="100%"
+              data={data}
+              loadChildren={loadChildren}
+              allCanBeFolder={true}
+              // afterMove={console.log}
+              renderNode={(node) => (
+                <Box $direction="row" $gap={spacing['xs']} $align="center">
+                  <Box $width={16} $height={16}>
+                    <Logo />
+                  </Box>
+
+                  <Text $css={ItemTextCss} $size="sm">
+                    {node.wesh || node.name || node.title}
+                  </Text>
+                </Box>
+              )}
+            />
+          </div>
+        </Panel>
+        <PanelResizeHandle />
+        <Panel
+          order={2}
+          style={{
+            background: 'blue',
+            borderRight: '1px solid red',
+            position: 'relative',
+          }}
+        >
+          <div
+            onClick={() => {
+              const actualSize = leftPanelRef?.current?.getSize() ?? 0;
+              const a = leftPanelRef?.current?.resize(
+                actualSize > 0 ? 0 : minSize,
+              );
+              console.log('a', a);
+            }}
+            className="tititi"
+            style={{
+              position: 'absolute',
+              top: 20,
+              zIndex: 1000,
+              left: 0,
+              width: 30,
+              height: 30,
+              background: 'red',
+            }}
           />
-        </div>
-      </div>
-    </div>
+          ${width}
+        </Panel>
+        <PanelResizeHandle />
+        <Panel
+          order={3}
+          minSize={minSize}
+          maxSize={maxSize}
+          defaultSize={minSize}
+          style={{
+            borderLeft: '1px solid red',
+          }}
+          // defaultSize={30}
+          // onResize={console.log}
+        >
+          <div ref={ref2}>${width2}</div>
+        </Panel>
+      </PanelGroup>
+      <Button
+        onClick={() => {
+          const actualSize = leftPanelRef?.current?.getSize() ?? 0;
+          const a = leftPanelRef?.current?.resize(actualSize > 0 ? 0 : minSize);
+          console.log('a', a);
+        }}
+      >
+        coucou
+      </Button>
+    </>
   );
 };
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
@@ -11679,6 +11679,11 @@ react-remove-scroll@^2.6.0, react-remove-scroll@^2.6.1:
     use-callback-ref "^1.3.3"
     use-sidecar "^1.1.2"
 
+react-resizable-panels@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-2.1.7.tgz#afd29d8a3d708786a9f95183a38803c89f13c2e7"
+  integrity sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==
+
 [email protected]:
   version "5.9.0"
   resolved "https://registry.npmjs.org/react-select/-/react-select-5.9.0.tgz"