@uppy/dashboard - npm Package Compare versions

Comparing version 0.30.3 to 0.30.4

lib/components/AddFiles.js

@@ -58,3 +58,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
         'div',
-        { 'class': 'uppy-DashboarAddFiles' },
+        { 'class': 'uppy-DashboardAddFiles' },
         h(
@@ -74,3 +74,3 @@ 'div',
           'div',
-          { 'class': 'uppy-DashboarAddFiles-info' },
+          { 'class': 'uppy-DashboardAddFiles-info' },
           this.props.note && h(
@@ -91,3 +91,3 @@ 'div',
       'div',
-      { 'class': 'uppy-DashboarAddFiles' },
+      { 'class': 'uppy-DashboardAddFiles' },
       h(
@@ -166,3 +166,3 @@ 'div',
         'div',
-        { 'class': 'uppy-DashboarAddFiles-info' },
+        { 'class': 'uppy-DashboardAddFiles-info' },
         this.props.note && h(
@@ -169,0 +169,0 @@ 'div',

lib/components/Dashboard.js

@@ -34,3 +34,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 dashboardClassName = classNames({ 'uppy-Root': props.isTargetDOMEl }, 'uppy-Dashboard', { 'Uppy--isTouchDevice': isTouchDevice() }, { 'uppy-Dashboard--animateOpenClose': props.animateOpenClose }, { 'uppy-Dashboard--isClosing': props.isClosing }, { 'uppy-Dashboard--modal': !props.inline }, { 'uppy-size--md': props.containerWidth > 576 }, { 'uppy-size--lg': props.containerWidth > 700 }, { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel });
+  var dashboardClassName = classNames({ 'uppy-Root': props.isTargetDOMEl }, 'uppy-Dashboard', { 'Uppy--isTouchDevice': isTouchDevice() }, { 'uppy-Dashboard--animateOpenClose': props.animateOpenClose }, { 'uppy-Dashboard--isClosing': props.isClosing }, { 'uppy-Dashboard--modal': !props.inline }, { 'uppy-size--md': props.containerWidth > 576 }, { 'uppy-size--lg': props.containerWidth > 700 }, { 'uppy-size--xl': props.containerWidth > 900 }, { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel }, { 'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible });
 
@@ -53,5 +53,5 @@ return h(
         } },
-      h(
+      !props.inline ? h(
         'button',
-        { 'class': 'uppy-Dashboard-close',
+        { 'class': 'uppy-u-reset uppy-Dashboard-close',
           type: 'button',
@@ -66,3 +66,3 @@ 'aria-label': props.i18n('closeModal'),
         )
-      ),
+      ) : null,
       h(
@@ -69,0 +69,0 @@ 'div',

lib/components/FileCard.js

@@ -69,3 +69,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
         ),
-        h('input', { 'class': 'uppy-c-textInput uppy-DashboardFileCard-input',
+        h('input', { 'class': 'uppy-u-reset uppy-c-textInput uppy-DashboardFileCard-input',
           type: 'text',
@@ -72,0 +72,0 @@ 'data-name': field.id,

lib/index.js

@@ -504,25 +504,15 @@ 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; };
 
-  Dashboard.prototype.initEvents = function initEvents() {
-    var _this6 = this;
+  // _Why make insides of Dashboard invisible until first ResizeObserver event is emitted?
+  //  ResizeOberserver doesn't emit the first resize event fast enough, users can see the jump from one .uppy-size-- to another (e.g. in Safari)
+  // _Why not apply visibility property to .uppy-Dashboard-inner?
+  //  Because ideally, acc to specs, ResizeObserver should see invisible elements as of width 0. So even though applying invisibility to .uppy-Dashboard-inner works now, it may not work in the future.
 
-    // Modal open button
-    var showModalTrigger = findAllDOMElements(this.opts.trigger);
-    if (!this.opts.inline && showModalTrigger) {
-      showModalTrigger.forEach(function (trigger) {
-        return trigger.addEventListener('click', _this6.openModal);
-      });
-    }
 
-    if (!this.opts.inline && !showModalTrigger) {
-      this.uppy.log('Dashboard modal trigger not found. Make sure `trigger` is set in Dashboard options unless you are planning to call openModal() method yourself', 'error');
-    }
+  Dashboard.prototype.startListeningToResize = function startListeningToResize() {
+    var _this6 = this;
 
-    // Drag Drop
-    this.removeDragDropListener = dragDrop(this.el, function (files) {
-      _this6.handleDrop(files);
-    });
-
     // Watch for Dashboard container (`.uppy-Dashboard-inner`) resize
-    // and update containerWidth/containerHeight in plugin state accordingly
-    this.ro = new ResizeObserver(function (entries, observer) {
+    // and update containerWidth/containerHeight in plugin state accordingly.
+    // Emits first event on initialization.
+    this.resizeObserver = new ResizeObserver(function (entries, observer) {
       for (var _iterator = entries, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
@@ -550,8 +540,50 @@ var _ref;
           containerWidth: width,
-          containerHeight: height
+          containerHeight: height,
+          areInsidesReadyToBeVisible: true
         });
       }
     });
-    this.ro.observe(this.el.querySelector('.uppy-Dashboard-inner'));
+    this.resizeObserver.observe(this.el.querySelector('.uppy-Dashboard-inner'));
 
+    // If ResizeObserver fails to emit an event telling us what size to use - default to the mobile view
+    this.makeDashboardInsidesVisibleAnywayTimeout = setTimeout(function () {
+      var pluginState = _this6.getPluginState();
+      if (!pluginState.areInsidesReadyToBeVisible) {
+        _this6.uppy.log("[Dashboard] resize event didn't fire on time: defaulted to mobile layout");
+
+        _this6.setPluginState({
+          areInsidesReadyToBeVisible: true
+        });
+      }
+    }, 1000);
+  };
+
+  Dashboard.prototype.stopListeningToResize = function stopListeningToResize() {
+    this.resizeObserver.disconnect();
+
+    clearTimeout(this.makeDashboardInsidesVisibleAnywayTimeout);
+  };
+
+  Dashboard.prototype.initEvents = function initEvents() {
+    var _this7 = this;
+
+    // Modal open button
+    var showModalTrigger = findAllDOMElements(this.opts.trigger);
+    if (!this.opts.inline && showModalTrigger) {
+      showModalTrigger.forEach(function (trigger) {
+        return trigger.addEventListener('click', _this7.openModal);
+      });
+    }
+
+    if (!this.opts.inline && !showModalTrigger) {
+      this.uppy.log('Dashboard modal trigger not found. Make sure `trigger` is set in Dashboard options unless you are planning to call openModal() method yourself', 'error');
+    }
+
+    // Drag Drop
+    this.removeDragDropListener = dragDrop(this.el, function (files) {
+      _this7.handleDrop(files);
+    });
+
+    this.startListeningToResize();
+
     this.uppy.on('plugin-remove', this.removeTarget);
@@ -577,3 +609,3 @@ this.uppy.on('file-added', this.handleFileAdded);
   Dashboard.prototype.removeEvents = function removeEvents() {
-    var _this7 = this;
+    var _this8 = this;
 
@@ -583,7 +615,7 @@ var showModalTrigger = findAllDOMElements(this.opts.trigger);
       showModalTrigger.forEach(function (trigger) {
-        return trigger.removeEventListener('click', _this7.openModal);
+        return trigger.removeEventListener('click', _this8.openModal);
       });
     }
 
-    this.ro.unobserve(this.el.querySelector('.uppy-Dashboard-inner'));
+    this.stopListeningToResize();
 
@@ -613,3 +645,3 @@ this.removeDragDropListener();
   Dashboard.prototype.handleDrop = function handleDrop(files) {
-    var _this8 = this;
+    var _this9 = this;
 
@@ -620,4 +652,4 @@ this.uppy.log('[Dashboard] Files were dropped');
       try {
-        _this8.uppy.addFile({
-          source: _this8.id,
+        _this9.uppy.addFile({
+          source: _this9.id,
           name: file.name,
@@ -634,3 +666,3 @@ type: file.type,
   Dashboard.prototype.render = function render(state) {
-    var _this9 = this;
+    var _this10 = this;
 
@@ -686,5 +718,5 @@ var pluginState = this.getPluginState();
     var attachRenderFunctionToTarget = function attachRenderFunctionToTarget(target) {
-      var plugin = _this9.uppy.getPlugin(target.id);
+      var plugin = _this10.uppy.getPlugin(target.id);
       return _extends({}, target, {
-        icon: plugin.icon || _this9.opts.defaultPickerIcon,
+        icon: plugin.icon || _this10.opts.defaultPickerIcon,
         render: plugin.render
@@ -695,3 +727,3 @@ });
     var isSupported = function isSupported(target) {
-      var plugin = _this9.uppy.getPlugin(target.id);
+      var plugin = _this10.uppy.getPlugin(target.id);
       // If the plugin does not provide a `supported` check, assume the plugin works everywhere.
@@ -713,5 +745,5 @@ if (typeof plugin.isSupported !== 'function') {
     var startUpload = function startUpload(ev) {
-      _this9.uppy.upload().catch(function (err) {
+      _this10.uppy.upload().catch(function (err) {
         // Log error.
-        _this9.uppy.log(err.stack || err.message || err);
+        _this10.uppy.log(err.stack || err.message || err);
       });
@@ -721,8 +753,8 @@ };
     var cancelUpload = function cancelUpload(fileID) {
-      _this9.uppy.removeFile(fileID);
+      _this10.uppy.removeFile(fileID);
     };
 
     var saveFileCard = function saveFileCard(meta, fileID) {
-      _this9.uppy.setFileMeta(fileID, meta);
-      _this9.toggleFileCard();
+      _this10.uppy.setFileMeta(fileID, meta);
+      _this10.toggleFileCard();
     };
@@ -790,2 +822,3 @@
       containerWidth: pluginState.containerWidth,
+      areInsidesReadyToBeVisible: pluginState.areInsidesReadyToBeVisible,
       isTargetDOMEl: this.isTargetDOMEl,
@@ -800,7 +833,7 @@ parentElement: this.el,
   Dashboard.prototype.discoverProviderPlugins = function discoverProviderPlugins() {
-    var _this10 = this;
+    var _this11 = this;
 
     this.uppy.iteratePlugins(function (plugin) {
-      if (plugin && !plugin.target && plugin.opts && plugin.opts.target === _this10.constructor) {
-        _this10.addTarget(plugin);
+      if (plugin && !plugin.target && plugin.opts && plugin.opts.target === _this11.constructor) {
+        _this11.addTarget(plugin);
       }
@@ -811,3 +844,3 @@ });
   Dashboard.prototype.install = function install() {
-    var _this11 = this;
+    var _this12 = this;
 
@@ -822,3 +855,5 @@ // Set default state for Dashboard
       metaFields: this.opts.metaFields,
-      targets: []
+      targets: [],
+      // We'll make them visible once .containerWidth is determined
+      areInsidesReadyToBeVisible: false
     });
@@ -848,5 +883,5 @@
     plugins.forEach(function (pluginID) {
-      var plugin = _this11.uppy.getPlugin(pluginID);
+      var plugin = _this12.uppy.getPlugin(pluginID);
       if (plugin) {
-        plugin.mount(_this11, plugin);
+        plugin.mount(_this12, plugin);
       }
@@ -889,3 +924,3 @@ });
   Dashboard.prototype.uninstall = function uninstall() {
-    var _this12 = this;
+    var _this13 = this;
 
@@ -911,3 +946,3 @@ if (!this.opts.disableInformer) {
     plugins.forEach(function (pluginID) {
-      var plugin = _this12.uppy.getPlugin(pluginID);
+      var plugin = _this13.uppy.getPlugin(pluginID);
       if (plugin) plugin.unmount();
@@ -914,0 +949,0 @@ });

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "0.30.3",
+  "version": "0.30.4",
   "license": "MIT",
@@ -25,7 +25,7 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/informer": "0.30.3",
-    "@uppy/provider-views": "0.30.3",
-    "@uppy/status-bar": "0.30.3",
-    "@uppy/thumbnail-generator": "0.30.3",
-    "@uppy/utils": "0.30.3",
+    "@uppy/informer": "0.30.4",
+    "@uppy/provider-views": "0.30.4",
+    "@uppy/status-bar": "0.30.4",
+    "@uppy/thumbnail-generator": "0.30.4",
+    "@uppy/utils": "0.30.4",
     "classnames": "^2.2.6",
@@ -41,4 +41,4 @@ "cuid": "^2.1.1",
   "devDependencies": {
-    "@uppy/core": "0.30.3",
-    "@uppy/google-drive": "0.30.3"
+    "@uppy/core": "0.30.4",
+    "@uppy/google-drive": "0.30.4"
   },
@@ -48,3 +48,3 @@ "peerDependencies": {
   },
-  "gitHead": "27899d944f0ffb551d0473955236734c24eb4fff"
+  "gitHead": "7ae8af44abdd42eef71c46b831b2e3dadb00237f"
 }

src/components/AddFiles.js

@@ -25,3 +25,3 @@ const ActionBrowseTagline = require('./ActionBrowseTagline')
       return (
-        <div class="uppy-DashboarAddFiles">
+        <div class="uppy-DashboardAddFiles">
           <div class="uppy-DashboardTabs">
@@ -37,3 +37,3 @@ <ActionBrowseTagline
           </div>
-          <div class="uppy-DashboarAddFiles-info">
+          <div class="uppy-DashboardAddFiles-info">
             { this.props.note && <div class="uppy-Dashboard-note">{this.props.note}</div> }
@@ -50,3 +50,3 @@ { this.props.proudlyDisplayPoweredByUppy && poweredByUppy(this.props) }
     return (
-      <div class="uppy-DashboarAddFiles">
+      <div class="uppy-DashboardAddFiles">
         <div class="uppy-DashboardTabs">
@@ -99,3 +99,3 @@ <ActionBrowseTagline
         </div>
-        <div class="uppy-DashboarAddFiles-info">
+        <div class="uppy-DashboardAddFiles-info">
           { this.props.note && <div class="uppy-Dashboard-note">{this.props.note}</div> }
@@ -102,0 +102,0 @@ { this.props.proudlyDisplayPoweredByUppy && poweredByUppy(this.props) }

src/components/Dashboard.js

@@ -38,3 +38,5 @@ const FileList = require('./FileList')
     { 'uppy-size--lg': props.containerWidth > 700 },
-    { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel }
+    { 'uppy-size--xl': props.containerWidth > 900 },
+    { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel },
+    { 'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible }
   )
@@ -57,10 +59,14 @@
         }}>
-        <button class="uppy-Dashboard-close"
-          type="button"
-          aria-label={props.i18n('closeModal')}
-          title={props.i18n('closeModal')}
-          onclick={props.closeModal}>
-          <span aria-hidden="true">&times;</span>
-        </button>
 
+        {!props.inline
+          ? <button class="uppy-u-reset uppy-Dashboard-close"
+            type="button"
+            aria-label={props.i18n('closeModal')}
+            title={props.i18n('closeModal')}
+            onclick={props.closeModal}>
+            <span aria-hidden="true">&times;</span>
+          </button>
+            : null
+          }
+
         <div class="uppy-Dashboard-innerWrap">
@@ -67,0 +73,0 @@ { (!noFiles && props.showSelectedFiles) && <PanelTopBar {...props} /> }

src/components/FileCard.js

@@ -45,3 +45,3 @@ const getFileTypeIcon = require('../utils/getFileTypeIcon')
         <label class="uppy-DashboardFileCard-label">{field.name}</label>
-        <input class="uppy-c-textInput uppy-DashboardFileCard-input"
+        <input class="uppy-u-reset uppy-c-textInput uppy-DashboardFileCard-input"
           type="text"
@@ -48,0 +48,0 @@ data-name={field.id}

src/index.js

@@ -475,2 +475,44 @@ const { Plugin } = require('@uppy/core')
 
+  // _Why make insides of Dashboard invisible until first ResizeObserver event is emitted?
+  //  ResizeOberserver doesn't emit the first resize event fast enough, users can see the jump from one .uppy-size-- to another (e.g. in Safari)
+  // _Why not apply visibility property to .uppy-Dashboard-inner?
+  //  Because ideally, acc to specs, ResizeObserver should see invisible elements as of width 0. So even though applying invisibility to .uppy-Dashboard-inner works now, it may not work in the future.
+  startListeningToResize () {
+    // Watch for Dashboard container (`.uppy-Dashboard-inner`) resize
+    // and update containerWidth/containerHeight in plugin state accordingly.
+    // Emits first event on initialization.
+    this.resizeObserver = new ResizeObserver((entries, observer) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect
+
+        this.uppy.log(`[Dashboard] resized: ${width} / ${height}`)
+
+        this.setPluginState({
+          containerWidth: width,
+          containerHeight: height,
+          areInsidesReadyToBeVisible: true
+        })
+      }
+    })
+    this.resizeObserver.observe(this.el.querySelector('.uppy-Dashboard-inner'))
+
+    // If ResizeObserver fails to emit an event telling us what size to use - default to the mobile view
+    this.makeDashboardInsidesVisibleAnywayTimeout = setTimeout(() => {
+      const pluginState = this.getPluginState()
+      if (!pluginState.areInsidesReadyToBeVisible) {
+        this.uppy.log("[Dashboard] resize event didn't fire on time: defaulted to mobile layout")
+
+        this.setPluginState({
+          areInsidesReadyToBeVisible: true
+        })
+      }
+    }, 1000)
+  }
+
+  stopListeningToResize () {
+    this.resizeObserver.disconnect()
+
+    clearTimeout(this.makeDashboardInsidesVisibleAnywayTimeout)
+  }
+
   initEvents () {
@@ -492,18 +534,4 @@ // Modal open button
 
-    // Watch for Dashboard container (`.uppy-Dashboard-inner`) resize
-    // and update containerWidth/containerHeight in plugin state accordingly
-    this.ro = new ResizeObserver((entries, observer) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect
+    this.startListeningToResize()
 
-        this.uppy.log(`[Dashboard] resized: ${width} / ${height}`)
-
-        this.setPluginState({
-          containerWidth: width,
-          containerHeight: height
-        })
-      }
-    })
-    this.ro.observe(this.el.querySelector('.uppy-Dashboard-inner'))
-
     this.uppy.on('plugin-remove', this.removeTarget)
@@ -531,3 +559,3 @@ this.uppy.on('file-added', this.handleFileAdded)
 
-    this.ro.unobserve(this.el.querySelector('.uppy-Dashboard-inner'))
+    this.stopListeningToResize()
 
@@ -725,2 +753,3 @@ this.removeDragDropListener()
       containerWidth: pluginState.containerWidth,
+      areInsidesReadyToBeVisible: pluginState.areInsidesReadyToBeVisible,
       isTargetDOMEl: this.isTargetDOMEl,
@@ -751,3 +780,5 @@ parentElement: this.el,
       metaFields: this.opts.metaFields,
-      targets: []
+      targets: [],
+      // We'll make them visible once .containerWidth is determined
+      areInsidesReadyToBeVisible: false
     })
@@ -754,0 +785,0 @@

types/dashboard-tests.ts

@@ -1,3 +0,3 @@
-import Uppy from '@uppy/core';
-import Dashboard from '../';
+import Uppy = require('@uppy/core')
+import Dashboard = require('../')
 
@@ -10,3 +10,3 @@ {
 
-  const plugin = <Dashboard>uppy.getPlugin('Dashboard')
+  const plugin = uppy.getPlugin('Dashboard') as Dashboard
   plugin.openModal()
@@ -13,0 +13,0 @@ plugin.isModalOpen() // $ExpectType boolean

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

Lines of code

5488

increased by1.67%

Worsened metrics

Total package byte prevSize

270648

decreased by-6.94%

Number of downloads

156550

decreased by-4.56%

Published versions last year

29

decreased by-3.33%

Dependency changes

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

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

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

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

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

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

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

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

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

• - Removed@uppy/utils@0.30.3(transitive)

• Updated@uppy/informer@0.30.4

• Updated@uppy/provider-views@0.30.4

• Updated@uppy/status-bar@0.30.4

• Updated@uppy/thumbnail-generator@0.30.4

• Updated@uppy/utils@0.30.4