Moved ContainerModel to Interfaces + replace all components to purecomponent (#12)

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/12

src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './App.scss';
 import { MainMenu } from './Components/MainMenu/MainMenu';
-import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Interfaces/ContainerModel';
 import Editor, { IEditorState } from './Editor';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
-import { IContainerModel, getDepth, MakeIterator } from '../SVG/Elements/ContainerModel';
+import { IContainerModel, getDepth, MakeIterator } from '../../Interfaces/ContainerModel';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel | null,
@@ -13,7 +13,7 @@ interface IElementsSidebarProps {
   selectContainer: (container: IContainerModel) => void
 }
 
-export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
+export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
     if (!this.props.MainContainer) {
       return null;
@@ -53,7 +53,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
             duration: 0.150
           }}
           className={
-            `w-full elements-sidebar-row whitespace-pre 
+            `w-full elements-sidebar-row whitespace-pre
           text-left text-sm font-medium transition-all ${selectedClass}`
           }
           key={key}

src/Components/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface IFloatingButtonProps {
+}
+
+const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
+  return <></>;
+};
+
+export default FloatingButton;

src/Components/History/History.tsx

@@ -9,7 +9,7 @@ interface IHistoryProps {
   jumpTo: (move: number) => void
 }
 
-export class History extends React.Component<IHistoryProps> {
+export class History extends React.PureComponent<IHistoryProps> {
   public render() {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
 
@@ -33,7 +33,7 @@ export class History extends React.Component<IHistoryProps> {
           key={move}
           onClick={() => this.props.jumpTo(move)}
           className={
-            `w-full elements-sidebar-row whitespace-pre 
+            `w-full elements-sidebar-row whitespace-pre
             text-left text-sm font-medium transition-all ${selectedClass}`
           }
         >

src/Components/Properties/Properties.tsx

@@ -6,20 +6,7 @@ interface IPropertiesProps {
   onChange: (key: string, value: string) => void
 }
 
-interface IPropertiesState {
+export class Properties extends React.PureComponent<IPropertiesProps> {
-  hasUpdate: boolean
-}
-
-export class Properties extends React.Component<IPropertiesProps, IPropertiesState> {
-  public state: IPropertiesState;
-
-  constructor(props: IPropertiesProps) {
-    super(props);
-    this.state = {
-      hasUpdate: false
-    };
-  }
-
   public render() {
     if (this.props.properties === undefined) {
       return <div></div>;

src/Components/SVG/Elements/Container.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getDepth, IContainerModel } from './ContainerModel';
+import { getDepth, IContainerModel } from '../../../Interfaces/ContainerModel';
 import { Dimension } from './Dimension';
 
 export interface IContainerProps {
@@ -8,7 +8,7 @@ export interface IContainerProps {
 
 const GAP = 50;
 
-export class Container extends React.Component<IContainerProps> {
+export class Container extends React.PureComponent<IContainerProps> {
   /**
    * Render the container
    * @returns Render the container

src/Components/SVG/Elements/Dimension.tsx

@@ -9,7 +9,7 @@ interface IDimensionProps {
   strokeWidth: number;
 }
 
-export class Dimension extends React.Component<IDimensionProps> {
+export class Dimension extends React.PureComponent<IDimensionProps> {
   public render() {
     const style = {
       stroke: 'black'

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContainerModel, getDepth, MakeIterator } from './ContainerModel';
+import { ContainerModel, getDepth, MakeIterator } from '../../../Interfaces/ContainerModel';
 import { Dimension } from './Dimension';
 
 interface IDimensionLayerProps {

src/Components/SVG/Elements/Selector.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IContainerModel, getAbsolutePosition } from './ContainerModel';
+import { IContainerModel, getAbsolutePosition } from '../../../Interfaces/ContainerModel';
 
 interface ISelectorProps {
   selected: IContainerModel | null

src/Components/SVG/SVG.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
-import { ContainerModel } from './Elements/ContainerModel';
+import { ContainerModel } from '../../Interfaces/ContainerModel';
 import { Selector } from './Elements/Selector';
 
 interface ISVGProps {
@@ -16,7 +16,7 @@ interface ISVGState {
   tool: Tool
 }
 
-export class SVG extends React.Component<ISVGProps> {
+export class SVG extends React.PureComponent<ISVGProps> {
   public state: ISVGState;
   public svg: React.RefObject<SVGSVGElement>;
 

src/Components/Sidebar/Sidebar.tsx

@@ -8,7 +8,7 @@ interface ISidebarProps {
   buttonOnClick: (type: string) => void;
 }
 
-export default class Sidebar extends React.Component<ISidebarProps> {
+export default class Sidebar extends React.PureComponent<ISidebarProps> {
   public render() {
     const listElements = this.props.componentOptions.map(componentOption =>
       <button className='hover:bg-blue-600 transition-all sidebar-row' key={componentOption.Type} onClick={() => this.props.buttonOnClick(componentOption.Type)}>

src/Editor.tsx

@@ -6,7 +6,7 @@ import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
 import { Configuration } from './Interfaces/Configuration';
 import { SVG } from './Components/SVG/SVG';
 import { History } from './Components/History/History';
-import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Interfaces/ContainerModel';
 import Properties from './Interfaces/Properties';
 import { IHistoryState } from './App';
 

src/Interfaces/ContainerModel.ts

@@ -1,4 +1,4 @@
-import Properties from '../../../Interfaces/Properties';
+import Properties from './Properties';
 
 export interface IContainerModel {
   children: IContainerModel[],