From c05ea5bbd8d616e2036abc970fce8d7b25392341 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Thu, 31 Aug 2017 21:50:31 +0300
Subject: [PATCH] when FileCard loads, set up an event listener for enter key
 and call props.done

---
 src/plugins/Dashboard/FileCard.js | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/plugins/Dashboard/FileCard.js b/src/plugins/Dashboard/FileCard.js
index 4ff7daf29..20515f6ac 100644
--- a/src/plugins/Dashboard/FileCard.js
+++ b/src/plugins/Dashboard/FileCard.js
@@ -1,12 +1,22 @@
 const html = require('yo-yo')
 const getFileTypeIcon = require('./getFileTypeIcon')
+const onload = require('on-load')
 const { checkIcon } = require('./icons')
 
-module.exports = function fileCard (props) {
-  const file = props.fileCardFor ? props.files[props.fileCardFor] : false
-  const meta = {}
+let file
+const meta = {}
 
-  function tempStoreMeta (ev) {
+module.exports = function fileCard (props) {
+  file = props.fileCardFor ? props.files[props.fileCardFor] : false
+  // const meta = {}
+
+  const handleEnterKey = (ev) => {
+    if (event.keyCode === 13) {
+      props.done(meta, file.id)
+    }
+  }
+
+  const tempStoreMeta = (ev) => {
     const value = ev.target.value
     const name = ev.target.dataset.name
     meta[name] = value
@@ -26,7 +36,7 @@ module.exports = function fileCard (props) {
     })
   }
 
-  return html`<div class="UppyDashboardFileCard" aria-hidden="${!props.fileCardFor}">
+  const fileCardEl = html`<div class="UppyDashboardFileCard" aria-hidden="${!props.fileCardFor}">
     <div class="UppyDashboardContent-bar">
       <h2 class="UppyDashboardContent-title">Editing <span class="UppyDashboardContent-titleFile">${file.meta ? file.meta.name : file.name}</span></h2>
       <button class="UppyDashboardContent-back" type="button" title="Finish editing file"
@@ -61,4 +71,9 @@ module.exports = function fileCard (props) {
               onclick=${() => props.done(meta, file.id)}>${checkIcon()}</button>
     </div>
     </div>`
+
+  return onload(html`<div>${fileCardEl}</div>`,
+    () => document.body.addEventListener('keyup', handleEnterKey),
+    () => document.body.removeEventListener('keyup', handleEnterKey)
+  )
 }