From 132c0f6d5a5527e1d1bf7955ea872d24aea71bb6 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 14 Apr 2019 12:29:27 -0700
Subject: [PATCH] make filename input uncontrolled

---
 components/Editor.js     |   4 +-
 components/ExportMenu.js |  18 +++----
 components/Input.js      | 108 +++++++++++++++++++++------------------
 pages/index.js           |   2 +-
 4 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/components/Editor.js b/components/Editor.js
index f684c1b..d0705cb 100644
--- a/components/Editor.js
+++ b/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') {
diff --git a/components/ExportMenu.js b/components/ExportMenu.js
index 697dc4c..14825a4 100644
--- a/components/ExportMenu.js
+++ b/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
-              title="filename"
-              placeholder="carbon"
-              value={filename}
-              name="filename"
-              onChange={this.handleInputChange}
-              color={COLORS.PURPLE}
-            />
+            <Input ref={this.input} title="filename" placeholder="carbon" color={COLORS.PURPLE} />
           </div>
           <div className="export-row">
             <span>Size</span>
diff --git a/components/Input.js b/components/Input.js
index 78e3f34..d639091 100644
--- a/components/Input.js
+++ b/components/Input.js
@@ -2,58 +2,64 @@ import React from 'react'
 
 import { COLORS } from '../lib/constants'
 
-const Input = ({
-  accept,
-  color = COLORS.SECONDARY,
-  name,
-  onChange = () => {},
-  placeholder,
-  title,
-  type,
-  value,
-  align = 'right',
-  maxLength
-}) => {
-  return (
-    <React.Fragment>
-      <input
-        type={type}
-        accept={accept}
-        title={title}
-        placeholder={placeholder}
-        value={value}
-        name={name}
-        onChange={onChange}
-        maxLength={maxLength}
-      />
-      <style jsx>
-        {`
-          input {
-            width: 100%;
-            font-size: 12px;
-            color: ${color};
-            background: transparent;
-            border: none;
-            outline: none;
-            text-align: ${align};
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
+const Input = React.forwardRef(
+  (
+    {
+      accept,
+      color = COLORS.SECONDARY,
+      name,
+      onChange = () => {},
+      placeholder,
+      title,
+      type,
+      value,
+      align = 'right',
+      maxLength
+    },
+    ref
+  ) => {
+    return (
+      <React.Fragment>
+        <input
+          ref={ref}
+          type={type}
+          accept={accept}
+          title={title}
+          placeholder={placeholder}
+          value={value}
+          name={name}
+          onChange={onChange}
+          maxLength={maxLength}
+        />
+        <style jsx>
+          {`
+            input {
+              width: 100%;
+              font-size: 12px;
+              color: ${color};
+              background: transparent;
+              border: none;
+              outline: none;
+              text-align: ${align};
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
 
-          input::placeholder {
-            color: ${color};
-            opacity: 0.4;
-          }
+            input::placeholder {
+              color: ${color};
+              opacity: 0.4;
+            }
 
-          input[type='file'] {
-            cursor: pointer;
-            outline: none;
-          }
-        `}
-      </style>
-    </React.Fragment>
-  )
-}
+            input[type='file'] {
+              cursor: pointer;
+              outline: none;
+            }
+          `}
+        </style>
+      </React.Fragment>
+    )
+  }
+)
 
 export default Input
diff --git a/pages/index.js b/pages/index.js
index c55a2cd..897ad3b 100644
--- a/pages/index.js
+++ b/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,