Keep the extended sidebar open when changing Sidebar type + Rename ElementsSidebar

src/Components/SymbolsSidebar/SymbolsSidebar.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import useSize from '@react-hook/size';
+import { FixedSizeList as List } from 'react-window';
+import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
+import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
+import { Text } from '../Text/Text';
+import { ExtendedSidebar } from '../UI/UI';
+
+interface ISymbolsSidebarProps {
+  selectedSymbolId: string
+  symbols: Map<string, ISymbolModel>
+  selectedExtendedSidebar: ExtendedSidebar
+  onPropertyChange: (key: string, value: string | number | boolean) => void
+  selectSymbol: (symbolId: string) => void
+  onExpandChange: (value: ExtendedSidebar) => void
+}
+
+export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
+  // States
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const height = useSize(divRef)[1];
+  // Render
+  const symbols = [...props.symbols.values()];
+
+  const selectedSymbol = props.symbols.get(props.selectedSymbolId);
+  return (
+    <div className='flex flex-row h-full w-full'>
+      {props.selectedExtendedSidebar === ExtendedSidebar.Property &&
+        <div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
+          {(selectedSymbol == null) && <h1 className={'p-4'}>{Text({ textId: '@NoSymbolSelected' })}</h1>}
+          <SymbolProperties
+            symbol={selectedSymbol}
+            symbols={props.symbols}
+            onChange={props.onPropertyChange}
+          />
+        </div>}
+      <div className={'flex w-64'} ref={divRef}>
+        <div className='w-6'>
+          <ToggleSideBar
+            title={Text({ textId: '@Properties' })}
+            checked={props.selectedExtendedSidebar === ExtendedSidebar.Property}
+            onClick={() => {
+              const newValue = props.selectedExtendedSidebar !== ExtendedSidebar.Property
+                ? ExtendedSidebar.Property
+                : ExtendedSidebar.None;
+              props.onExpandChange(newValue);
+            }} />
+        </div>
+        <List
+          itemCount={symbols.length}
+          itemSize={35}
+          height={height}
+          width={'100%'}
+        >
+          {Row}
+        </List>
+      </div>
+    </div>
+  );
+
+  function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
+    const symbol = symbols[index];
+    const key = symbol.id;
+    const text = symbol.displayedText;
+    const selectedClass: string = props.selectedSymbolId !== '' &&
+    props.selectedSymbolId === symbol.id
+      ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
+      : 'bg-slate-300/60 hover:bg-slate-300';
+
+    return (
+      <button type="button"
+        className={`w-full border-blue-500 symbols-sidebar-row whitespace-pre
+          text-left text-sm font-medium transition-all ${selectedClass}`}
+        id={key}
+        key={key}
+        style={style}
+        onClick={() => { props.selectSymbol(key); }}
+      >
+        {text}
+      </button>
+    );
+  }
+}