diff --git a/src/components/ExportDialog.jsx b/src/components/ExportDialog.jsx index db00e2ce..38b25d72 100644 --- a/src/components/ExportDialog.jsx +++ b/src/components/ExportDialog.jsx @@ -25,6 +25,7 @@ const previewStyle = { export const ExportDialog = props => { const board = useBoard(); + const copiedToClipboardTimer = React.useRef(null); const [copiedToClipboard, setCopiedToClipboard] = React.useState(false); const [preview, setPreview] = React.useState(null); const [options, setOptions] = React.useState({ @@ -51,18 +52,33 @@ export const ExportDialog = props => { }, [options.includeBackground], ); + // On unmount export dialog --> reset copied to clipboard timer + React.useEffect( + () => { + return () => { + if (copiedToClipboardTimer.current) { + clearTimeout(copiedToClipboardTimer.current); + } + }; + }, + [], + ); return (
Export image
-
+
-
+
{!!preview && (
- +
)} {!preview && ( @@ -85,18 +101,32 @@ export const ExportDialog = props => {
)} fullWidth={true} onClick={() => exportToFile(getExportOptions())} /> )} fullWidth={true} onClick={() => { + // First check if there is an active timer + if (copiedToClipboardTimer.current) { + setTimeout(copiedToClipboardTimer.current); + } setCopiedToClipboard(true); exportToClipboard(getExportOptions()); + // Delay reseting the current timer + copiedToClipboardTimer.current = setTimeout( + () => { + setCopiedToClipboard(false); + copiedToClipboardTimer.current = null; + }, + props.copiedToClipboardMessageDelay, + ); }} />
@@ -106,6 +136,7 @@ export const ExportDialog = props => { ExportDialog.defaultProps = { width: "20rem", + copiedToClipboardMessageDelay: 2000, cropRegion: null, onClose: null, };