@uppy/informer - npm Package Compare versions

Comparing version 1.6.6 to 2.0.0-alpha.0

lib/index.js

@@ -0,14 +1,19 @@
+"use strict";
+
 var _class, _temp;
 
-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); }
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions  */
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+const {
+  h
+} = require('preact');
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+const {
+  UIPlugin
+} = require('@uppy/core');
 
-var _require = require('@uppy/core'),
-    Plugin = _require.Plugin;
+const FadeIn = require('./FadeIn');
 
-var _require2 = require('preact'),
-    h = _require2.h;
+const TransitionGroup = require('./TransitionGroup');
 /**
@@ -23,66 +28,45 @@ * Informer
 
-module.exports = (_temp = _class = /*#__PURE__*/function (_Plugin) {
-  _inheritsLoose(Informer, _Plugin);
+module.exports = (_temp = _class = class Informer extends UIPlugin {
+  // eslint-disable-next-line global-require
+  constructor(uppy, opts) {
+    super(uppy, opts);
 
-  function Informer(uppy, opts) {
-    var _this;
-
-    _this = _Plugin.call(this, uppy, opts) || this;
-
-    _this.render = function (state) {
-      var _state$info = state.info,
-          isHidden = _state$info.isHidden,
-          message = _state$info.message,
-          details = _state$info.details;
-
-      function displayErrorAlert() {
-        var errorMessage = message + " \n\n " + details;
-        alert(errorMessage);
-      }
-
-      var handleMouseOver = function handleMouseOver() {
-        clearTimeout(_this.uppy.infoTimeoutID);
-      };
-
-      var handleMouseLeave = function handleMouseLeave() {
-        _this.uppy.infoTimeoutID = setTimeout(_this.uppy.hideInfo, 2000);
-      };
-
+    this.render = state => {
       return h("div", {
-        className: "uppy uppy-Informer",
-        "aria-hidden": isHidden
+        className: "uppy uppy-Informer"
+      }, h(TransitionGroup, null, state.info.map(info => h(FadeIn, {
+        key: info.message
       }, h("p", {
         role: "alert"
-      }, message, ' ', details && h("span", {
-        "aria-label": details,
+      }, info.message, ' ', info.details && h("span", {
+        "aria-label": info.details,
         "data-microtip-position": "top-left",
         "data-microtip-size": "medium",
-        role: "tooltip",
-        onClick: displayErrorAlert,
-        onMouseOver: handleMouseOver,
-        onMouseLeave: handleMouseLeave
-      }, "?")));
+        role: "tooltip" // eslint-disable-next-line no-alert
+        ,
+        onClick: () => alert(`${info.message} \n\n ${info.details}`)
+      }, "?"))))));
     };
 
-    _this.type = 'progressindicator';
-    _this.id = _this.opts.id || 'Informer';
-    _this.title = 'Informer'; // set default options
+    this.type = 'progressindicator';
+    this.id = this.opts.id || 'Informer';
+    this.title = 'Informer'; // set default options
 
-    var defaultOptions = {}; // merge default options with the ones set by user
+    const defaultOptions = {}; // merge default options with the ones set by user
 
-    _this.opts = _extends({}, defaultOptions, opts);
-    return _this;
+    this.opts = { ...defaultOptions,
+      ...opts
+    };
   }
 
-  var _proto = Informer.prototype;
+  install() {
+    const {
+      target
+    } = this.opts;
 
-  _proto.install = function install() {
-    var target = this.opts.target;
-
     if (target) {
       this.mount(target, this);
     }
-  };
+  }
 
-  return Informer;
-}(Plugin), _class.VERSION = "1.6.6", _temp);
+}, _class.VERSION = "2.0.0-alpha.0", _temp);

package.json

 {
   "name": "@uppy/informer",
   "description": "A notification and error pop-up bar for Uppy.",
-  "version": "1.6.6",
+  "version": "2.0.0-alpha.0",
   "license": "MIT",
@@ -26,4 +26,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/utils": "^3.6.2",
-    "preact": "8.2.9"
+    "@uppy/utils": "^4.0.0-alpha.0",
+    "preact": "^10.5.13"
   },
@@ -33,3 +33,3 @@ "peerDependencies": {
   },
-  "gitHead": "4b782ffbbb443672843d7b4096956bed3b11d612"
+  "gitHead": "113b627dd0ef5aa5d198dc309dda05da2117dfe5"
 }

README.md

@@ -15,8 +15,8 @@ # @uppy/informer
 ```js
-const Uppy = require('@uppy/core')
-const Informer = require('@uppy/informer')
+import Uppy from '@uppy/core'
+import Informer from '@uppy/informer'
 
 const uppy = new Uppy()
 uppy.use(Informer, {
-  target: '#mount-point'
+  target: '#mount-point',
 })
@@ -23,0 +23,0 @@ ```

src/index.js

@@ -1,3 +0,7 @@
-const { Plugin } = require('@uppy/core')
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions  */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 const { h } = require('preact')
+const { UIPlugin } = require('@uppy/core')
+const FadeIn = require('./FadeIn')
+const TransitionGroup = require('./TransitionGroup')
 
@@ -11,3 +15,4 @@ /**
  */
-module.exports = class Informer extends Plugin {
+module.exports = class Informer extends UIPlugin {
+  // eslint-disable-next-line global-require
   static VERSION = require('../package.json').version
@@ -28,39 +33,26 @@
   render = (state) => {
-    const { isHidden, message, details } = state.info
-
-    function displayErrorAlert () {
-      const errorMessage = `${message} \n\n ${details}`
-      alert(errorMessage)
-    }
-
-    const handleMouseOver = () => {
-      clearTimeout(this.uppy.infoTimeoutID)
-    }
-
-    const handleMouseLeave = () => {
-      this.uppy.infoTimeoutID = setTimeout(this.uppy.hideInfo, 2000)
-    }
-
     return (
-      <div
-        className="uppy uppy-Informer"
-        aria-hidden={isHidden}
-      >
-        <p role="alert">
-          {message}
-          {' '}
-          {details && (
-            <span
-              aria-label={details}
-              data-microtip-position="top-left"
-              data-microtip-size="medium"
-              role="tooltip"
-              onClick={displayErrorAlert}
-              onMouseOver={handleMouseOver}
-              onMouseLeave={handleMouseLeave}
-            >
-              ?
-            </span>
-          )}
-        </p>
+      <div className="uppy uppy-Informer">
+        <TransitionGroup>
+          {state.info.map((info) => (
+            <FadeIn key={info.message}>
+              <p role="alert">
+                {info.message}
+                {' '}
+                {info.details && (
+                  <span
+                    aria-label={info.details}
+                    data-microtip-position="top-left"
+                    data-microtip-size="medium"
+                    role="tooltip"
+                    // eslint-disable-next-line no-alert
+                    onClick={() => alert(`${info.message} \n\n ${info.details}`)}
+                  >
+                    ?
+                  </span>
+                )}
+              </p>
+            </FadeIn>
+          ))}
+        </TransitionGroup>
       </div>
@@ -71,3 +63,3 @@ )
   install () {
-    const target = this.opts.target
+    const { target } = this.opts
     if (target) {
@@ -74,0 +66,0 @@ this.mount(target, this)

types/index.d.ts

@@ -1,12 +0,10 @@
-import Uppy = require('@uppy/core')
+import type { PluginOptions, UIPlugin, PluginTarget } from '@uppy/core'
 
-declare module Informer {
-  interface InformerOptions extends Uppy.PluginOptions {
-    replaceTargetContent?: boolean
-    target?: Uppy.PluginTarget
-  }
+interface InformerOptions extends PluginOptions {
+  replaceTargetContent?: boolean
+  target?: PluginTarget
 }
 
-declare class Informer extends Uppy.Plugin<Informer.InformerOptions> {}
+declare class Informer extends UIPlugin<InformerOptions> {}
 
-export = Informer
+export default Informer

types/index.test-d.ts

@@ -1,1 +0,2 @@
-import Informer = require('../')
+// import Informer from '..'
+// TODO implement

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52935

increased by230.41%

Number of package files

17

increased by54.55%

Lines of code

747

increased by252.36%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

• + Addedpreact@10.22.0(transitive)

• Updated@uppy/utils@^4.0.0-alpha.0

• Updatedpreact@^10.5.13