From 4e15b660015e075cc8251a1bbd15563b793eb0c9 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 4 Feb 2018 14:35:23 -0800
Subject: [PATCH] Add save as dropdown (needs reconfiguring + style)

---
 components/Dropdown.js |  2 +-
 pages/editor.js        | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/Dropdown.js b/components/Dropdown.js
index 142d6be..75526f9 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -71,7 +71,7 @@ class Dropdown extends React.Component {
         onClick={this.toggle}
       >
         <div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
-          <span>{this.props.selected.name}</span>
+          <span style={{ minWidth: '4rem' }}>{this.props.selected.name}</span>
           <div className="arrow-down">
             <ArrowDown />
           </div>
diff --git a/pages/editor.js b/pages/editor.js
index 7f3de5b..958eb21 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -14,6 +14,7 @@ import Settings from '../components/Settings'
 import Toolbar from '../components/Toolbar'
 import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
+import ArrowDown from '../components/svg/Arrowdown'
 import api from '../lib/api'
 import {
   THEMES,
@@ -75,6 +76,7 @@ class Editor extends React.Component {
         paddingHorizontal: '32px',
         uploading: false,
         code: props.content,
+        saveAs: 'png',
         _initialState: this.props.initialState
       },
       this.props.initialState
@@ -190,15 +192,15 @@ class Editor extends React.Component {
                 style={{ marginRight: '8px' }}
               />
               <Button
-                onClick={e => this.save()}
-                title="Save Image (PNG)"
+                onClick={e => this.save({ format: this.state.saveAs })}
+                title="Save Image"
                 color="#c198fb"
                 style={{ marginRight: '8px' }}
               />
-              <Button
-                onClick={e => this.save({ format: 'svg' })}
-                title="Save Vector (SVG)"
-                color="#9fca56"
+              <Dropdown
+                selected={{ id: this.state.saveAs, name: `(${this.state.saveAs.toUpperCase()})` }}
+                list={['png', 'svg'].map(id => ({ id, name: id.toUpperCase() }))}
+                onChange={saveAs => this.setState({ saveAs: saveAs.id })}
               />
             </div>
           </Toolbar>