Consolidate type and format into one param (#1286)

* Consolidate type and format into one param

Closes #1274

* bug fix Open button

* update filename bug

components/Editor.js

@@ -96,7 +96,6 @@ class Editor extends React.Component {
   getCarbonImage = async (
     {
       format,
-      type,
       squared = this.state.squaredImage,
       exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value,
     } = { format: 'png' }
@@ -128,7 +127,6 @@ class Editor extends React.Component {
       height,
     }
 
-    // TODO consolidate type/format to only use one param
     if (format === 'svg') {
       return domtoimage
         .toSvg(node, config)
@@ -154,7 +152,7 @@ class Editor extends React.Component {
         .then(data => new Blob([data], { type: 'image/svg+xml' }))
     }
 
-    if (type === 'blob') {
+    if (format === 'blob') {
       return domtoimage.toBlob(node, config)
     }
 
@@ -174,16 +172,16 @@ class Editor extends React.Component {
     return this.getCarbonImage({ format: 'png' }).then(data => this.context.imgur(data, prefix))
   }
 
-  exportImage = (format = 'png', options = {}) => {
+  exportImage = (format = 'blob', options = {}) => {
     const link = document.createElement('a')
 
     const prefix = options.filename || this.state.name || 'carbon'
 
-    return this.getCarbonImage({ format, type: 'blob' })
+    return this.getCarbonImage({ format })
       .then(blob => window.URL.createObjectURL(blob))
       .then(url => {
-        if (format !== 'open') {
+        if (!options.open) {
-          link.download = `${prefix}.${format}`
+          link.download = `${prefix}.${format === 'svg' ? 'svg' : 'png'}`
         }
         if (
           // isFirefox
@@ -200,7 +198,7 @@ class Editor extends React.Component {
   }
 
   copyImage = () =>
-    this.getCarbonImage({ format: 'png', type: 'blob' })
+    this.getCarbonImage({ format: 'blob' })
       .then(blob =>
         navigator.clipboard.write([
           new window.ClipboardItem({

components/ExportMenu.js

@@ -25,11 +25,9 @@ function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportI
   const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize)
 
   const handleExport = format => () =>
-    exportImage(format, {
+    exportImage(format, { filename: input.current && input.current.value })
-      filename: input.current && input.current.value,
-    })
 
-  useKeyboardListener('⌘-⇧-e', preventDefault(handleExport('png')))
+  useKeyboardListener('⌘-⇧-e', preventDefault(handleExport('blob')))
   useKeyboardListener('⌘-⇧-s', preventDefault(handleExport('svg')))
 
   return (
@@ -40,7 +38,7 @@ function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportI
           large
           center
           color={COLORS.PURPLE}
-          onClick={handleExport('png')}
+          onClick={handleExport('blob')}
           data-cy="quick-export-button"
           style={{ minWidth: 92, borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
           title="Quick export"
@@ -91,7 +89,13 @@ function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportI
           </div>
         </div>
         <div className="export-row">
-          <Button center color={COLORS.PURPLE} onClick={handleExport('open')}>
+          <Button
+            center
+            color={COLORS.PURPLE}
+            onClick={() =>
+              exportImage('blob', { filename: input.current && input.current.value, open: true })
+            }
+          >
             Open
           </Button>
           <div className="save-container">
@@ -102,7 +106,7 @@ function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportI
                 margin="0 8px 0 0"
                 hoverColor={COLORS.PURPLE}
                 color={COLORS.DARK_PURPLE}
-                onClick={handleExport('png')}
+                onClick={handleExport('blob')}
                 id="export-png"
                 disabled={loading}
               >