Rename SVGSidebar to ElementsSidebar

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Container } from '../SVG/Elements/Container';
+
+interface IElementsSidebarProps {
+  MainContainer: Container | null,
+  isOpen: boolean,
+  SelectedContainer: Container | null,
+  onClick: () => void,
+  selectContainer: (container: Container) => void
+}
+
+export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
+  public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
+    // TODO: fix this by using dfs or sort
+    const root = this.props.MainContainer;
+    if (!root) {
+      return null;
+    }
+
+    const queue = [root];
+    const visited = new Set([root]);
+    let depth = 0;
+    while (queue.length > 0) {
+      let size = queue.length;
+
+      while (size-- > 0) {
+        const container = queue.shift() as Container;
+
+        handleContainer(container, depth);
+
+        container.props.children.forEach((child) => {
+          if (visited.has(child)) {
+            return;
+          }
+          visited.add(child);
+          queue.push(child);
+        });
+      }
+      depth++;
+    }
+  }
+
+  public render() {
+    const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
+
+    const containerRows: React.ReactNode[] = [];
+    this.iterateChilds((container: Container, depth: number) => {
+      const key = container.props.id.toString();
+      const text = '\t\t'.repeat(depth) + key;
+      const selectedClass: string = this.props.SelectedContainer !== null &&
+        this.props.SelectedContainer.props.id === container.props.id
+        ? 'bg-blue-500 hover:bg-slate-500'
+        : 'bg-slate-400 hover:bg-slate-600';
+      containerRows.push(
+        <button className={`sidebar-row whitespace-pre text-left transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
+          { text }
+        </button>
+      );
+    });
+
+    return (
+      <div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
+        <div className='w-full h-auto p-4 flex justify-start' onClick={this.props.onClick}>
+          <button className='text-lg'>&times;</button>
+        </div>
+        <div className='bg-slate-500 sidebar-row'>
+          Liste des éléments
+        </div>
+        <div className='overflow-auto divide-y divide-solid'>
+          { containerRows }
+        </div>
+      </div>
+    );
+  }
+}