when FileCard loads, set up an event listener for enter key and call props.done

This commit is contained in:
Artur Paikin 2017-08-31 21:50:31 +03:00
parent 6ea700e981
commit c05ea5bbd8

View file

@ -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)
)
}