Add @react-hook/size and use it to have a dynamic resizable list + update packages

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.11",
+    "@react-hook/size": "^2.1.2",
     "interweave": "^13.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   '@heroicons/react': ^2.0.11
+  '@react-hook/size': ^2.1.2
   '@testing-library/dom': ^8.18.1
   '@testing-library/jest-dom': ^5.16.5
   '@testing-library/react': ^13.4.0
@@ -41,6 +42,7 @@ specifiers:
 
 dependencies:
   '@heroicons/react': 2.0.11_react@18.2.0
+  '@react-hook/size': 2.1.2_react@18.2.0
   interweave: 13.0.0_react@18.2.0
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
@@ -490,6 +492,10 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /@juggle/resize-observer/3.4.0:
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -515,6 +521,43 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@react-hook/latest/1.0.3_react@18.2.0:
+    resolution: {integrity: sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /@react-hook/passive-layout-effect/1.2.1_react@18.2.0:
+    resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /@react-hook/resize-observer/1.2.6_react@18.2.0:
+    resolution: {integrity: sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@juggle/resize-observer': 3.4.0
+      '@react-hook/latest': 1.0.3_react@18.2.0
+      '@react-hook/passive-layout-effect': 1.2.1_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@react-hook/size/2.1.2_react@18.2.0:
+    resolution: {integrity: sha512-BmE5asyRDxSuQ9p14FUKJ0iBRgV9cROjqNG9jT/EjCM+xHha1HVqbPoT+14FQg1K7xIydabClCibUY4+1tw/iw==}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@react-hook/passive-layout-effect': 1.2.1_react@18.2.0
+      '@react-hook/resize-observer': 1.2.6_react@18.2.0
+      react: 18.2.0
+    dev: false
+
   /@sinclair/typebox/0.24.43:
     resolution: {integrity: sha512-1orQTvtazZmsPeBroJjysvsOQCYV2yjWlebkSY38pl5vr2tdLjEJ+LoxITlGNZaH2RE19WlAwQMkH/7C14wLfw==}
     dev: true

src/Components/ElementsList/ElementsList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useSize from '@react-hook/size';
 import { FixedSizeList as List } from 'react-window';
 import { Properties } from '../ContainerProperties/ContainerProperties';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
@@ -116,6 +117,10 @@ function HandleOnDrop(
 }
 
 export function ElementsList(props: IElementsListProps): JSX.Element {
+  // States
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const [width, height] = useSize(divRef);
+
   // Render
   const it = MakeRecursionDFSIterator(props.mainContainer, 0, [0, 0], true);
   const containers = [...it];
@@ -164,12 +169,12 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
 
   return (
     <div className='h-full flex flex-col'>
-      <div className='h-48'>
+      <div ref={divRef} className='h-1/2'>
         <List
           className="List divide-y divide-black overflow-y-auto"
           itemCount={containers.length}
           itemSize={35}
-          height={192}
+          height={height}
           width={'100%'}
         >
           {Row}

src/Components/SymbolsList/SymbolsList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useSize from '@react-hook/size';
 import { FixedSizeList as List } from 'react-window';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
@@ -11,6 +12,9 @@ interface ISymbolsSidebarProps {
 }
 
 export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
+  // States
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const [width, height] = useSize(divRef);
   // Render
   const containers = [...props.symbols.values()];
   function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
@@ -38,7 +42,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
 
   return (
     <div>
-      <div className='h-80 text-gray-800'>
+      <div ref={divRef} className='h-1/2 text-gray-800'>
         <List
           className='List divide-y divide-black'
           itemCount={containers.length}