dashboard: Refactor FileCard component to fix loosing metadata state on re-renders (#1656)

* Refactor to fix loosing metadata state on re-renders

* uppy-DashboardContent-bar shouldn’t shrink

* Populate formState in constructor, empty meta value if undefined, pass field.id from oninput

* Use local styles instead of unpkg CDN

* update locales and stargazers

packages/@uppy/dashboard/src/components/FileCard.js

@@ -7,57 +7,71 @@ class FileCard extends Component {
   constructor (props) {
     super(props)
 
-    this.meta = {}
-
-    this.tempStoreMetaOrSubmit = this.tempStoreMetaOrSubmit.bind(this)
+    this.tempStoreMeta = this.tempStoreMeta.bind(this)
+    this.saveOnEnter = this.saveOnEnter.bind(this)
     this.renderMetaFields = this.renderMetaFields.bind(this)
     this.handleSave = this.handleSave.bind(this)
     this.handleCancel = this.handleCancel.bind(this)
-  }
 
-  tempStoreMetaOrSubmit (ev) {
     const file = this.props.files[this.props.fileCardFor]
+    const metaFields = this.props.metaFields || []
+
+    const storedMetaData = {}
+    metaFields.forEach((field) => {
+      storedMetaData[field.id] = file.meta[field.id] || ''
+    })
+
+    this.state = {
+      formState: storedMetaData
+    }
+  }
 
+  saveOnEnter (ev) {
     if (ev.keyCode === 13) {
+      const file = this.props.files[this.props.fileCardFor]
       ev.stopPropagation()
       ev.preventDefault()
-      this.props.saveFileCard(this.meta, file.id)
-      return
+      this.props.saveFileCard(this.state.formState, file.id)
     }
+  }
 
-    const value = ev.target.value
-    const name = ev.target.dataset.name
-    this.meta[name] = value
+  tempStoreMeta (ev, name) {
+    this.setState({
+      formState: {
+        ...this.state.formState,
+        [name]: ev.target.value
+      }
+    })
+  }
+
+  handleSave (ev) {
+    const fileID = this.props.fileCardFor
+    this.props.saveFileCard(this.state.formState, fileID)
+  }
+
+  handleCancel (ev) {
+    this.props.toggleFileCard()
   }
 
   renderMetaFields (file) {
     const metaFields = this.props.metaFields || []
+
     return metaFields.map((field, i) => {
       return <fieldset class="uppy-DashboardFileCard-fieldset">
         <label class="uppy-DashboardFileCard-label">{field.name}</label>
         <input class="uppy-u-reset uppy-c-textInput uppy-DashboardFileCard-input"
           type="text"
-          data-name={field.id}
-          value={file.meta[field.id]}
+          value={this.state.formState[field.id]}
           placeholder={field.placeholder}
-          onkeyup={this.tempStoreMetaOrSubmit}
-          onkeydown={this.tempStoreMetaOrSubmit}
-          onkeypress={this.tempStoreMetaOrSubmit}
+          onkeyup={this.saveOnEnter}
+          onkeydown={this.saveOnEnter}
+          onkeypress={this.saveOnEnter}
+          oninput={ev => this.tempStoreMeta(ev, field.id)}
           data-uppy-super-focusable />
       </fieldset>
     })
   }
 
-  handleSave (ev) {
-    const fileID = this.props.fileCardFor
-    this.props.saveFileCard(this.meta, fileID)
-  }
-
-  handleCancel (ev) {
-    this.meta = {}
-    this.props.toggleFileCard()
-  }
-
   render () {
     const file = this.props.files[this.props.fileCardFor]
 

packages/@uppy/dashboard/src/style.scss

@@ -391,6 +391,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-shrink: 0;
   height: 40px;
   width: 100%;
   border-bottom: 1px solid $gray-200;

website/src/_template/list_of_locale_packs.md

@@ -1,19 +1,20 @@
 <!-- WARNING! This file was automatically injected. Please run "inject.js" to re-generate -->
 
 
-| 14 Locales | NPM                | CDN                 | Source on GitHub |
+| 15 Locales | NPM                | CDN                 | Source on GitHub |
 | --------------- | ------------------ | ------------------- | ---------------- |
-| Chinese<br/> <small>China</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/zh_CN</code> | [`zh_CN.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/zh_CN.min.js) | ✏️ [`zh_CN.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/zh_CN.js) |
-| Chinese<br/> <small>Taiwan, Province of China</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/zh_TW</code> | [`zh_TW.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/zh_TW.min.js) | ✏️ [`zh_TW.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/zh_TW.js) |
-| Dutch<br/> <small>Netherlands</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/nl_NL</code> | [`nl_NL.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/nl_NL.min.js) | ✏️ [`nl_NL.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/nl_NL.js) |
-| English<br/> <small>United States</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/en_US</code> | [`en_US.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/en_US.min.js) | ✏️ [`en_US.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/en_US.js) |
-| French<br/> <small>France</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/fr_FR</code> | [`fr_FR.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/fr_FR.min.js) | ✏️ [`fr_FR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/fr_FR.js) |
-| German<br/> <small>Germany</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/de_DE</code> | [`de_DE.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/de_DE.min.js) | ✏️ [`de_DE.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/de_DE.js) |
-| Hungarian<br/> <small>Hungary</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/hu_HU</code> | [`hu_HU.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/hu_HU.min.js) | ✏️ [`hu_HU.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/hu_HU.js) |
-| Italian<br/> <small>Italy</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/it_IT</code> | [`it_IT.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/it_IT.min.js) | ✏️ [`it_IT.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/it_IT.js) |
-| Persian<br/> <small>Iran, Islamic Republic of</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/fa_IR</code> | [`fa_IR.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/fa_IR.min.js) | ✏️ [`fa_IR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/fa_IR.js) |
-| Portuguese<br/> <small>Brazil</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/pt_BR</code> | [`pt_BR.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/pt_BR.min.js) | ✏️ [`pt_BR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/pt_BR.js) |
-| Russian<br/> <small>Russian Federation</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/ru_RU</code> | [`ru_RU.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/ru_RU.min.js) | ✏️ [`ru_RU.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/ru_RU.js) |
-| Serbian<br/> <small>Serbia</small><br /><small>(Latin)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/sr_RS_Latin</code> | [`sr_RS_Latin.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/sr_RS_Latin.min.js) | ✏️ [`sr_RS_Latin.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/sr_RS_Latin.js) |
-| Spanish<br/> <small>Greenland</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/es_GL</code> | [`es_GL.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/es_GL.min.js) | ✏️ [`es_GL.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/es_GL.js) |
-| Spanish<br/> <small>Spain</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/es_ES</code> | [`es_ES.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.3.0/es_ES.min.js) | ✏️ [`es_ES.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/es_ES.js) |
+| Chinese<br/> <small>China</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/zh_CN</code> | [`zh_CN.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/zh_CN.min.js) | ✏️ [`zh_CN.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/zh_CN.js) |
+| Chinese<br/> <small>Taiwan, Province of China</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/zh_TW</code> | [`zh_TW.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/zh_TW.min.js) | ✏️ [`zh_TW.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/zh_TW.js) |
+| Dutch<br/> <small>Netherlands</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/nl_NL</code> | [`nl_NL.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/nl_NL.min.js) | ✏️ [`nl_NL.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/nl_NL.js) |
+| English<br/> <small>United States</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/en_US</code> | [`en_US.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/en_US.min.js) | ✏️ [`en_US.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/en_US.js) |
+| French<br/> <small>France</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/fr_FR</code> | [`fr_FR.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/fr_FR.min.js) | ✏️ [`fr_FR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/fr_FR.js) |
+| German<br/> <small>Germany</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/de_DE</code> | [`de_DE.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/de_DE.min.js) | ✏️ [`de_DE.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/de_DE.js) |
+| Hungarian<br/> <small>Hungary</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/hu_HU</code> | [`hu_HU.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/hu_HU.min.js) | ✏️ [`hu_HU.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/hu_HU.js) |
+| Italian<br/> <small>Italy</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/it_IT</code> | [`it_IT.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/it_IT.min.js) | ✏️ [`it_IT.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/it_IT.js) |
+| Japanese<br/> <small>Japan</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/ja_JP</code> | [`ja_JP.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/ja_JP.min.js) | ✏️ [`ja_JP.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/ja_JP.js) |
+| Persian<br/> <small>Iran, Islamic Republic of</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/fa_IR</code> | [`fa_IR.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/fa_IR.min.js) | ✏️ [`fa_IR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/fa_IR.js) |
+| Portuguese<br/> <small>Brazil</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/pt_BR</code> | [`pt_BR.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/pt_BR.min.js) | ✏️ [`pt_BR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/pt_BR.js) |
+| Russian<br/> <small>Russian Federation</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/ru_RU</code> | [`ru_RU.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/ru_RU.min.js) | ✏️ [`ru_RU.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/ru_RU.js) |
+| Serbian<br/> <small>Serbia</small><br /><small>(Latin)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/sr_RS_Latin</code> | [`sr_RS_Latin.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/sr_RS_Latin.min.js) | ✏️ [`sr_RS_Latin.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/sr_RS_Latin.js) |
+| Spanish<br/> <small>Greenland</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/es_GL</code> | [`es_GL.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/es_GL.min.js) | ✏️ [`es_GL.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/es_GL.js) |
+| Spanish<br/> <small>Spain</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/es_ES</code> | [`es_ES.min.js`](https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/es_ES.min.js) | ✏️ [`es_ES.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/es_ES.js) |

website/src/examples/xhrupload/app.html

@@ -1,6 +1,5 @@
 <!-- Basic Uppy styles -->
-<link rel="stylesheet" href="https://unpkg.com/@uppy/file-input/dist/style.min.css">
-<link rel="stylesheet" href="https://unpkg.com/@uppy/progress-bar/dist/style.min.css">
+<link rel="stylesheet" href="/uppy/uppy.min.css">
 
 <div class="UppyForm">
   <form action="//api2.transloadit.com">

website/themes/uppy/layout/partials/generated_stargazers.ejs

@@ -1 +1 @@
-19683
+19835