@uppy/provider-views - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/AuthView.js

@@ -7,28 +7,14 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-var AuthBlock =
+var AuthView =
 /*#__PURE__*/
 function (_Component) {
-  _inheritsLoose(AuthBlock, _Component);
+  _inheritsLoose(AuthView, _Component);
 
-  function AuthBlock() {
+  function AuthView() {
     return _Component.apply(this, arguments) || this;
   }
 
-  var _proto = AuthBlock.prototype;
+  var _proto = AuthView.prototype;
 
-  _proto.componentDidMount = function componentDidMount() {
-    var _this = this;
-
-    setTimeout(function () {
-      if (!_this.connectButton) return;
-
-      _this.connectButton.focus({
-        preventScroll: true
-      });
-    }, 150);
-  };
-
   _proto.render = function render() {
-    var _this2 = this;
-
     var pluginNameComponent = h("span", {
@@ -49,5 +35,3 @@ class: "uppy-Provider-authTitleName"
       onclick: this.props.handleAuth,
-      ref: function ref(el) {
-        _this2.connectButton = el;
-      }
+      "data-uppy-super-focusable": true
     }, this.props.i18nArray('authenticateWith', {
@@ -58,20 +42,2 @@ pluginName: this.props.pluginName
 
-  return AuthBlock;
-}(Component);
-
-var AuthView =
-/*#__PURE__*/
-function (_Component2) {
-  _inheritsLoose(AuthView, _Component2);
-
-  function AuthView() {
-    return _Component2.apply(this, arguments) || this;
-  }
-
-  var _proto2 = AuthView.prototype;
-
-  _proto2.render = function render() {
-    return h(AuthBlock, this.props);
-  };
-
   return AuthView;
@@ -78,0 +44,0 @@ }(Component);

lib/Breadcrumbs.js

@@ -5,7 +5,7 @@ var _require = require('preact'),
 var Breadcrumb = function Breadcrumb(props) {
-  return h("span", null, h("button", {
+  return [h("button", {
     type: "button",
     class: "uppy-u-reset",
     onclick: props.getFolder
-  }, props.title), !props.isLast ? ' / ' : '');
+  }, props.title), !props.isLast ? ' / ' : ''];
 };
@@ -12,0 +12,0 @@

lib/Browser.js

@@ -9,3 +9,3 @@ 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 Table = require('./ItemList');
+var ItemList = require('./ItemList');
 
@@ -44,3 +44,3 @@ var FooterActions = require('./FooterActions');
     class: "uppy-u-reset uppy-ProviderBrowser-userLogout"
-  }, props.i18n('logOut')))), props.showFilter && h(Filter, props), h(Table, {
+  }, props.i18n('logOut')))), props.showFilter && h(Filter, props), h(ItemList, {
     columns: [{
@@ -61,3 +61,4 @@ name: 'Name',
     showTitles: props.showTitles,
-    i18n: props.i18n
+    i18n: props.i18n,
+    viewType: props.viewType
   }), selected > 0 && h(FooterActions, _extends({
@@ -64,0 +65,0 @@ selected: selected

lib/Filter.js

@@ -18,3 +18,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
     _this = _Component.call(this, props) || this;
-    _this.handleKeyPress = _this.handleKeyPress.bind(_assertThisInitialized(_this));
+    _this.preventEnterPress = _this.preventEnterPress.bind(_assertThisInitialized(_this));
     return _this;
@@ -25,10 +25,7 @@ }
 
-  _proto.handleKeyPress = function handleKeyPress(ev) {
+  _proto.preventEnterPress = function preventEnterPress(ev) {
     if (ev.keyCode === 13) {
       ev.stopPropagation();
       ev.preventDefault();
-      return;
     }
-
-    this.props.filterQuery(ev);
   };
@@ -46,11 +43,12 @@
       "aria-label": this.props.i18n('filter'),
-      onkeyup: this.handleKeyPress,
-      onkeydown: this.handleKeyPress,
-      onkeypress: this.handleKeyPress,
-      value: this.props.filterInput,
-      ref: function ref(input) {
-        _this2.input = input;
-      }
+      onkeyup: this.preventEnterPress,
+      onkeydown: this.preventEnterPress,
+      onkeypress: this.preventEnterPress,
+      oninput: function oninput(e) {
+        return _this2.props.filterQuery(e);
+      },
+      value: this.props.filterInput
     }), h("svg", {
       "aria-hidden": "true",
+      focusable: "false",
       class: "UppyIcon uppy-ProviderBrowser-searchIcon",
@@ -70,2 +68,3 @@ width: "12",
       "aria-hidden": "true",
+      focusable: "false",
       class: "UppyIcon",
@@ -72,0 +71,0 @@ viewBox: "0 0 19 19"

lib/FooterActions.js

@@ -10,3 +10,3 @@ var _require = require('preact'),
     onclick: props.done
-  }, props.i18n('selectXFiles', {
+  }, props.i18n('selectX', {
     smart_count: props.selected
@@ -13,0 +13,0 @@ })), h("button", {

lib/index.js

@@ -74,3 +74,3 @@ var _class, _temp;
   /**
-   * @param {object} instance of the plugin
+   * @param {Object} instance of the plugin
    */
@@ -88,3 +88,3 @@ function ProviderView(plugin, opts) {
     };
-    this.opts = _extends({}, defaultOptions, opts); // Logic
+    this.opts = _extends({}, defaultOptions, {}, opts); // Logic
 
@@ -148,4 +148,5 @@ this.addFile = this.addFile.bind(this);
    * Based on folder ID, fetch a new folder and update it to state
-   * @param  {String} id Folder id
-   * @return {Promise}   Folders/files in folder
+   *
+   * @param  {string} id Folder id
+   * @returns {Promise}   Folders/files in folder
    */
@@ -188,4 +189,5 @@ ;
    * Fetches new folder
+   *
    * @param  {Object} Folder
-   * @param  {String} title Folder title
+   * @param  {string} title Folder title
    */
@@ -229,3 +231,6 @@ ;
       this.plugin.uppy.addFile(tagFile);
-    } catch (err) {// Nothing, restriction errors handled in Core
+    } catch (err) {
+      if (!err.isRestriction) {
+        this.plugin.uppy.log(err);
+      }
     }
@@ -385,6 +390,8 @@ };
     var _this$plugin$getPlugi2 = this.plugin.getPluginState(),
-        currentSelection = _this$plugin$getPlugi2.currentSelection;
+        currentSelection = _this$plugin$getPlugi2.currentSelection; // comparing id instead of the file object, because the reference to the object
+    // changes when we switch folders, and the file list is updated
 
+
     return currentSelection.some(function (item) {
-      return item === file;
+      return item.id === file.id;
     });
@@ -437,8 +444,6 @@ }
 
-      var dashboard = _this3.plugin.uppy.getPlugin('Dashboard');
-
       var message;
 
       if (files.length) {
-        message = dashboard.i18n('folderAdded', {
+        message = _this3.plugin.uppy.i18n('folderAdded', {
           smart_count: files.length,
@@ -448,3 +453,3 @@ folder: folder.name
       } else {
-        message = dashboard.i18n('emptyFolderAdded');
+        message = _this3.plugin.uppy.i18n('emptyFolderAdded');
       }
@@ -476,2 +481,3 @@
     e.preventDefault();
+    e.currentTarget.focus();
 
@@ -511,3 +517,3 @@ var _this$plugin$getPlugi3 = this.plugin.getPluginState(),
         currentSelection: currentSelection.filter(function (item) {
-          return item !== file;
+          return item.id !== file.id;
         })
@@ -535,5 +541,4 @@ });
       origin: getOrigin()
-    })); // @todo remove this hardcoded version
-
-    var clientVersion = 'companion-client:1.0.2';
+    }));
+    var clientVersion = encodeURIComponent("@uppy/provider-views=" + ProviderView.VERSION);
     var link = this.provider.authUrl() + "?state=" + authState + "&uppyVersions=" + clientVersion;
@@ -739,2 +744,2 @@ var authWindow = window.open(link, '_blank');
   return ProviderView;
-}(), _class.VERSION = "1.1.0", _temp);
+}(), _class.VERSION = "1.2.0", _temp);

lib/ItemList.js

@@ -1,2 +0,2 @@
-var Row = require('./Item');
+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); }
 
@@ -6,2 +6,22 @@ var _require = require('preact'),
 
+var Item = require('./Item/index');
+
+var getSharedProps = function getSharedProps(fileOrFolder, props) {
+  return {
+    id: fileOrFolder.id,
+    title: fileOrFolder.name,
+    getItemIcon: function getItemIcon() {
+      return fileOrFolder.icon;
+    },
+    isChecked: props.isChecked(fileOrFolder),
+    toggleCheckbox: function toggleCheckbox(e) {
+      return props.toggleCheckbox(e, fileOrFolder);
+    },
+    columns: props.columns,
+    showTitles: props.showTitles,
+    viewType: props.viewType,
+    i18n: props.i18n
+  };
+};
+
 module.exports = function (props) {
@@ -19,49 +39,19 @@ if (!props.folders.length && !props.files.length) {
     onscroll: props.handleScroll,
-    role: "listbox",
-    "aria-label": "List of files from " + props.title
+    role: "listbox" // making <ul> not focusable for firefox
+    ,
+    tabindex: "-1"
   }, props.folders.map(function (folder) {
-    var isDisabled = false;
-    var isChecked = props.isChecked(folder);
-
-    if (isChecked) {
-      isDisabled = isChecked.loading;
-    }
-
-    return Row({
-      title: folder.name,
-      id: folder.id,
+    return Item(_extends({}, getSharedProps(folder, props), {
       type: 'folder',
-      // active: props.activeRow(folder),
-      getItemIcon: function getItemIcon() {
-        return folder.icon;
-      },
-      isDisabled: isDisabled,
-      isChecked: isChecked,
+      isDisabled: props.isChecked(folder) ? props.isChecked(folder).loading : false,
       handleFolderClick: function handleFolderClick() {
         return props.handleFolderClick(folder);
-      },
-      handleClick: function handleClick(e) {
-        return props.toggleCheckbox(e, folder);
-      },
-      columns: props.columns,
-      showTitles: props.showTitles
-    });
+      }
+    }));
   }), props.files.map(function (file) {
-    return Row({
-      title: file.name,
-      id: file.id,
+    return Item(_extends({}, getSharedProps(file, props), {
       type: 'file',
-      // active: props.activeRow(file),
-      getItemIcon: function getItemIcon() {
-        return file.icon;
-      },
-      isDisabled: false,
-      isChecked: props.isChecked(file),
-      handleClick: function handleClick(e) {
-        return props.toggleCheckbox(e, file);
-      },
-      columns: props.columns,
-      showTitles: props.showTitles
-    });
+      isDisabled: false
+    }));
   })));
 };

package.json

 {
   "name": "@uppy/provider-views",
   "description": "View library for Uppy remote provider plugins.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
@@ -22,3 +22,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/utils": "1.1.0",
+    "@uppy/utils": "1.2.0",
     "classnames": "^2.2.6",
@@ -28,3 +28,3 @@ "preact": "8.2.9"
   "devDependencies": {
-    "@uppy/core": "1.1.0"
+    "@uppy/core": "1.2.0"
   },
@@ -34,3 +34,3 @@ "peerDependencies": {
   },
-  "gitHead": "28d235fe2fb57d87a399c20883fd6590aa49f4f4"
+  "gitHead": "bd2beedcffbaa840de7069860e341f02268ddbb1"
 }

src/AuthView.js

 const { h, Component } = require('preact')
 
-class AuthBlock extends Component {
-  componentDidMount () {
-    setTimeout(() => {
-      if (!this.connectButton) return
-      this.connectButton.focus({ preventScroll: true })
-    }, 150)
-  }
-
+class AuthView extends Component {
   render () {
@@ -24,3 +17,3 @@ const pluginNameComponent = (
         onclick={this.props.handleAuth}
-        ref={(el) => { this.connectButton = el }}
+        data-uppy-super-focusable
       >
@@ -33,8 +26,2 @@ {this.props.i18nArray('authenticateWith', { pluginName: this.props.pluginName })}
 
-class AuthView extends Component {
-  render () {
-    return <AuthBlock {...this.props} />
-  }
-}
-
 module.exports = AuthView

src/Breadcrumbs.js

 const { h } = require('preact')
 
-const Breadcrumb = (props) => {
-  return (
-    <span>
-      <button
-        type="button"
-        class="uppy-u-reset"
-        onclick={props.getFolder}>{props.title}</button>
-      {!props.isLast ? ' / ' : ''}
-    </span>
-  )
-}
+const Breadcrumb = (props) => [
+  <button
+    type="button"
+    class="uppy-u-reset"
+    onclick={props.getFolder}>{props.title}
+  </button>,
+  !props.isLast ? ' / ' : ''
+]
 
@@ -15,0 +12,0 @@ module.exports = (props) => {

src/Browser.js

 const classNames = require('classnames')
 const Breadcrumbs = require('./Breadcrumbs')
 const Filter = require('./Filter')
-const Table = require('./ItemList')
+const ItemList = require('./ItemList')
 const FooterActions = require('./FooterActions')
@@ -36,3 +36,3 @@ const { h } = require('preact')
       { props.showFilter && <Filter {...props} /> }
-      <Table
+      <ItemList
         columns={[{
@@ -54,2 +54,3 @@ name: 'Name',
         i18n={props.i18n}
+        viewType={props.viewType}
       />
@@ -56,0 +57,0 @@ {selected > 0 && <FooterActions selected={selected} {...props} />}

src/Filter.js

@@ -6,12 +6,10 @@ const { h, Component } = require('preact')
     super(props)
-    this.handleKeyPress = this.handleKeyPress.bind(this)
+    this.preventEnterPress = this.preventEnterPress.bind(this)
   }
 
-  handleKeyPress (ev) {
+  preventEnterPress (ev) {
     if (ev.keyCode === 13) {
       ev.stopPropagation()
       ev.preventDefault()
-      return
     }
-    this.props.filterQuery(ev)
   }
@@ -26,8 +24,8 @@
         aria-label={this.props.i18n('filter')}
-        onkeyup={this.handleKeyPress}
-        onkeydown={this.handleKeyPress}
-        onkeypress={this.handleKeyPress}
-        value={this.props.filterInput}
-        ref={(input) => { this.input = input }} />
-      <svg aria-hidden="true" class="UppyIcon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
+        onkeyup={this.preventEnterPress}
+        onkeydown={this.preventEnterPress}
+        onkeypress={this.preventEnterPress}
+        oninput={(e) => this.props.filterQuery(e)}
+        value={this.props.filterInput} />
+      <svg aria-hidden="true" focusable="false" class="UppyIcon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
         <path d="M8.638 7.99l3.172 3.172a.492.492 0 1 1-.697.697L7.91 8.656a4.977 4.977 0 0 1-2.983.983C2.206 9.639 0 7.481 0 4.819 0 2.158 2.206 0 4.927 0c2.721 0 4.927 2.158 4.927 4.82a4.74 4.74 0 0 1-1.216 3.17zm-3.71.685c2.176 0 3.94-1.726 3.94-3.856 0-2.129-1.764-3.855-3.94-3.855C2.75.964.984 2.69.984 4.819c0 2.13 1.765 3.856 3.942 3.856z" />
@@ -42,3 +40,3 @@ </svg>
           onclick={this.props.filterQuery}>
-          <svg aria-hidden="true" class="UppyIcon" viewBox="0 0 19 19">
+          <svg aria-hidden="true" focusable="false" class="UppyIcon" viewBox="0 0 19 19">
             <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
@@ -45,0 +43,0 @@ </svg>

src/FooterActions.js

@@ -6,3 +6,3 @@ const { h } = require('preact')
     <button class="uppy-u-reset uppy-c-btn uppy-c-btn-primary" onclick={props.done}>
-      {props.i18n('selectXFiles', {
+      {props.i18n('selectX', {
         smart_count: props.selected
@@ -9,0 +9,0 @@ })}

src/index.js

@@ -44,3 +44,3 @@ const { h, Component } = require('preact')
   /**
-   * @param {object} instance of the plugin
+   * @param {Object} instance of the plugin
    */
@@ -117,4 +117,5 @@ constructor (plugin, opts) {
    * Based on folder ID, fetch a new folder and update it to state
-   * @param  {String} id Folder id
-   * @return {Promise}   Folders/files in folder
+   *
+   * @param  {string} id Folder id
+   * @returns {Promise}   Folders/files in folder
    */
@@ -147,4 +148,5 @@ getFolder (id, name) {
    * Fetches new folder
+   *
    * @param  {Object} Folder
-   * @param  {String} title Folder title
+   * @param  {string} title Folder title
    */
@@ -186,3 +188,5 @@ getNextFolder (folder) {
     } catch (err) {
-      // Nothing, restriction errors handled in Core
+      if (!err.isRestriction) {
+        this.plugin.uppy.log(err)
+      }
     }
@@ -330,3 +334,5 @@ }
     const { currentSelection } = this.plugin.getPluginState()
-    return currentSelection.some((item) => item === file)
+    // comparing id instead of the file object, because the reference to the object
+    // changes when we switch folders, and the file list is updated
+    return currentSelection.some((item) => item.id === file.id)
   }
@@ -360,10 +366,10 @@
       this.plugin.setPluginState({ selectedFolders: folders })
-      const dashboard = this.plugin.uppy.getPlugin('Dashboard')
+
       let message
       if (files.length) {
-        message = dashboard.i18n('folderAdded', {
+        message = this.plugin.uppy.i18n('folderAdded', {
           smart_count: files.length, folder: folder.name
         })
       } else {
-        message = dashboard.i18n('emptyFolderAdded')
+        message = this.plugin.uppy.i18n('emptyFolderAdded')
       }
@@ -389,2 +395,3 @@ this.plugin.uppy.info(message)
     e.preventDefault()
+    e.currentTarget.focus()
     let { folders, files } = this.plugin.getPluginState()
@@ -412,3 +419,3 @@ let items = this.filterItems(folders.concat(files))
       this.plugin.setPluginState({
-        currentSelection: currentSelection.filter((item) => item !== file)
+        currentSelection: currentSelection.filter((item) => item.id !== file.id)
       })
@@ -432,4 +439,3 @@ } else {
     const authState = btoa(JSON.stringify({ origin: getOrigin() }))
-    // @todo remove this hardcoded version
-    const clientVersion = 'companion-client:1.0.2'
+    const clientVersion = encodeURIComponent(`@uppy/provider-views=${ProviderView.VERSION}`)
     const link = `${this.provider.authUrl()}?state=${authState}&uppyVersions=${clientVersion}`
@@ -436,0 +442,0 @@

src/ItemList.js

@@ -1,4 +0,16 @@
-const Row = require('./Item')
 const { h } = require('preact')
+const Item = require('./Item/index')
 
+const getSharedProps = (fileOrFolder, props) => ({
+  id: fileOrFolder.id,
+  title: fileOrFolder.name,
+  getItemIcon: () => fileOrFolder.icon,
+  isChecked: props.isChecked(fileOrFolder),
+  toggleCheckbox: (e) => props.toggleCheckbox(e, fileOrFolder),
+  columns: props.columns,
+  showTitles: props.showTitles,
+  viewType: props.viewType,
+  i18n: props.i18n
+})
+
 module.exports = (props) => {
@@ -14,37 +26,19 @@ if (!props.folders.length && !props.files.length) {
         role="listbox"
-        aria-label={`List of files from ${props.title}`}>
-        {props.folders.map(folder => {
-          let isDisabled = false
-          let isChecked = props.isChecked(folder)
-          if (isChecked) {
-            isDisabled = isChecked.loading
-          }
-          return Row({
-            title: folder.name,
-            id: folder.id,
+        // making <ul> not focusable for firefox
+        tabindex="-1">
+        {props.folders.map(folder =>
+          Item({
+            ...getSharedProps(folder, props),
             type: 'folder',
-            // active: props.activeRow(folder),
-            getItemIcon: () => folder.icon,
-            isDisabled: isDisabled,
-            isChecked: isChecked,
-            handleFolderClick: () => props.handleFolderClick(folder),
-            handleClick: (e) => props.toggleCheckbox(e, folder),
-            columns: props.columns,
-            showTitles: props.showTitles
+            isDisabled: props.isChecked(folder) ? props.isChecked(folder).loading : false,
+            handleFolderClick: () => props.handleFolderClick(folder)
           })
-        })}
-        {props.files.map(file => {
-          return Row({
-            title: file.name,
-            id: file.id,
+        )}
+        {props.files.map(file =>
+          Item({
+            ...getSharedProps(file, props),
             type: 'file',
-            // active: props.activeRow(file),
-            getItemIcon: () => file.icon,
-            isDisabled: false,
-            isChecked: props.isChecked(file),
-            handleClick: (e) => props.toggleCheckbox(e, file),
-            columns: props.columns,
-            showTitles: props.showTitles
+            isDisabled: false
           })
-        })}
+        )}
       </ul>
@@ -51,0 +45,0 @@ </div>

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

100629

increased by3.65%

Number of package files

46

increased by35.29%

Lines of code

2224

increased by3.83%

Dependency changes

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

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

• Updated@uppy/utils@1.2.0