@uppy/dashboard - npm Package Compare versions

Comparing version 0.26.0 to 0.27.0

lib/index.js

@@ -14,3 +14,3 @@ var _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; };
 var dragDrop = require('drag-drop');
-var DashboardUI = require('./Dashboard');
+var DashboardUI = require('./components/Dashboard');
 var StatusBar = require('@uppy/status-bar');
@@ -22,4 +22,5 @@ var Informer = require('@uppy/informer');
 var prettyBytes = require('prettier-bytes');
+var throttle = require('lodash.throttle');
 
-var _require2 = require('./icons'),
+var _require2 = require('./components/icons'),
     defaultTabIcon = _require2.defaultTabIcon;
@@ -59,2 +60,4 @@
         importFrom: 'Import from %{name}',
+        addingMoreFiles: 'Adding more files',
+        addMoreFiles: 'Add more files',
         dashboardWindowTitle: 'Uppy Dashboard Window (Press escape to close)',
@@ -67,2 +70,3 @@ dashboardTitle: 'Uppy Dashboard',
         done: 'Done',
+        back: 'Back',
         name: 'Name',
@@ -72,2 +76,3 @@ removeFile: 'Remove file',
         editing: 'Editing %{file}',
+        edit: 'Edit',
         finishEditingFile: 'Finish editing file',
@@ -78,3 +83,3 @@ saveChanges: 'Save changes',
         myDevice: 'My Device',
-        dropPasteImport: 'Drop files here, paste, import from one of the locations above or %{browse}',
+        dropPasteImport: 'Drop files here, paste, %{browse} or import from',
         dropPaste: 'Drop files here, paste or %{browse}',
@@ -90,2 +95,6 @@ browse: 'browse',
         retryUpload: 'Retry upload',
+        xFilesSelected: {
+          0: '%{smart_count} file selected',
+          1: '%{smart_count} files selected'
+        },
         uploadXFiles: {
@@ -163,2 +172,3 @@ 0: 'Upload %{smart_count} file',
     _this.toggleFileCard = _this.toggleFileCard.bind(_this);
+    _this.toggleAddFilesPanel = _this.toggleAddFilesPanel.bind(_this);
     _this.handleDrop = _this.handleDrop.bind(_this);
@@ -168,2 +178,3 @@ _this.handlePaste = _this.handlePaste.bind(_this);
     _this.updateDashboardElWidth = _this.updateDashboardElWidth.bind(_this);
+    _this.throttledUpdateDashboardElWidth = throttle(_this.updateDashboardElWidth, 500, { leading: true, trailing: true });
     _this.render = _this.render.bind(_this);
@@ -216,3 +227,4 @@ _this.install = _this.install.bind(_this);
     this.setPluginState({
-      activePanel: false
+      activePanel: false,
+      showAddFilesPanel: false
     });
@@ -244,2 +256,5 @@ };
     var nodes = this.el.querySelectorAll(FOCUSABLE_ELEMENTS);
+    console.log(Object.keys(nodes).map(function (key) {
+      return nodes[key];
+    }));
     return Object.keys(nodes).map(function (key) {
@@ -303,5 +318,3 @@ return nodes[key];
   Dashboard.prototype.openModal = function openModal() {
-    this.setPluginState({
-      isHidden: false
-    });
+    var _this2 = this;
 
@@ -317,2 +330,16 @@ // save scroll position
 
+    if (this.opts.animateOpenClose && this.getPluginState().isClosing) {
+      var handler = function handler() {
+        _this2.setPluginState({
+          isHidden: false
+        });
+        _this2.el.removeEventListener('animationend', handler, false);
+      };
+      this.el.addEventListener('animationend', handler, false);
+    } else {
+      this.setPluginState({
+        isHidden: false
+      });
+    }
+
     if (this.opts.browserBackButtonClose) {
@@ -331,3 +358,3 @@ this.updateBrowserHistory();
   Dashboard.prototype.closeModal = function closeModal() {
-    var _this2 = this;
+    var _this3 = this;
 
@@ -348,7 +375,7 @@ var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var handler = function handler() {
-        _this2.setPluginState({
+        _this3.setPluginState({
           isHidden: true,
           isClosing: false
         });
-        _this2.el.removeEventListener('animationend', handler, false);
+        _this3.el.removeEventListener('animationend', handler, false);
       };
@@ -394,3 +421,3 @@ this.el.addEventListener('animationend', handler, false);
   Dashboard.prototype.handlePaste = function handlePaste(ev) {
-    var _this3 = this;
+    var _this4 = this;
 
@@ -403,10 +430,10 @@ var files = toArray(ev.clipboardData.items);
       if (!blob) {
-        _this3.uppy.log('[Dashboard] File pasted, but the file blob is empty');
-        _this3.uppy.info('Error pasting file', 'error');
+        _this4.uppy.log('[Dashboard] File pasted, but the file blob is empty');
+        _this4.uppy.info('Error pasting file', 'error');
         return;
       }
-      _this3.uppy.log('[Dashboard] File pasted');
+      _this4.uppy.log('[Dashboard] File pasted');
       try {
-        _this3.uppy.addFile({
-          source: _this3.id,
+        _this4.uppy.addFile({
+          source: _this4.id,
           name: file.name,
@@ -423,3 +450,3 @@ type: file.type,
   Dashboard.prototype.handleInputChange = function handleInputChange(ev) {
-    var _this4 = this;
+    var _this5 = this;
 
@@ -431,4 +458,4 @@ ev.preventDefault();
       try {
-        _this4.uppy.addFile({
-          source: _this4.id,
+        _this5.uppy.addFile({
+          source: _this5.id,
           name: file.name,
@@ -445,3 +472,3 @@ type: file.type,
   Dashboard.prototype.initEvents = function initEvents() {
-    var _this5 = this;
+    var _this6 = this;
 
@@ -452,3 +479,3 @@ // Modal open button
       showModalTrigger.forEach(function (trigger) {
-        return trigger.addEventListener('click', _this5.openModal);
+        return trigger.addEventListener('click', _this6.openModal);
       });
@@ -463,13 +490,16 @@ }
     this.removeDragDropListener = dragDrop(this.el, function (files) {
-      _this5.handleDrop(files);
+      _this6.handleDrop(files);
     });
 
     this.updateDashboardElWidth();
-    window.addEventListener('resize', this.updateDashboardElWidth);
+    window.addEventListener('resize', this.throttledUpdateDashboardElWidth);
 
     this.uppy.on('plugin-remove', this.removeTarget);
+    this.uppy.on('file-added', function (ev) {
+      return _this6.toggleAddFilesPanel(false);
+    });
   };
 
   Dashboard.prototype.removeEvents = function removeEvents() {
-    var _this6 = this;
+    var _this7 = this;
 
@@ -479,3 +509,3 @@ var showModalTrigger = findAllDOMElements(this.opts.trigger);
       showModalTrigger.forEach(function (trigger) {
-        return trigger.removeEventListener('click', _this6.openModal);
+        return trigger.removeEventListener('click', _this7.openModal);
       });
@@ -488,2 +518,5 @@ }
     this.uppy.off('plugin-remove', this.removeTarget);
+    this.uppy.off('file-added', function (ev) {
+      return _this7.toggleAddFilesPanel(false);
+    });
   };
@@ -493,2 +526,4 @@
     var dashboardEl = this.el.querySelector('.uppy-Dashboard-inner');
+    if (!dashboardEl) return;
+
     this.uppy.log('Dashboard width: ' + dashboardEl.offsetWidth);
@@ -507,4 +542,10 @@
 
+  Dashboard.prototype.toggleAddFilesPanel = function toggleAddFilesPanel(show) {
+    this.setPluginState({
+      showAddFilesPanel: show
+    });
+  };
+
   Dashboard.prototype.handleDrop = function handleDrop(files) {
-    var _this7 = this;
+    var _this8 = this;
 
@@ -515,4 +556,4 @@ this.uppy.log('[Dashboard] Files were dropped');
       try {
-        _this7.uppy.addFile({
-          source: _this7.id,
+        _this8.uppy.addFile({
+          source: _this8.id,
           name: file.name,
@@ -529,3 +570,3 @@ type: file.type,
   Dashboard.prototype.render = function render(state) {
-    var _this8 = this;
+    var _this9 = this;
 
@@ -559,5 +600,5 @@ var pluginState = this.getPluginState();
     var attachRenderFunctionToTarget = function attachRenderFunctionToTarget(target) {
-      var plugin = _this8.uppy.getPlugin(target.id);
+      var plugin = _this9.uppy.getPlugin(target.id);
       return _extends({}, target, {
-        icon: plugin.icon || _this8.opts.defaultTabIcon,
+        icon: plugin.icon || _this9.opts.defaultTabIcon,
         render: plugin.render
@@ -568,3 +609,3 @@ });
     var isSupported = function isSupported(target) {
-      var plugin = _this8.uppy.getPlugin(target.id);
+      var plugin = _this9.uppy.getPlugin(target.id);
       // If the plugin does not provide a `supported` check, assume the plugin works everywhere.
@@ -586,5 +627,5 @@ if (typeof plugin.isSupported !== 'function') {
     var startUpload = function startUpload(ev) {
-      _this8.uppy.upload().catch(function (err) {
+      _this9.uppy.upload().catch(function (err) {
         // Log error.
-        _this8.uppy.log(err.stack || err.message || err);
+        _this9.uppy.log(err.stack || err.message || err);
       });
@@ -594,9 +635,9 @@ };
     var cancelUpload = function cancelUpload(fileID) {
-      _this8.uppy.emit('upload-cancel', fileID);
-      _this8.uppy.removeFile(fileID);
+      _this9.uppy.emit('upload-cancel', fileID);
+      _this9.uppy.removeFile(fileID);
     };
 
     var saveFileCard = function saveFileCard(meta, fileID) {
-      _this8.uppy.setFileMeta(fileID, meta);
-      _this8.toggleFileCard();
+      _this9.uppy.setFileMeta(fileID, meta);
+      _this9.toggleFileCard();
     };
@@ -643,4 +684,7 @@
       cancelUpload: cancelUpload,
+      cancelAll: this.uppy.cancelAll,
       fileCardFor: pluginState.fileCardFor,
       toggleFileCard: this.toggleFileCard,
+      toggleAddFilesPanel: this.toggleAddFilesPanel,
+      showAddFilesPanel: pluginState.showAddFilesPanel,
       saveFileCard: saveFileCard,
@@ -654,2 +698,3 @@ updateDashboardElWidth: this.updateDashboardElWidth,
       isWide: pluginState.containerWidth > 400,
+      containerWidth: pluginState.containerWidth,
       isTargetDOMEl: this.isTargetDOMEl,
@@ -662,7 +707,7 @@ allowedFileTypes: this.uppy.opts.restrictions.allowedFileTypes,
   Dashboard.prototype.discoverProviderPlugins = function discoverProviderPlugins() {
-    var _this9 = this;
+    var _this10 = this;
 
     this.uppy.iteratePlugins(function (plugin) {
-      if (plugin && !plugin.target && plugin.opts && plugin.opts.target === _this9.constructor) {
-        _this9.addTarget(plugin);
+      if (plugin && !plugin.target && plugin.opts && plugin.opts.target === _this10.constructor) {
+        _this10.addTarget(plugin);
       }
@@ -673,3 +718,3 @@ });
   Dashboard.prototype.install = function install() {
-    var _this10 = this;
+    var _this11 = this;
 
@@ -680,2 +725,3 @@ // Set default state for Dashboard
       showFileCard: false,
+      showAddFilesPanel: false,
       activePanel: false,
@@ -693,4 +739,4 @@ metaFields: this.opts.metaFields,
     plugins.forEach(function (pluginID) {
-      var plugin = _this10.uppy.getPlugin(pluginID);
-      if (plugin) plugin.mount(_this10, plugin);
+      var plugin = _this11.uppy.getPlugin(pluginID);
+      if (plugin) plugin.mount(_this11, plugin);
     });
@@ -731,3 +777,3 @@
   Dashboard.prototype.uninstall = function uninstall() {
-    var _this11 = this;
+    var _this12 = this;
 
@@ -753,3 +799,3 @@ if (!this.opts.disableInformer) {
     plugins.forEach(function (pluginID) {
-      var plugin = _this11.uppy.getPlugin(pluginID);
+      var plugin = _this12.uppy.getPlugin(pluginID);
       if (plugin) plugin.unmount();
@@ -756,0 +802,0 @@ });

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "license": "MIT",
@@ -26,14 +26,17 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/informer": "0.26.0",
-    "@uppy/provider-views": "0.26.0",
-    "@uppy/status-bar": "0.26.0",
-    "@uppy/thumbnail-generator": "0.26.0",
-    "@uppy/utils": "0.26.0",
+    "@uppy/informer": "0.27.0",
+    "@uppy/provider-views": "0.27.0",
+    "@uppy/status-bar": "0.27.0",
+    "@uppy/thumbnail-generator": "0.27.0",
+    "@uppy/utils": "0.27.0",
     "classnames": "^2.2.6",
-    "drag-drop": "^2.14.0",
+    "drag-drop": "2.13.3",
+    "lodash.throttle": "^4.1.1",
     "preact": "^8.2.9",
+    "preact-css-transition-group": "^1.3.0",
     "prettier-bytes": "^1.0.4"
   },
   "devDependencies": {
-    "@uppy/core": "0.26.0"
+    "@uppy/core": "0.27.0",
+    "@uppy/google-drive": "0.27.0"
   },
@@ -40,0 +43,0 @@ "peerDependencies": {

src/index.js

 const { Plugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const dragDrop = require('drag-drop')
-const DashboardUI = require('./Dashboard')
+const DashboardUI = require('./components/Dashboard')
 const StatusBar = require('@uppy/status-bar')
@@ -11,3 +11,4 @@ const Informer = require('@uppy/informer')
 const prettyBytes = require('prettier-bytes')
-const { defaultTabIcon } = require('./icons')
+const throttle = require('lodash.throttle')
+const { defaultTabIcon } = require('./components/icons')
 
@@ -51,2 +52,4 @@ // Some code for managing focus was adopted from https://github.com/ghosh/micromodal
         importFrom: 'Import from %{name}',
+        addingMoreFiles: 'Adding more files',
+        addMoreFiles: 'Add more files',
         dashboardWindowTitle: 'Uppy Dashboard Window (Press escape to close)',
@@ -59,2 +62,3 @@ dashboardTitle: 'Uppy Dashboard',
         done: 'Done',
+        back: 'Back',
         name: 'Name',
@@ -64,2 +68,3 @@ removeFile: 'Remove file',
         editing: 'Editing %{file}',
+        edit: 'Edit',
         finishEditingFile: 'Finish editing file',
@@ -70,3 +75,3 @@ saveChanges: 'Save changes',
         myDevice: 'My Device',
-        dropPasteImport: 'Drop files here, paste, import from one of the locations above or %{browse}',
+        dropPasteImport: 'Drop files here, paste, %{browse} or import from',
         dropPaste: 'Drop files here, paste or %{browse}',
@@ -82,2 +87,6 @@ browse: 'browse',
         retryUpload: 'Retry upload',
+        xFilesSelected: {
+          0: '%{smart_count} file selected',
+          1: '%{smart_count} files selected'
+        },
         uploadXFiles: {
@@ -155,2 +164,3 @@ 0: 'Upload %{smart_count} file',
     this.toggleFileCard = this.toggleFileCard.bind(this)
+    this.toggleAddFilesPanel = this.toggleAddFilesPanel.bind(this)
     this.handleDrop = this.handleDrop.bind(this)
@@ -160,2 +170,3 @@ this.handlePaste = this.handlePaste.bind(this)
     this.updateDashboardElWidth = this.updateDashboardElWidth.bind(this)
+    this.throttledUpdateDashboardElWidth = throttle(this.updateDashboardElWidth, 500, { leading: true, trailing: true })
     this.render = this.render.bind(this)
@@ -207,3 +218,4 @@ this.install = this.install.bind(this)
     this.setPluginState({
-      activePanel: false
+      activePanel: false,
+      showAddFilesPanel: false
     })
@@ -234,2 +246,3 @@ }
     const nodes = this.el.querySelectorAll(FOCUSABLE_ELEMENTS)
+    console.log(Object.keys(nodes).map((key) => nodes[key]))
     return Object.keys(nodes).map((key) => nodes[key])
@@ -289,6 +302,2 @@ }
   openModal () {
-    this.setPluginState({
-      isHidden: false
-    })
-
     // save scroll position
@@ -303,2 +312,16 @@ this.savedScrollPosition = window.scrollY
 
+    if (this.opts.animateOpenClose && this.getPluginState().isClosing) {
+      const handler = () => {
+        this.setPluginState({
+          isHidden: false
+        })
+        this.el.removeEventListener('animationend', handler, false)
+      }
+      this.el.addEventListener('animationend', handler, false)
+    } else {
+      this.setPluginState({
+        isHidden: false
+      })
+    }
+
     if (this.opts.browserBackButtonClose) {
@@ -434,5 +457,6 @@ this.updateBrowserHistory()
     this.updateDashboardElWidth()
-    window.addEventListener('resize', this.updateDashboardElWidth)
+    window.addEventListener('resize', this.throttledUpdateDashboardElWidth)
 
     this.uppy.on('plugin-remove', this.removeTarget)
+    this.uppy.on('file-added', (ev) => this.toggleAddFilesPanel(false))
   }
@@ -450,2 +474,3 @@
     this.uppy.off('plugin-remove', this.removeTarget)
+    this.uppy.off('file-added', (ev) => this.toggleAddFilesPanel(false))
   }
@@ -455,2 +480,4 @@
     const dashboardEl = this.el.querySelector('.uppy-Dashboard-inner')
+    if (!dashboardEl) return
+
     this.uppy.log(`Dashboard width: ${dashboardEl.offsetWidth}`)
@@ -469,2 +496,8 @@
 
+  toggleAddFilesPanel (show) {
+    this.setPluginState({
+      showAddFilesPanel: show
+    })
+  }
+
   handleDrop (files) {
@@ -595,4 +628,7 @@ this.uppy.log('[Dashboard] Files were dropped')
       cancelUpload: cancelUpload,
+      cancelAll: this.uppy.cancelAll,
       fileCardFor: pluginState.fileCardFor,
       toggleFileCard: this.toggleFileCard,
+      toggleAddFilesPanel: this.toggleAddFilesPanel,
+      showAddFilesPanel: pluginState.showAddFilesPanel,
       saveFileCard: saveFileCard,
@@ -606,2 +642,3 @@ updateDashboardElWidth: this.updateDashboardElWidth,
       isWide: pluginState.containerWidth > 400,
+      containerWidth: pluginState.containerWidth,
       isTargetDOMEl: this.isTargetDOMEl,
@@ -626,2 +663,3 @@ allowedFileTypes: this.uppy.opts.restrictions.allowedFileTypes,
       showFileCard: false,
+      showAddFilesPanel: false,
       activePanel: false,
@@ -628,0 +666,0 @@ metaFields: this.opts.metaFields,

src/index.test.js

 const Core = require('@uppy/core')
 const DashboardPlugin = require('./index')
 const StatusBarPlugin = require('@uppy/status-bar')
+const GoogleDrivePlugin = require('@uppy/google-drive')
 
@@ -13,3 +14,46 @@ describe('Dashboard', () => {
     }).not.toThrow()
+
+    core.close()
   })
+
+  it('works without any remote provider plugins', () => {
+    const core = new Core()
+
+    expect(() => {
+      core.use(DashboardPlugin, {
+        inline: true,
+        target: 'body'
+      })
+    }).not.toThrow()
+
+    core.close()
+  })
+
+  it('works when targeting remote provider plugins using `target`', () => {
+    const core = new Core()
+    expect(() => {
+      core.use(DashboardPlugin, {
+        inline: true,
+        target: 'body'
+      })
+      core.use(GoogleDrivePlugin, { target: DashboardPlugin, serverUrl: 'https://fake.uppy.io/' })
+    }).not.toThrow()
+
+    core.close()
+  })
+
+  it('works when passing plugins in `plugins` array', () => {
+    const core = new Core()
+    core.use(GoogleDrivePlugin, { serverUrl: 'https://fake.uppy.io/' })
+
+    expect(() => {
+      core.use(DashboardPlugin, {
+        inline: true,
+        target: 'body',
+        plugins: ['GoogleDrive']
+      })
+    }).not.toThrow()
+
+    core.close()
+  })
 })

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

283664

increased by7.84%

Number of package files

62

increased by24%

Lines of code

5158

increased by8.96%

Worsened metrics

Dependency count

12

increased by20%

Dev dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.throttle@^4.1.1

• + Addedpreact-css-transition-group@^1.3.0

• + Added@uppy/informer@0.27.0(transitive)

• + Added@uppy/provider-views@0.27.0(transitive)

• + Added@uppy/status-bar@0.27.0(transitive)

• + Added@uppy/thumbnail-generator@0.27.0(transitive)

• + Added@uppy/utils@0.27.0(transitive)

• + Addeddrag-drop@2.13.3(transitive)

• + Addedpreact-css-transition-group@1.3.0(transitive)

• - Removed@uppy/informer@0.26.0(transitive)

• - Removed@uppy/provider-views@0.26.0(transitive)

• - Removed@uppy/status-bar@0.26.0(transitive)

• - Removed@uppy/thumbnail-generator@0.26.0(transitive)

• - Removeddrag-drop@2.14.0(transitive)

• Updated@uppy/informer@0.27.0

• Updated@uppy/provider-views@0.27.0

• Updated@uppy/status-bar@0.27.0

• Updated@uppy/thumbnail-generator@0.27.0

• Updated@uppy/utils@0.27.0

• Updateddrag-drop@2.13.3