Refactor Editor and module functions (#15)

Moved all module functions to separate utils modules

Replaced standard with standard with typescript

Extracted UI elements to separate component

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

src/Components/UI/UI.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { ElementsSidebar } from '../ElementsSidebar/ElementsSidebar';
+import Sidebar from '../Sidebar/Sidebar';
+import { History } from '../History/History';
+import { AvailableContainer } from '../../Interfaces/AvailableContainer';
+import { ContainerModel } from '../../Interfaces/ContainerModel';
+import { IHistoryState } from '../../App';
+import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
+import FloatingButton from '../FloatingButton/FloatingButton';
+
+interface IUIProps {
+  current: IHistoryState
+  history: IHistoryState[]
+  historyCurrentStep: number
+  AvailableContainers: AvailableContainer[]
+  SelectContainer: (container: ContainerModel) => void
+  OnPropertyChange: (key: string, value: string) => void
+  AddContainer: (type: string) => void
+  SaveEditorAsJSON: () => void
+  SaveEditorAsSVG: () => void
+  LoadState: (move: number) => void
+}
+
+interface IUIState {
+  isSidebarOpen: boolean
+  isElementsSidebarOpen: boolean
+  isHistoryOpen: boolean
+}
+
+export class UI extends React.PureComponent<IUIProps, IUIState> {
+  constructor(props: IUIProps) {
+    super(props);
+    this.state = {
+      isSidebarOpen: true,
+      isElementsSidebarOpen: false,
+      isHistoryOpen: false
+    };
+  }
+
+  /**
+   * Toggle the components sidebar
+   */
+  public ToggleSidebar(): void {
+    this.setState({
+      isSidebarOpen: !this.state.isSidebarOpen
+    });
+  }
+
+  /**
+   * Toggle the elements
+   */
+  public ToggleElementsSidebar(): void {
+    this.setState({
+      isElementsSidebarOpen: !this.state.isElementsSidebarOpen
+    });
+  }
+
+  /**
+   * Toggle the elements
+   */
+  public ToggleHistory(): void {
+    this.setState({
+      isHistoryOpen: !this.state.isHistoryOpen
+    });
+  }
+
+  public render(): JSX.Element {
+    let buttonRightOffsetClasses = 'right-12';
+    if (this.state.isElementsSidebarOpen || this.state.isHistoryOpen) {
+      buttonRightOffsetClasses = 'right-72';
+    }
+    if (this.state.isHistoryOpen && this.state.isElementsSidebarOpen) {
+      buttonRightOffsetClasses = 'right-[544px]';
+    }
+
+    return (
+      <>
+        <Sidebar
+          componentOptions={this.props.AvailableContainers}
+          isOpen={this.state.isSidebarOpen}
+          onClick={() => this.ToggleSidebar()}
+          buttonOnClick={(type: string) => this.props.AddContainer(type)}
+        />
+        <button
+          className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleSidebar()}
+        >
+          &#9776; Components
+        </button>
+
+        <ElementsSidebar
+          MainContainer={this.props.current.MainContainer}
+          SelectedContainer={this.props.current.SelectedContainer}
+          isOpen={this.state.isElementsSidebarOpen}
+          isHistoryOpen={this.state.isHistoryOpen}
+          onClick={() => this.ToggleElementsSidebar()}
+          onPropertyChange={this.props.OnPropertyChange}
+          selectContainer={this.props.SelectContainer}
+        />
+        <button
+          className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleElementsSidebar()}
+        >
+          &#9776; Elements
+        </button>
+
+        <History
+          history={this.props.history}
+          historyCurrentStep={this.props.historyCurrentStep}
+          isOpen={this.state.isHistoryOpen}
+          onClick={() => this.ToggleHistory()}
+          jumpTo={this.props.LoadState}
+        />
+        <button
+          className='fixed z-10 top-4 right-72 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleHistory()}>
+            &#9776; History
+        </button>
+
+        <FloatingButton className={`fixed flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
+          <button
+            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+            title='Export as JSON'
+            onClick={this.props.SaveEditorAsJSON}
+          >
+            <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
+          <button
+            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+            title='Export as SVG'
+            onClick={this.props.SaveEditorAsSVG}
+          >
+            <PhotographIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
+        </FloatingButton>
+      </>
+    );
+  }
+}