refactor component

libs/remix-ui/solidity-uml-gen/src/lib/components/UmlDownload.tsx

@@ -1,7 +1,6 @@
 import { CustomTooltip } from '@remix-ui/helper'
 import React, { Fragment, Ref } from 'react'
 import { Dropdown } from 'react-bootstrap'
-import { FormattedMessage } from 'react-intl'
 
 const _paq = window._paq = window._paq || []
 
@@ -39,16 +38,12 @@ export const UmlCustomMenu = React.forwardRef(
   },
 )
 
-export default function UmlDownload() {
-
-  const downloadAsPng = () => {
-    // convert serialized svg to png and download
-
-  }
+interface UmlDownloadProps {
+  downloadAsPng: () => void
+  downloadAsPdf: () => void
+}
 
-  const downloadAsPdf = () => {
-    // convert serialized svg to pdf and download
-  }
+export default function UmlDownload(props: UmlDownloadProps) {
 
   return(
     <Fragment>
@@ -60,7 +55,7 @@ export default function UmlDownload() {
         >
         </Dropdown.Toggle>
         <Dropdown.Menu as={UmlCustomMenu} className="custom-dropdown-items">
-          <Dropdown.Item onClick={downloadAsPng}>
+          <Dropdown.Item onClick={props.downloadAsPng}>
             <CustomTooltip
                 placement="left-start"
                 tooltipId="solUmlgenDownloadAsPngTooltip"
@@ -71,6 +66,7 @@ export default function UmlDownload() {
                   data-id='umlPngDownload'
                   onClick={() => {
                     _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPng'])
+                    props.downloadAsPng()
                   }}
                 >
                   <span
@@ -78,6 +74,7 @@ export default function UmlDownload() {
                     data-id='umlPngDownload'
                     onClick={() => {
                       _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPng'])
+                      props.downloadAsPng()
                     }}
                     className='far fa-image pl-2'
                   >
@@ -89,7 +86,7 @@ export default function UmlDownload() {
               </CustomTooltip>
             </Dropdown.Item>
             <Dropdown.Divider />
-            <Dropdown.Item>
+            <Dropdown.Item onClick={props.downloadAsPdf}>
               <CustomTooltip
                   placement="left-start"
                   tooltipId="solUmlgenDownloadAsPdfTooltip"
@@ -100,7 +97,7 @@ export default function UmlDownload() {
                   data-id='umlPdfDownload'
                   onClick={() => {
                     _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPdf'])
-                    downloadAsPdf()
+                    props.downloadAsPdf()
                   }}
                 >
                   <span
@@ -108,6 +105,7 @@ export default function UmlDownload() {
                     data-id='umlPdfDownload'
                     onClick={() => {
                       _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPdf'])
+                      props.downloadAsPdf()
                     }}
                     className='far fa-file-pdf pl-2'
                   >

libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

@@ -38,6 +38,15 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading }: RemixUiSolidityU
   const data = encoder.encode(updatedSvg)
   const final = btoa(String.fromCharCode.apply(null, data))
 
+  const downloadAsPng = () => {
+    // convert serialized svg to png and download
+
+  }
+
+  const downloadAsPdf = () => {
+    // convert serialized svg to pdf and download
+  }
+
   function ActionButtons({ actions: { zoomIn, zoomOut, resetTransform }}: ActionButtonsProps) {
   
     return (
@@ -48,7 +57,7 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading }: RemixUiSolidityU
           style={{ zIndex: 3, top: "10", right: "2em" }}
         >
           <div className="py-2 px-2 d-flex justify-content-center align-items-center">
-            <UmlDownload />
+            <UmlDownload downloadAsPdf={downloadAsPdf} downloadAsPng={downloadAsPng} />
             <button
               className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
               onClick={() => zoomIn()}