make filename input uncontrolled

components/Editor.js

@@ -231,10 +231,10 @@ class Editor extends React.Component {
     }
   }
 
-  export(format = 'png') {
+  export(format = 'png', options = {}) {
     const link = document.createElement('a')
 
-    const prefix = this.state.filename || 'carbon'
+    const prefix = options.filename || 'carbon'
 
     return this.getCarbonImage({ format, type: 'blob' }).then(url => {
       if (format !== 'open') {

components/ExportMenu.js

@@ -45,14 +45,19 @@ const CopyEmbed = withRouter(({ router: { asPath }, mapper, title, margin }) =>
 const popoutStyle = { width: '280px', right: 0 }
 
 class ExportMenu extends React.PureComponent {
+  input = React.createRef()
+
   handleInputChange = ({ target: { name, value } }) => this.props.onChange(name, value)
 
   handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize)
 
-  handleExport = format => () => this.props.export(format)
+  handleExport = format => () =>
+    this.props.export(format, {
+      filename: this.input.current.value
+    })
 
   render() {
-    const { exportSize, filename, isVisible, toggleVisibility, disablePNG } = this.props
+    const { exportSize, isVisible, toggleVisibility, disablePNG } = this.props
 
     return (
       <div className="export-menu-container" id="export-menu">
@@ -77,14 +82,7 @@ class ExportMenu extends React.PureComponent {
         >
           <div className="export-row">
             <span className="filename">File name</span>
-            <Input
+            <Input ref={this.input} title="filename" placeholder="carbon" color={COLORS.PURPLE} />
-              title="filename"
-              placeholder="carbon"
-              value={filename}
-              name="filename"
-              onChange={this.handleInputChange}
-              color={COLORS.PURPLE}
-            />
           </div>
           <div className="export-row">
             <span>Size</span>

components/Input.js

@@ -2,58 +2,64 @@ import React from 'react'
 
 import { COLORS } from '../lib/constants'
 
-const Input = ({
+const Input = React.forwardRef(
-  accept,
+  (
-  color = COLORS.SECONDARY,
+    {
-  name,
+      accept,
-  onChange = () => {},
+      color = COLORS.SECONDARY,
-  placeholder,
+      name,
-  title,
+      onChange = () => {},
-  type,
+      placeholder,
-  value,
+      title,
-  align = 'right',
+      type,
-  maxLength
+      value,
-}) => {
+      align = 'right',
-  return (
+      maxLength
-    <React.Fragment>
+    },
-      <input
+    ref
-        type={type}
+  ) => {
-        accept={accept}
+    return (
-        title={title}
+      <React.Fragment>
-        placeholder={placeholder}
+        <input
-        value={value}
+          ref={ref}
-        name={name}
+          type={type}
-        onChange={onChange}
+          accept={accept}
-        maxLength={maxLength}
+          title={title}
-      />
+          placeholder={placeholder}
-      <style jsx>
+          value={value}
-        {`
+          name={name}
-          input {
+          onChange={onChange}
-            width: 100%;
+          maxLength={maxLength}
-            font-size: 12px;
+        />
-            color: ${color};
+        <style jsx>
-            background: transparent;
+          {`
-            border: none;
+            input {
-            outline: none;
+              width: 100%;
-            text-align: ${align};
+              font-size: 12px;
-            overflow: hidden;
+              color: ${color};
-            white-space: nowrap;
+              background: transparent;
-            text-overflow: ellipsis;
+              border: none;
-          }
+              outline: none;
+              text-align: ${align};
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
 
-          input::placeholder {
+            input::placeholder {
-            color: ${color};
+              color: ${color};
-            opacity: 0.4;
+              opacity: 0.4;
-          }
+            }
 
-          input[type='file'] {
+            input[type='file'] {
-            cursor: pointer;
+              cursor: pointer;
-            outline: none;
+              outline: none;
-          }
+            }
-        `}
+          `}
-      </style>
+        </style>
-    </React.Fragment>
+      </React.Fragment>
-  )
+    )
-}
+  }
+)
 
 export default Input

pages/index.js

@@ -26,7 +26,7 @@ class Index extends React.Component {
       updateRouteState(this.props.router, state)
       saveSettings(
         localStorage,
-        omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename', 'themes'])
+        omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'themes'])
       )
     },
     750,