@uppy/provider-views - npm Package Compare versions

Comparing version 0.29.1 to 0.30.0

lib/Breadcrumbs.js

@@ -6,5 +6,13 @@ var _require = require('preact'),
   return h(
-    "button",
-    { type: "button", onclick: props.getFolder },
-    props.title
+    "span",
+    null,
+    h(
+      "button",
+      {
+        type: "button",
+        "class": "uppy-u-reset",
+        onclick: props.getFolder },
+      props.title
+    ),
+    !props.isLast ? ' / ' : ''
   );
@@ -17,2 +25,7 @@ };
     { "class": "uppy-Provider-breadcrumbs" },
+    h(
+      "div",
+      { "class": "uppy-Provider-breadcrumbsIcon" },
+      props.breadcrumbsIcon
+    ),
     props.directories.map(function (directory, i) {
@@ -23,3 +36,4 @@ return Breadcrumb({
         },
-        title: i === 0 ? props.title : directory.title
+        title: i === 0 ? props.title : directory.title,
+        isLast: i + 1 === props.directories.length
       });
@@ -26,0 +40,0 @@ })

lib/Browser.js

@@ -32,17 +32,9 @@ 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; };
         { 'class': classNames('uppy-ProviderBrowser-headerBar', !props.showBreadcrumbs && 'uppy-ProviderBrowser-headerBar--simple') },
+        props.showBreadcrumbs && Breadcrumbs({
+          getFolder: props.getFolder,
+          directories: props.directories,
+          breadcrumbsIcon: props.pluginIcon && props.pluginIcon(),
+          title: props.title
+        }),
         h(
-          'div',
-          { 'class': 'uppy-Provider-breadcrumbsWrap' },
-          h(
-            'div',
-            { 'class': 'uppy-Provider-breadcrumbsIcon' },
-            props.pluginIcon && props.pluginIcon()
-          ),
-          props.showBreadcrumbs && Breadcrumbs({
-            getFolder: props.getFolder,
-            directories: props.directories,
-            title: props.title
-          })
-        ),
-        h(
           'span',
@@ -49,0 +41,0 @@ { 'class': 'uppy-ProviderBrowser-user' },

lib/Filter.js

@@ -19,13 +19,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    _this.isEmpty = true;
     _this.handleKeyPress = _this.handleKeyPress.bind(_this);
-    _this.handleClear = _this.handleClear.bind(_this);
     return _this;
   }
 
-  // componentDidMount () {
-  //   this.isEmpty = true
-  //   // this.input.focus()
-  // }
-
   Filter.prototype.handleKeyPress = function handleKeyPress(ev) {
@@ -37,11 +30,5 @@ if (ev.keyCode === 13) {
     }
-    this.isEmpty = !this.input.value.length > 0;
     this.props.filterQuery(ev);
   };
 
-  Filter.prototype.handleClear = function handleClear(ev) {
-    this.input.value = '';
-    this.props.filterQuery();
-  };
-
   Filter.prototype.render = function render() {
@@ -51,14 +38,14 @@ var _this2 = this;
     return h(
-      'div',
-      { 'class': 'uppy-u-reset uppy-ProviderBrowser-search' },
+      "div",
+      { "class": "uppy-ProviderBrowser-search" },
       h(
-        'svg',
-        { 'class': 'UppyIcon uppy-ProviderBrowser-searchIcon', viewBox: '0 0 100 100' },
-        h('path', { d: 'M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z' })
+        "svg",
+        { "aria-hidden": "true", "class": "UppyIcon uppy-ProviderBrowser-searchIcon", viewBox: "0 0 100 100" },
+        h("path", { d: "M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z" })
       ),
-      h('input', {
-        'class': 'uppy-u-reset uppy-ProviderBrowser-searchInput',
-        type: 'text',
-        placeholder: 'Filter',
-        'aria-label': 'Filter',
+      h("input", {
+        "class": "uppy-u-reset uppy-ProviderBrowser-searchInput",
+        type: "text",
+        placeholder: this.props.i18n('filter'),
+        "aria-label": this.props.i18n('filter'),
         onkeyup: this.handleKeyPress,
@@ -71,12 +58,14 @@ onkeydown: this.handleKeyPress,
         } }),
-      !this.isEmpty && h(
-        'button',
+      this.props.filterInput && h(
+        "button",
         {
-          'class': 'uppy-u-reset uppy-ProviderBrowser-searchClose',
-          type: 'button',
-          onclick: this.handleClear },
+          "class": "uppy-u-reset uppy-ProviderBrowser-searchClose",
+          type: "button",
+          "aria-label": this.props.i18n('resetFilter'),
+          title: this.props.i18n('resetFilter'),
+          onclick: this.props.filterQuery },
         h(
-          'svg',
-          { 'class': 'UppyIcon', viewBox: '0 0 19 19' },
-          h('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' })
+          "svg",
+          { "aria-hidden": "true", "class": "UppyIcon", viewBox: "0 0 19 19" },
+          h("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" })
         )
@@ -83,0 +72,0 @@ )

lib/index.js

@@ -108,2 +108,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; };
   ProviderView.prototype._updateFilesAndFolders = function _updateFilesAndFolders(res, files, folders) {
+    this.nextPagePath = res.nextPagePath;
     res.items.forEach(function (item) {
@@ -160,3 +161,2 @@ if (item.isFolder) {
       _this3.username = _this3.username ? _this3.username : res.username;
-      _this3.nextPagePath = res.nextPagePath;
       _this3._updateFilesAndFolders(res, files, folders);
@@ -537,3 +537,3 @@ _this3.plugin.setPluginState({ directories: updatedDirectories });
     var scrollPos = e.target.scrollHeight - (e.target.scrollTop + e.target.offsetHeight);
-    var path = this.nextPagePath ? this.nextPagePath : null;
+    var path = this.nextPagePath || null;
 
@@ -540,0 +540,0 @@ if (scrollPos < 50 && path && !this._isHandlingScroll) {

package.json

 {
   "name": "@uppy/provider-views",
   "description": "View library for Uppy remote provider plugins.",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "license": "MIT",
@@ -22,3 +22,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/utils": "0.29.1",
+    "@uppy/utils": "0.30.0",
     "classnames": "^2.2.6",
@@ -28,8 +28,8 @@ "preact": "^8.2.9"
   "devDependencies": {
-    "@uppy/core": "0.29.1"
+    "@uppy/core": "0.30.0"
   },
   "peerDependencies": {
-    "@uppy/core": "^0.29.0"
+    "@uppy/core": "^0.30.0"
   },
-  "gitHead": "3ddf4c7548766a0c522b9a45c03b1fd7d4e03d43"
+  "gitHead": "4dcef4c3b949a35ccfe7b4339a776a5d43052664"
 }

src/Breadcrumbs.js

@@ -5,3 +5,9 @@ const { h } = require('preact')
   return (
-    <button type="button" onclick={props.getFolder}>{props.title}</button>
+    <span>
+      <button
+        type="button"
+        class="uppy-u-reset"
+        onclick={props.getFolder}>{props.title}</button>
+      {!props.isLast ? ' / ' : ''}
+    </span>
   )
@@ -13,2 +19,3 @@ }
     <div class="uppy-Provider-breadcrumbs">
+      <div class="uppy-Provider-breadcrumbsIcon">{props.breadcrumbsIcon}</div>
       {
@@ -18,3 +25,4 @@ props.directories.map((directory, i) => {
             getFolder: () => props.getFolder(directory.id),
-            title: i === 0 ? props.title : directory.title
+            title: i === 0 ? props.title : directory.title,
+            isLast: i + 1 === props.directories.length
           })
@@ -21,0 +29,0 @@ })

src/Browser.js

@@ -23,10 +23,8 @@ const classNames = require('classnames')
         <div class={classNames('uppy-ProviderBrowser-headerBar', !props.showBreadcrumbs && 'uppy-ProviderBrowser-headerBar--simple')}>
-          <div class="uppy-Provider-breadcrumbsWrap">
-            <div class="uppy-Provider-breadcrumbsIcon">{props.pluginIcon && props.pluginIcon()}</div>
-            {props.showBreadcrumbs && Breadcrumbs({
-              getFolder: props.getFolder,
-              directories: props.directories,
-              title: props.title
-            })}
-          </div>
+          {props.showBreadcrumbs && Breadcrumbs({
+            getFolder: props.getFolder,
+            directories: props.directories,
+            breadcrumbsIcon: props.pluginIcon && props.pluginIcon(),
+            title: props.title
+          })}
           <span class="uppy-ProviderBrowser-user">{props.username}</span>
@@ -33,0 +31,0 @@ <button type="button" onclick={props.logout} class="uppy-ProviderBrowser-userLogout">

src/Filter.js

@@ -6,12 +6,5 @@ const { h, Component } = require('preact')
     super(props)
-    this.isEmpty = true
     this.handleKeyPress = this.handleKeyPress.bind(this)
-    this.handleClear = this.handleClear.bind(this)
   }
 
-  // componentDidMount () {
-  //   this.isEmpty = true
-  //   // this.input.focus()
-  // }
-
   handleKeyPress (ev) {
@@ -23,14 +16,8 @@ if (ev.keyCode === 13) {
     }
-    this.isEmpty = !this.input.value.length > 0
     this.props.filterQuery(ev)
   }
 
-  handleClear (ev) {
-    this.input.value = ''
-    this.props.filterQuery()
-  }
-
   render () {
-    return <div class="uppy-u-reset uppy-ProviderBrowser-search">
-      <svg class="UppyIcon uppy-ProviderBrowser-searchIcon" viewBox="0 0 100 100">
+    return <div class="uppy-ProviderBrowser-search">
+      <svg aria-hidden="true" class="UppyIcon uppy-ProviderBrowser-searchIcon" viewBox="0 0 100 100">
         <path d="M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z" />
@@ -41,4 +28,4 @@ </svg>
         type="text"
-        placeholder="Filter"
-        aria-label="Filter"
+        placeholder={this.props.i18n('filter')}
+        aria-label={this.props.i18n('filter')}
         onkeyup={this.handleKeyPress}
@@ -49,8 +36,10 @@ onkeydown={this.handleKeyPress}
         ref={(input) => { this.input = input }} />
-      { !this.isEmpty &&
+      { this.props.filterInput &&
         <button
           class="uppy-u-reset uppy-ProviderBrowser-searchClose"
           type="button"
-          onclick={this.handleClear}>
-          <svg class="UppyIcon" viewBox="0 0 19 19">
+          aria-label={this.props.i18n('resetFilter')}
+          title={this.props.i18n('resetFilter')}
+          onclick={this.props.filterQuery}>
+          <svg aria-hidden="true" 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" />
@@ -57,0 +46,0 @@ </svg>

src/index.js

@@ -84,2 +84,3 @@ const { h, Component } = require('preact')
   _updateFilesAndFolders (res, files, folders) {
+    this.nextPagePath = res.nextPagePath
     res.items.forEach((item) => {
@@ -132,3 +133,2 @@ if (item.isFolder) {
         this.username = this.username ? this.username : res.username
-        this.nextPagePath = res.nextPagePath
         this._updateFilesAndFolders(res, files, folders)
@@ -468,3 +468,3 @@ this.plugin.setPluginState({ directories: updatedDirectories })
     const scrollPos = e.target.scrollHeight - (e.target.scrollTop + e.target.offsetHeight)
-    const path = this.nextPagePath ? this.nextPagePath : null
+    const path = this.nextPagePath || null
 
@@ -471,0 +471,0 @@ if (scrollPos < 50 && path && !this._isHandlingScroll) {

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

Worsened metrics

Total package byte prevSize

105560

decreased by-0.3%

Lines of code

2140

decreased by-0.7%

Dependency changes

• + Added@uppy/core@0.30.5(transitive)

• + Added@uppy/store-default@0.28.3(transitive)

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

• - Removed@uppy/core@0.29.1(transitive)

• - Removed@uppy/store-default@0.27.1(transitive)

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

• Updated@uppy/utils@0.30.0