From fd5767954214a6a9e07087052fc3a20240ea3378 Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 16:36:29 +0200 Subject: [PATCH] Moved ContainerModel to Interfaces + replace all components to purecomponent --- src/App.tsx | 2 +- .../ElementsSidebar/ElementsSidebar.tsx | 6 +++--- src/Components/FloatingButton/FloatingButton.tsx | 10 ++++++++++ src/Components/History/History.tsx | 4 ++-- src/Components/Properties/Properties.tsx | 15 +-------------- src/Components/SVG/Elements/Container.tsx | 4 ++-- src/Components/SVG/Elements/Dimension.tsx | 2 +- src/Components/SVG/Elements/DimensionLayer.tsx | 2 +- src/Components/SVG/Elements/Selector.tsx | 2 +- src/Components/SVG/SVG.tsx | 4 ++-- src/Components/Sidebar/Sidebar.tsx | 2 +- src/Editor.tsx | 2 +- .../SVG/Elements => Interfaces}/ContainerModel.ts | 2 +- 13 files changed, 27 insertions(+), 30 deletions(-) create mode 100644 src/Components/FloatingButton/FloatingButton.tsx rename src/{Components/SVG/Elements => Interfaces}/ContainerModel.ts (97%) diff --git a/src/App.tsx b/src/App.tsx index 58e73c5..2b8c7fd 100644 --- a/src/App.tsx +++ b/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'; diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index 4e599ef..c4ea51a 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/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 { +export class ElementsSidebar extends React.PureComponent { public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode { if (!this.props.MainContainer) { return null; @@ -53,7 +53,7 @@ export class ElementsSidebar extends React.Component { 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} diff --git a/src/Components/FloatingButton/FloatingButton.tsx b/src/Components/FloatingButton/FloatingButton.tsx new file mode 100644 index 0000000..fb5fc1c --- /dev/null +++ b/src/Components/FloatingButton/FloatingButton.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; + +interface IFloatingButtonProps { +} + +const FloatingButton: React.FC = (props: IFloatingButtonProps) => { + return <>; +}; + +export default FloatingButton; diff --git a/src/Components/History/History.tsx b/src/Components/History/History.tsx index 750fcc7..e77a8c7 100644 --- a/src/Components/History/History.tsx +++ b/src/Components/History/History.tsx @@ -9,7 +9,7 @@ interface IHistoryProps { jumpTo: (move: number) => void } -export class History extends React.Component { +export class History extends React.PureComponent { public render() { const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64'; @@ -33,7 +33,7 @@ export class History extends React.Component { 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}` } > diff --git a/src/Components/Properties/Properties.tsx b/src/Components/Properties/Properties.tsx index 61d0bff..65cfefd 100644 --- a/src/Components/Properties/Properties.tsx +++ b/src/Components/Properties/Properties.tsx @@ -6,20 +6,7 @@ interface IPropertiesProps { onChange: (key: string, value: string) => void } -interface IPropertiesState { - hasUpdate: boolean -} - -export class Properties extends React.Component { - public state: IPropertiesState; - - constructor(props: IPropertiesProps) { - super(props); - this.state = { - hasUpdate: false - }; - } - +export class Properties extends React.PureComponent { public render() { if (this.props.properties === undefined) { return
; diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index 94a4924..a352bcd 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/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 { +export class Container extends React.PureComponent { /** * Render the container * @returns Render the container diff --git a/src/Components/SVG/Elements/Dimension.tsx b/src/Components/SVG/Elements/Dimension.tsx index 276345f..96ab2c9 100644 --- a/src/Components/SVG/Elements/Dimension.tsx +++ b/src/Components/SVG/Elements/Dimension.tsx @@ -9,7 +9,7 @@ interface IDimensionProps { strokeWidth: number; } -export class Dimension extends React.Component { +export class Dimension extends React.PureComponent { public render() { const style = { stroke: 'black' diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 3c73f3a..3a3dee8 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/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 { diff --git a/src/Components/SVG/Elements/Selector.tsx b/src/Components/SVG/Elements/Selector.tsx index 6fc1b9b..de6d9a3 100644 --- a/src/Components/SVG/Elements/Selector.tsx +++ b/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 diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 4d8c301..c11e39b 100644 --- a/src/Components/SVG/SVG.tsx +++ b/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 { +export class SVG extends React.PureComponent { public state: ISVGState; public svg: React.RefObject; diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index af08ce9..dd34812 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/src/Components/Sidebar/Sidebar.tsx @@ -8,7 +8,7 @@ interface ISidebarProps { buttonOnClick: (type: string) => void; } -export default class Sidebar extends React.Component { +export default class Sidebar extends React.PureComponent { public render() { const listElements = this.props.componentOptions.map(componentOption =>