@uppy/dashboard - npm Package Compare versions

Comparing version 1.20.2 to 1.21.0

lib/components/EditorPanel.js

@@ -27,3 +27,7 @@ var _require = require('preact'),
     onClick: props.hideAllPanels
-  }, props.i18n('done'))), h("div", {
+  }, props.i18n('cancel')), h("button", {
+    className: "uppy-DashboardContent-save",
+    type: "button",
+    onClick: props.saveFileEditor
+  }, props.i18n('save'))), h("div", {
     className: "uppy-DashboardContent-panelBody"
@@ -30,0 +34,0 @@ }, props.editors.map(function (target) {

lib/components/FileCard/index.js

@@ -13,2 +13,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+var cuid = require('cuid');
+
 var getFileTypeIcon = require('../../utils/getFileTypeIcon');
@@ -28,12 +30,2 @@
 
-    _this.saveOnEnter = function (ev) {
-      if (ev.keyCode === 13) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        var file = _this.props.files[_this.props.fileCardFor];
-
-        _this.props.saveFileCard(_this.state.formState, file.id);
-      }
-    };
-
     _this.updateMeta = function (newVal, name) {
@@ -47,3 +39,6 @@ var _extends2;
 
-    _this.handleSave = function () {
+    _this.form = document.createElement('form');
+
+    _this.handleSave = function (e) {
+      e.preventDefault();
       var fileID = _this.props.fileCardFor;
@@ -65,2 +60,5 @@
         var id = "uppy-Dashboard-FileCard-input-" + field.id;
+
+        var required = _this.props.requiredMetaFields.includes(field.id);
+
         return h("fieldset", {
@@ -77,12 +75,13 @@ key: field.id,
           },
-          fieldCSSClasses: fieldCSSClasses
+          fieldCSSClasses: fieldCSSClasses,
+          required: required,
+          form: _this.form.id
         }, h) : h("input", {
           className: fieldCSSClasses.text,
           id: id,
+          form: _this.form.id,
           type: field.type || 'text',
+          required: required,
           value: _this.state.formState[field.id],
           placeholder: field.placeholder,
-          onKeyUp: _this.saveOnEnter,
-          onKeyDown: _this.saveOnEnter,
-          onKeyPress: _this.saveOnEnter,
           onInput: function onInput(ev) {
@@ -96,3 +95,3 @@ return _this.updateMeta(ev.target.value, field.id);
 
-    var _file = _this.props.files[_this.props.fileCardFor];
+    var file = _this.props.files[_this.props.fileCardFor];
 
@@ -104,3 +103,3 @@ var _metaFields = _this.getMetaFields() || [];
     _metaFields.forEach(function (field) {
-      storedMetaData[field.id] = _file.meta[field.id] || '';
+      storedMetaData[field.id] = file.meta[field.id] || '';
     });
@@ -111,2 +110,3 @@
     };
+    _this.form.id = cuid();
     return _this;
@@ -117,2 +117,13 @@ }
 
+  // TODO(aduh95): move this to `UNSAFE_componentWillMount` when updating to Preact X+.
+  _proto.componentWillMount = function componentWillMount() {
+    this.form.addEventListener('submit', this.handleSave);
+    document.body.appendChild(this.form);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.form.removeEventListener('submit', this.handleSave);
+    document.body.removeChild(this.form);
+  };
+
   _proto.getMetaFields = function getMetaFields() {
@@ -147,5 +158,6 @@ return typeof this.props.metaFields === 'function' ? this.props.metaFields(this.props.files[this.props.fileCardFor]) : this.props.metaFields;
       type: "button",
+      form: this.form.id,
       title: this.props.i18n('finishEditingFile'),
-      onClick: this.handleSave
-    }, this.props.i18n('done'))), h("div", {
+      onClick: this.handleCancel
+    }, this.props.i18n('cancel'))), h("div", {
       className: "uppy-Dashboard-FileCard-inner"
@@ -164,3 +176,4 @@ }, h("div", {
         return _this2.props.openFileEditor(file);
-      }
+      },
+      form: this.form.id
     }, this.props.i18n('editFile'))), h("div", {
@@ -172,8 +185,9 @@ className: "uppy-Dashboard-FileCard-info"
       className: "uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-FileCard-actionsBtn",
-      type: "button",
-      onClick: this.handleSave
+      type: "submit",
+      form: this.form.id
     }, this.props.i18n('saveChanges')), h("button", {
       className: "uppy-u-reset uppy-c-btn uppy-c-btn-link uppy-Dashboard-FileCard-actionsBtn",
       type: "button",
-      onClick: this.handleCancel
+      onClick: this.handleCancel,
+      form: this.form.id
     }, this.props.i18n('cancel')))));
@@ -180,0 +194,0 @@ };

lib/components/PickerPanelContent.js

@@ -30,3 +30,3 @@ var _require = require('preact'),
     onClick: props.hideAllPanels
-  }, props.i18n('done'))), h("div", {
+  }, props.i18n('cancel'))), h("div", {
     className: "uppy-DashboardContent-panelBody"
@@ -33,0 +33,0 @@ }, props.getPlugin(props.activePickerPanel.id).render(props.state)));

lib/index.js

@@ -203,2 +203,15 @@ var _class, _temp;
 
+    _this.saveFileEditor = function () {
+      var _this$getPluginState4 = _this.getPluginState(),
+          targets = _this$getPluginState4.targets;
+
+      var editors = _this._getEditors(targets);
+
+      editors.forEach(function (editor) {
+        _this.uppy.getPlugin(editor.id).save();
+      });
+
+      _this.hideAllPanels();
+    };
+
     _this.openModal = function () {
@@ -259,5 +272,5 @@ var _createPromise = createPromise(),
 
-      var _this$getPluginState4 = _this.getPluginState(),
-          isHidden = _this$getPluginState4.isHidden,
-          isClosing = _this$getPluginState4.isClosing;
+      var _this$getPluginState5 = _this.getPluginState(),
+          isHidden = _this$getPluginState5.isHidden,
+          isClosing = _this$getPluginState5.isClosing;
 
@@ -920,2 +933,3 @@ if (isHidden || isClosing) {
         showFileEditor: pluginState.showFileEditor,
+        saveFileEditor: _this.saveFileEditor,
         disableAllFocusableElements: _this.disableAllFocusableElements,
@@ -975,2 +989,3 @@ animateOpenClose: _this.opts.animateOpenClose,
         maxNumberOfFiles: _this.uppy.opts.restrictions.maxNumberOfFiles,
+        requiredMetaFields: _this.uppy.opts.restrictions.requiredMetaFields,
         showSelectedFiles: _this.opts.showSelectedFiles,
@@ -1144,3 +1159,2 @@ handleCancelRestore: _this.handleCancelRestore,
         fileSource: 'File source: %{name}',
-        done: 'Done',
         back: 'Back',
@@ -1152,2 +1166,3 @@ addMore: 'Add more',
         finishEditingFile: 'Finish editing file',
+        save: 'Save',
         saveChanges: 'Save changes',
@@ -1271,2 +1286,2 @@ cancel: 'Cancel',
   return Dashboard;
-}(Plugin), _class.VERSION = "1.20.2", _temp);
+}(Plugin), _class.VERSION = "1.21.0", _temp);

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "1.20.2",
+  "version": "1.21.0",
   "license": "MIT",
@@ -43,3 +43,3 @@ "main": "lib/index.js",
   },
-  "gitHead": "4b782ffbbb443672843d7b4096956bed3b11d612"
+  "gitHead": "28997bc5c733e3f7ab7183d6cd61d2dfd74f71e4"
 }

src/components/EditorPanel.js

@@ -25,4 +25,11 @@ const { h } = require('preact')
         >
-          {props.i18n('done')}
+          {props.i18n('cancel')}
         </button>
+        <button
+          className="uppy-DashboardContent-save"
+          type="button"
+          onClick={props.saveFileEditor}
+        >
+          {props.i18n('save')}
+        </button>
       </div>
@@ -29,0 +36,0 @@ <div className="uppy-DashboardContent-panelBody">

src/components/FileCard/index.js

 const { h, Component } = require('preact')
 const classNames = require('classnames')
+const cuid = require('cuid')
 const getFileTypeIcon = require('../../utils/getFileTypeIcon')
@@ -22,11 +23,4 @@ const ignoreEvent = require('../../utils/ignoreEvent.js')
     }
-  }
 
-  saveOnEnter = (ev) => {
-    if (ev.keyCode === 13) {
-      ev.stopPropagation()
-      ev.preventDefault()
-      const file = this.props.files[this.props.fileCardFor]
-      this.props.saveFileCard(this.state.formState, file.id)
-    }
+    this.form.id = cuid()
   }
@@ -43,3 +37,6 @@
 
-  handleSave = () => {
+  form = document.createElement('form');
+
+  handleSave = (e) => {
+    e.preventDefault()
     const fileID = this.props.fileCardFor
@@ -53,2 +50,13 @@ this.props.saveFileCard(this.state.formState, fileID)
 
+  // TODO(aduh95): move this to `UNSAFE_componentWillMount` when updating to Preact X+.
+  componentWillMount () {
+    this.form.addEventListener('submit', this.handleSave)
+    document.body.appendChild(this.form)
+  }
+
+  componentWillUnmount () {
+    this.form.removeEventListener('submit', this.handleSave)
+    document.body.removeChild(this.form)
+  }
+
   renderMetaFields = () => {
@@ -62,2 +70,3 @@ const metaFields = this.getMetaFields() || []
       const id = `uppy-Dashboard-FileCard-input-${field.id}`
+      const required = this.props.requiredMetaFields.includes(field.id)
       return (
@@ -71,2 +80,4 @@ <fieldset key={field.id} className="uppy-Dashboard-FileCard-fieldset">
               fieldCSSClasses,
+              required,
+              form: this.form.id,
             }, h)
@@ -77,8 +88,7 @@ : (
                 id={id}
+                form={this.form.id}
                 type={field.type || 'text'}
+                required={required}
                 value={this.state.formState[field.id]}
                 placeholder={field.placeholder}
-                onKeyUp={this.saveOnEnter}
-                onKeyDown={this.saveOnEnter}
-                onKeyPress={this.saveOnEnter}
                 onInput={ev => this.updateMeta(ev.target.value, field.id)}
@@ -121,6 +131,7 @@ data-uppy-super-focusable
             type="button"
+            form={this.form.id}
             title={this.props.i18n('finishEditingFile')}
-            onClick={this.handleSave}
+            onClick={this.handleCancel}
           >
-            {this.props.i18n('done')}
+            {this.props.i18n('cancel')}
           </button>
@@ -138,2 +149,3 @@ </div>
                 onClick={() => this.props.openFileEditor(file)}
+                form={this.form.id}
               >
@@ -152,4 +164,4 @@ {this.props.i18n('editFile')}
               className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-FileCard-actionsBtn"
-              type="button"
-              onClick={this.handleSave}
+              type="submit"
+              form={this.form.id}
             >
@@ -162,2 +174,3 @@ {this.props.i18n('saveChanges')}
               onClick={this.handleCancel}
+              form={this.form.id}
             >
@@ -164,0 +177,0 @@ {this.props.i18n('cancel')}

src/components/PickerPanelContent.js

@@ -26,3 +26,3 @@ const { h } = require('preact')
         >
-          {props.i18n('done')}
+          {props.i18n('cancel')}
         </button>
@@ -29,0 +29,0 @@ </div>

src/index.js

@@ -64,3 +64,2 @@ const { h } = require('preact')
         fileSource: 'File source: %{name}',
-        done: 'Done',
         back: 'Back',
@@ -72,2 +71,3 @@ addMore: 'Add more',
         finishEditingFile: 'Finish editing file',
+        save: 'Save',
         saveChanges: 'Save changes',
@@ -287,2 +287,13 @@ cancel: 'Cancel',
 
+  saveFileEditor = () => {
+    const { targets } = this.getPluginState()
+    const editors = this._getEditors(targets)
+
+    editors.forEach((editor) => {
+      this.uppy.getPlugin(editor.id).save()
+    })
+
+    this.hideAllPanels()
+  }
+
   openModal = () => {
@@ -965,2 +976,3 @@ const { promise, resolve } = createPromise()
       showFileEditor: pluginState.showFileEditor,
+      saveFileEditor: this.saveFileEditor,
       disableAllFocusableElements: this.disableAllFocusableElements,
@@ -1020,2 +1032,3 @@ animateOpenClose: this.opts.animateOpenClose,
       maxNumberOfFiles: this.uppy.opts.restrictions.maxNumberOfFiles,
+      requiredMetaFields: this.uppy.opts.restrictions.requiredMetaFields,
       showSelectedFiles: this.opts.showSelectedFiles,
@@ -1022,0 +1035,0 @@ handleCancelRestore: this.handleCancelRestore,

types/generatedLocale.d.ts

@@ -14,3 +14,2 @@ import Uppy = require('@uppy/core')
   | 'fileSource'
-  | 'done'
   | 'back'
@@ -22,2 +21,3 @@ | 'addMore'
   | 'finishEditingFile'
+  | 'save'
   | 'saveChanges'
@@ -24,0 +24,0 @@ | 'cancel'

types/index.d.ts

@@ -8,2 +8,4 @@ import Uppy = require('@uppy/core')
   onChange: (newVal: string) => void
+  fieldCSSClasses: { text: string }
+  required?: boolean
 }
@@ -10,0 +12,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

640602

increased by0.81%

Lines of code

9094

increased by0.71%

No dependency changes