refactor component

pull/5370/head
Joseph Izang 2 years ago
parent 37071e9015
commit 1e334975c7
  1. 22
      libs/remix-ui/solidity-uml-gen/src/lib/components/UmlDownload.tsx
  2. 11
      libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

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

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

Loading…
Cancel
Save