svg-layout-designer-react/src/Components/ElementsSidebar/ElementsSidebar.tsx

import * as React from 'react';
import { motion } from 'framer-motion';
import { Properties } from '../Properties/Properties';
import { IContainerModel, getDepth, MakeIterator } from '../SVG/Elements/ContainerModel';

interface IElementsSidebarProps {
  MainContainer: IContainerModel | null,
  isOpen: boolean,
  SelectedContainer: IContainerModel | null,
  onClick: () => void,
  onPropertyChange: (key: string, value: string) => void,
  selectContainer: (container: IContainerModel) => void
}

export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
  public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
    if (!this.props.MainContainer) {
      return null;
    }

    const it = MakeIterator(this.props.MainContainer);
    for (const container of it) {
      handleContainer(container as IContainerModel);
    }
  }

  public render() {
    const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';

    const containerRows: React.ReactNode[] = [];
    this.iterateChilds((container: IContainerModel) => {
      const depth: number = getDepth(container);
      const key = container.properties.id.toString();
      const text = '|\t'.repeat(depth) + key;
      const selectedClass: string = this.props.SelectedContainer !== null &&
        this.props.SelectedContainer.properties.id === container.properties.id
        ? 'bg-blue-500 hover:bg-blue-600'
        : 'bg-slate-400 hover:bg-slate-600';
      containerRows.push(
        <motion.button
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 1.2 }}
          initial={{ opacity: 0, scale: 0 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 0.150
          }}
          className={
            `w-full elements-sidebar-row whitespace-pre 
          text-left text-sm font-medium transition-all ${selectedClass}`
          }
          key={key}
          onClick={() => this.props.selectContainer(container)}>
          { text }
        </motion.button>
      );
    });

    return (
      <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
        <button className='close-button bg-slate-400 hover:bg-slate-600 justify-start' onClick={this.props.onClick}>
          &times; Close
        </button>
        <div className='bg-slate-500 sidebar-row'>
          Elements
        </div>
        <div className='overflow-y-auto overflow-x-hidden text-slate-200 flex-grow divide-y divide-solid divide-slate-500'>
          { containerRows }
        </div>
        <Properties properties={this.props.SelectedContainer?.properties} onChange={this.props.onPropertyChange}></Properties>
      </div>
    );
  }
}