Implement export as SVG (#14)

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

src/Components/FloatingButton/FloatingButton.tsx

@@ -1,10 +1,38 @@
 import * as React from 'react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
 
 interface IFloatingButtonProps {
+  children: React.ReactNode[] | React.ReactNode
+  className: string
 }
 
+const toggleState = (
+  isHidden: boolean,
+  setHidden: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  setHidden(!isHidden);
+};
+
 const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
-  return <></>;
+  const [isHidden, setHidden] = React.useState(true);
+  const buttonListClasses = isHidden ? 'invisible opacity-0' : 'visible opacity-100';
+  const icon = isHidden
+    ? <MenuIcon className="floating-btn" />
+    : <XIcon className="floating-btn" />;
+
+  return (
+    <div className={props.className}>
+      <div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
+        { props.children }
+      </div>
+      <button
+        className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+        title='Open menu'
+        onClick={() => toggleState(isHidden, setHidden)}
+      >
+        { icon }
+      </button>
+    </div>);
 };
 
 export default FloatingButton;

src/Components/SVG/SVG.tsx

@@ -18,7 +18,7 @@ interface ISVGState {
 
 export class SVG extends React.PureComponent<ISVGProps> {
   public state: ISVGState;
-  public svg: React.RefObject<SVGSVGElement>;
+  public static ID = 'svg';
 
   constructor(props: ISVGProps) {
     super(props);
@@ -29,7 +29,6 @@ export class SVG extends React.PureComponent<ISVGProps> {
       } as Value,
       tool: TOOL_PAN
     };
-    this.svg = React.createRef<SVGSVGElement>();
   }
 
   render() {
@@ -49,25 +48,28 @@ export class SVG extends React.PureComponent<ISVGProps> {
     }
 
     return (
-      <ReactSVGPanZoom
-        width={window.innerWidth}
-        height={window.innerHeight}
-        background={'#ffffff'}
-        defaultTool='pan'
-        value={this.state.value} onChangeValue={value => this.setState({ value })}
-        tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
-        miniatureProps={{
-          position: 'left',
-          background: '#616264',
-          width: window.innerWidth - 12,
-          height: 120
-        }}
-      >
-        <svg ref={this.svg} {...properties}>
-          { children }
-          <Selector selected={this.props.selected} />
-        </svg>
-      </ReactSVGPanZoom>
+      <div id={SVG.ID}>
+        <ReactSVGPanZoom
+          width={window.innerWidth}
+          height={window.innerHeight}
+          background={'#ffffff'}
+          defaultTool='pan'
+          value={this.state.value} onChangeValue={value => this.setState({ value })}
+          tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
+          miniatureProps={{
+            position: 'left',
+            background: '#616264',
+            width: window.innerWidth - 12,
+            height: 120
+          }}
+        >
+          <svg {...properties}>
+            { children }
+            <Selector selected={this.props.selected} />
+          </svg>
+        </ReactSVGPanZoom>
+      </div>
+
     );
   };
 }