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

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,21 +1,22 @@
 import * as React from 'react';
-import { useState } from 'react';
 import useSize from '@react-hook/size';
 import { FixedSizeList as List } from 'react-window';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { ContainerProperties } from '../ContainerProperties/ContainerProperties';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
+import { type IContainerModel } from '../../Interfaces/IContainerModel';
 import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { PropertyType } from '../../Enums/PropertyType';
+import { type PropertyType } from '../../Enums/PropertyType';
 import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
 import { Text } from '../Text/Text';
+import { ExtendedSidebar } from '../UI/UI';
 
-interface IElementsSideBarProps {
+interface IElementsSidebarProps {
   containers: Map<string, IContainerModel>
   mainContainer: IContainerModel
   symbols: Map<string, ISymbolModel>
   selectedContainer: IContainerModel | undefined
+  selectedExtendedSidebar: ExtendedSidebar
   onPropertyChange: (
     key: string,
     value: string | number | boolean | number[],
@@ -23,8 +24,7 @@ interface IElementsSideBarProps {
   ) => void
   selectContainer: (containerId: string) => void
   addContainer: (index: number, type: string, parent: string) => void
-  isExpanded: boolean
+  onExpandChange: (value: ExtendedSidebar) => void
-  onExpandChange: () => void
 }
 
 function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''): void {
@@ -124,11 +124,10 @@ function HandleOnDrop(
   }
 }
 
-export function ElementsSideBar(props: IElementsSideBarProps): JSX.Element {
+export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
   // States
   const divRef = React.useRef<HTMLDivElement>(null);
   const [,height] = useSize(divRef);
-  const [showProperties, setShowProperties] = useState(props.isExpanded);
 
   // Render
   const it = MakeRecursionDFSIterator(props.mainContainer, props.containers, 0, [0, 0], true);
@@ -167,7 +166,7 @@ export function ElementsSideBar(props: IElementsSideBarProps): JSX.Element {
 
   return (
     <div className='flex flex-row h-full w-full' >
-      {showProperties &&
+      {props.selectedExtendedSidebar === ExtendedSidebar.Property &&
         <div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
           <ContainerProperties
             properties={props.selectedContainer?.properties}
@@ -178,7 +177,16 @@ export function ElementsSideBar(props: IElementsSideBarProps): JSX.Element {
       }
       <div className='flex w-64' ref={divRef}>
         <div className='w-6'>
-          <ToggleSideBar title={Text({ textId: '@Properties' })} checked={showProperties} onChange={(newValue) => { setShowProperties(newValue); props.onExpandChange(); }} />
+          <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={containers.length}
@@ -229,10 +237,10 @@ function ElementsListRow(
     key={key}
     style={style}
     title={container.properties.warning}
-    onClick={() => selectContainer(container.properties.id)}
+    onClick={() => { selectContainer(container.properties.id); }}
-    onDrop={(event) => HandleOnDrop(event, containers, mainContainer, addContainer)}
+    onDrop={(event) => { HandleOnDrop(event, containers, mainContainer, addContainer); }}
-    onDragOver={(event) => HandleDragOver(event, mainContainer)}
+    onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
-    onDragLeave={(event) => HandleDragLeave(event)}
+    onDragLeave={(event) => { HandleDragLeave(event); }}
   >
     {verticalBars}
     {text}

src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx

@@ -4,16 +4,16 @@ import './ToggleSideBar.scss';
 interface IToggleSidebarProps {
   title: string
   checked: boolean
-  onChange: (newValue: boolean) => void
+  onClick: () => void
 }
 
-export function ToggleSideBar({ title, checked, onChange }: IToggleSidebarProps): JSX.Element {
+export function ToggleSideBar({ title, checked, onClick }: IToggleSidebarProps): JSX.Element {
   return (
     <div className={`${(checked ? 'bg-slate-400 hover:bg-slate-500' : 'bg-slate-300 hover:bg-slate-400')}`}>
       <button
         className={'w-full py-2'}
         type='button'
-        onClick={() => onChange(!checked)}
+        onClick={onClick}
       >
         <p className='text-vertical'>{title}
         </p>

src/Components/SymbolsSidebar/SymbolsSidebar.tsx

@@ -5,29 +5,29 @@ import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
 import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
 import { Text } from '../Text/Text';
-import { useState } from 'react';
+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
-  isExpanded: boolean
+  onExpandChange: (value: ExtendedSidebar) => void
-  onExpandChange: (isExpanded: boolean) => void
 }
 
 export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
   // States
   const divRef = React.useRef<HTMLDivElement>(null);
   const height = useSize(divRef)[1];
-  const [showProperties, setShowProperties] = useState(props.isExpanded);
   // Render
   const symbols = [...props.symbols.values()];
 
   const selectedSymbol = props.symbols.get(props.selectedSymbolId);
   return (
     <div className='flex flex-row h-full w-full'>
-      {showProperties && <div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
+      {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}
@@ -37,7 +37,15 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
         </div>}
       <div className={'flex w-64'} ref={divRef}>
         <div className='w-6'>
-          <ToggleSideBar title={Text({ textId: '@Properties' })} checked={showProperties} onChange={(newValue) => { setShowProperties(newValue); props.onExpandChange(newValue); }} />
+          <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}

src/Components/UI/UI.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ElementsSideBar } from '../ElementsList/ElementsSideBar';
+import { ElementsSidebar } from '../ElementsSidebar/ElementsSidebar';
 import { History } from '../History/History';
 import { Bar, BAR_WIDTH } from '../Bar/Bar';
 import { Symbols } from '../Symbols/Symbols';
-import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar';
+import { SymbolsSidebar } from '../SymbolsSidebar/SymbolsSidebar';
 import { type PropertyType } from '../../Enums/PropertyType';
 import { Messages } from '../Messages/Messages';
 import { Sidebar } from '../Sidebar/Sidebar';
@@ -17,8 +17,8 @@ import { FindContainerById } from '../../utils/itertools';
 import { type IEditorState } from '../../Interfaces/IEditorState';
 import { GetCurrentHistoryState } from '../Editor/Editor';
 import { Text } from '../Text/Text';
-import { IReplaceContainer } from '../../Interfaces/IReplaceContainer';
+import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
-import { Dispatch } from 'react';
+import { type Dispatch } from 'react';
 
 export interface IUIProps {
   editorState: IEditorState
@@ -42,14 +42,17 @@ export interface IUIProps {
 export enum SidebarType {
   None,
   Components,
-  ComponentsExpanded,
   Symbols,
-  SymbolsExpanded,
   History,
   Messages,
   Settings
 }
 
+export enum ExtendedSidebar {
+  None,
+  Property
+}
+
 function UseSetOrToggleSidebar(
   selectedSidebar: SidebarType,
   setSelectedSidebar: React.Dispatch<React.SetStateAction<SidebarType>>
@@ -66,6 +69,10 @@ function UseSetOrToggleSidebar(
 
 export function UI({ editorState, replaceContainer, setReplaceContainer, ...methods }: IUIProps): JSX.Element {
   const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
+  const [
+    selectedExtendedSidebar,
+    setSelectedExtendedSidebarType
+  ] = React.useState<ExtendedSidebar>(ExtendedSidebar.None);
 
   const [messages, setMessages] = React.useState<IMessage[]>([]);
   const current = GetCurrentHistoryState(editorState.history, editorState.historyCurrentStep);
@@ -115,7 +122,7 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
         replaceContainer={replaceContainer}
         setReplaceContainer={setReplaceContainer}/>;
       rightSidebarTitle = Text({ textId: '@Elements' });
-      rightChildren = <ElementsSideBar
+      rightChildren = <ElementsSidebar
         containers={current.containers}
         mainContainer={mainContainer}
         symbols={current.symbols}
@@ -123,32 +130,11 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
         onPropertyChange={methods.onPropertyChange}
         selectContainer={methods.selectContainer}
         addContainer={methods.addContainerAt}
-        isExpanded ={false}
+        selectedExtendedSidebar={selectedExtendedSidebar}
-        onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } }
+        onExpandChange={(value) => { setSelectedExtendedSidebarType(value); } }
-      />;
-      break;
-    case SidebarType.ComponentsExpanded:
-      leftSidebarTitle = Text({ textId: '@Components' });
-      leftChildren = <Components
-        selectedContainer={selectedContainer}
-        componentOptions={configuration.AvailableContainers}
-        categories={configuration.Categories}
-        buttonOnClick={methods.addOrReplaceContainer}
-        replaceContainer={replaceContainer}
-        setReplaceContainer={setReplaceContainer}/>;
-      rightSidebarTitle = Text({ textId: '@Elements' });
-      rightChildren = <ElementsSideBar
-        containers={current.containers}
-        mainContainer={mainContainer}
-        symbols={current.symbols}
-        selectedContainer={selectedContainer}
-        onPropertyChange={methods.onPropertyChange}
-        selectContainer={methods.selectContainer}
-        addContainer={methods.addContainerAt}
-        isExpanded ={true}
-        onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } }
       />;
       break;
+
     case SidebarType.Symbols:
       leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
       leftChildren = <Symbols
@@ -161,24 +147,8 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
         symbols={current.symbols}
         onPropertyChange={methods.onSymbolPropertyChange}
         selectSymbol={methods.selectSymbol}
-        isExpanded ={false}
+        selectedExtendedSidebar={selectedExtendedSidebar}
-        onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } }
+        onExpandChange={(value) => { setSelectedExtendedSidebarType(value); } }
-      />;
-      break;
-    case SidebarType.SymbolsExpanded:
-      leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
-      leftChildren = <Symbols
-        componentOptions={configuration.AvailableSymbols}
-        buttonOnClick={methods.addSymbol}
-      />;
-      rightSidebarTitle = Text({ textId: '@SymbolsRight' });
-      rightChildren = <SymbolsSidebar
-        selectedSymbolId={current.selectedSymbolId}
-        symbols={current.symbols}
-        onPropertyChange={methods.onSymbolPropertyChange}
-        selectSymbol={methods.selectSymbol}
-        isExpanded ={true}
-        onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }}
       />;
       break;
 
@@ -210,8 +180,10 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
   }
 
   const isLeftSidebarOpen = selectedSidebar !== SidebarType.None;
-  const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols;
+  const isRightSidebarOpen = [SidebarType.Components, SidebarType.Symbols]
-  const isRightSidebarOpenExpanded = selectedSidebar === SidebarType.ComponentsExpanded || selectedSidebar === SidebarType.SymbolsExpanded;
+    .includes(selectedSidebar);
+  const isRightSidebarOpenExpanded = isRightSidebarOpen &&
+    selectedExtendedSidebar !== ExtendedSidebar.None;
 
   const isLeftSidebarOpenClasses = new Set<string>([
     'left-sidebar',
@@ -252,8 +224,8 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
   }
 
   const clickRestrictionsClasses = replaceContainer.isReplacing ? 'pointer-events-none opacity-50' : '';
-  const isComponentsOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.ComponentsExpanded;
+  const isComponentsOpen = selectedSidebar === SidebarType.Components;
-  const isSymbolsOpen = selectedSidebar === SidebarType.Symbols || selectedSidebar === SidebarType.SymbolsExpanded;
+  const isSymbolsOpen = selectedSidebar === SidebarType.Symbols;
 
   return (
     <>
@@ -265,18 +237,10 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
         isMessagesOpen={selectedSidebar === SidebarType.Messages}
         isSettingsOpen={selectedSidebar === SidebarType.Settings}
         toggleComponents={() => {
-          if (selectedSidebar === SidebarType.ComponentsExpanded) {
-            setOrToggleSidebar(SidebarType.ComponentsExpanded);
-          } else {
           setOrToggleSidebar(SidebarType.Components);
-          }
         } }
         toggleSymbols={() => {
-          if (selectedSidebar === SidebarType.SymbolsExpanded) {
-            setOrToggleSidebar(SidebarType.SymbolsExpanded);
-          } else {
           setOrToggleSidebar(SidebarType.Symbols);
-          }
         } }
         toggleTimeline={() => {
           setOrToggleSidebar(SidebarType.History);