@uppy/drag-drop - npm Package Compare versions

Comparing version 1.4.31 to 2.0.0-alpha.0

lib/index.js

@@ -0,24 +1,20 @@
+"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); }
+const {
+  UIPlugin
+} = require('@uppy/core');
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+const Translator = require('@uppy/utils/lib/Translator');
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+const toArray = require('@uppy/utils/lib/toArray');
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported');
 
-var _require = require('@uppy/core'),
-    Plugin = _require.Plugin;
+const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles');
 
-var Translator = require('@uppy/utils/lib/Translator');
-
-var toArray = require('@uppy/utils/lib/toArray');
-
-var isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported');
-
-var getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles');
-
-var _require2 = require('preact'),
-    h = _require2.h;
+const {
+  h
+} = require('preact');
 /**
@@ -30,14 +26,10 @@ * Drag & Drop plugin
 
-module.exports = (_temp = _class = /*#__PURE__*/function (_Plugin) {
-  _inheritsLoose(DragDrop, _Plugin);
-
+module.exports = (_temp = _class = class DragDrop extends UIPlugin {
   // eslint-disable-next-line global-require
-  function DragDrop(uppy, opts) {
-    var _this;
-
-    _this = _Plugin.call(this, uppy, opts) || this;
-    _this.type = 'acquirer';
-    _this.id = _this.opts.id || 'DragDrop';
-    _this.title = 'Drag & Drop';
-    _this.defaultLocale = {
+  constructor(uppy, opts) {
+    super(uppy, opts);
+    this.type = 'acquirer';
+    this.id = this.opts.id || 'DragDrop';
+    this.title = 'Drag & Drop';
+    this.defaultLocale = {
       strings: {
@@ -49,3 +41,3 @@ dropHereOr: 'Drop files here or %{browse}',
 
-    var defaultOpts = {
+    const defaultOpts = {
       target: null,
@@ -58,51 +50,31 @@ inputName: 'files[]',
 
-    _this.opts = _extends({}, defaultOpts, opts); // Check for browser dragDrop support
+    this.opts = { ...defaultOpts,
+      ...opts
+    };
+    this.i18nInit(); // Check for browser dragDrop support
 
-    _this.isDragDropSupported = isDragDropSupported();
-    _this.removeDragOverClassTimeout = null;
+    this.isDragDropSupported = isDragDropSupported();
+    this.removeDragOverClassTimeout = null; // Bind `this` to class methods
 
-    _this.i18nInit(); // Bind `this` to class methods
-
-
-    _this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this));
-    _this.handleDragOver = _this.handleDragOver.bind(_assertThisInitialized(_this));
-    _this.handleDragLeave = _this.handleDragLeave.bind(_assertThisInitialized(_this));
-    _this.handleDrop = _this.handleDrop.bind(_assertThisInitialized(_this));
-    _this.addFiles = _this.addFiles.bind(_assertThisInitialized(_this));
-    _this.render = _this.render.bind(_assertThisInitialized(_this));
-    return _this;
+    this.onInputChange = this.onInputChange.bind(this);
+    this.handleDragOver = this.handleDragOver.bind(this);
+    this.handleDragLeave = this.handleDragLeave.bind(this);
+    this.handleDrop = this.handleDrop.bind(this);
+    this.addFiles = this.addFiles.bind(this);
+    this.render = this.render.bind(this);
   }
 
-  var _proto = DragDrop.prototype;
+  addFiles(files) {
+    const descriptors = files.map(file => ({
+      source: this.id,
+      name: file.name,
+      type: file.type,
+      data: file,
+      meta: {
+        // path of the file relative to the ancestor directory the user selected.
+        // e.g. 'docs/Old Prague/airbnb.pdf'
+        relativePath: file.relativePath || null
+      }
+    }));
 
-  _proto.setOptions = function setOptions(newOpts) {
-    _Plugin.prototype.setOptions.call(this, newOpts);
-
-    this.i18nInit();
-  };
-
-  _proto.i18nInit = function i18nInit() {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale]);
-    this.i18n = this.translator.translate.bind(this.translator);
-    this.i18nArray = this.translator.translateArray.bind(this.translator);
-    this.setPluginState(); // so that UI re-renders and we see the updated locale
-  };
-
-  _proto.addFiles = function addFiles(files) {
-    var _this2 = this;
-
-    var descriptors = files.map(function (file) {
-      return {
-        source: _this2.id,
-        name: file.name,
-        type: file.type,
-        data: file,
-        meta: {
-          // path of the file relative to the ancestor directory the user selected.
-          // e.g. 'docs/Old Prague/airbnb.pdf'
-          relativePath: file.relativePath || null
-        }
-      };
-    });
-
     try {
@@ -113,7 +85,7 @@ this.uppy.addFiles(descriptors);
     }
-  };
+  }
 
-  _proto.onInputChange = function onInputChange(event) {
+  onInputChange(event) {
     this.uppy.log('[DragDrop] Files selected through input');
-    var files = toArray(event.target.files);
+    const files = toArray(event.target.files);
     this.addFiles(files); // We clear the input after a file is selected, because otherwise
@@ -128,7 +100,5 @@ // change event is not fired in Chrome and Safari when a file
     event.target.value = null;
-  };
+  }
 
-  _proto.handleDrop = function handleDrop(event) {
-    var _this3 = this;
-
+  handleDrop(event) {
     if (this.opts.onDrop) this.opts.onDrop(event);
@@ -145,14 +115,12 @@ event.preventDefault();
 
-    var logDropError = function logDropError(error) {
-      _this3.uppy.log(error, 'error');
+    const logDropError = error => {
+      this.uppy.log(error, 'error');
     };
 
     getDroppedFiles(event.dataTransfer, {
-      logDropError: logDropError
-    }).then(function (files) {
-      return _this3.addFiles(files);
-    });
-  };
+      logDropError
+    }).then(files => this.addFiles(files));
+  }
 
-  _proto.handleDragOver = function handleDragOver(event) {
+  handleDragOver(event) {
     if (this.opts.onDragOver) this.opts.onDragOver(event);
@@ -171,7 +139,5 @@ event.preventDefault();
     });
-  };
+  }
 
-  _proto.handleDragLeave = function handleDragLeave(event) {
-    var _this4 = this;
-
+  handleDragLeave(event) {
     if (this.opts.onDragLeave) this.opts.onDragLeave(event);
@@ -183,13 +149,13 @@ event.preventDefault();
 
-    this.removeDragOverClassTimeout = setTimeout(function () {
-      _this4.setPluginState({
+    this.removeDragOverClassTimeout = setTimeout(() => {
+      this.setPluginState({
         isDraggingOver: false
       });
     }, 50);
-  };
+  }
 
-  _proto.renderHiddenFileInput = function renderHiddenFileInput() {
-    var _this5 = this;
-
-    var restrictions = this.uppy.opts.restrictions;
+  renderHiddenFileInput() {
+    const {
+      restrictions
+    } = this.uppy.opts;
     return h("input", {
@@ -199,4 +165,4 @@ className: "uppy-DragDrop-input",
       hidden: true,
-      ref: function ref(_ref) {
-        _this5.fileInputRef = _ref;
+      ref: ref => {
+        this.fileInputRef = ref;
       },
@@ -208,5 +174,5 @@ name: this.opts.inputName,
     });
-  };
+  }
 
-  DragDrop.renderArrowSvg = function renderArrowSvg() {
+  static renderArrowSvg() {
     return h("svg", {
@@ -223,5 +189,5 @@ "aria-hidden": "true",
     }));
-  };
+  }
 
-  _proto.renderLabel = function renderLabel() {
+  renderLabel() {
     return h("div", {
@@ -234,15 +200,18 @@ className: "uppy-DragDrop-label"
     }));
-  };
+  }
 
-  _proto.renderNote = function renderNote() {
+  renderNote() {
     return h("span", {
       className: "uppy-DragDrop-note"
     }, this.opts.note);
-  };
+  }
 
-  _proto.render = function render() {
-    var _this6 = this;
-
-    var dragDropClass = "uppy-Root\n      uppy-u-reset\n      uppy-DragDrop-container\n      " + (this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : '') + "\n      " + (this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : '') + "\n    ";
-    var dragDropStyle = {
+  render() {
+    const dragDropClass = `uppy-Root
+      uppy-u-reset
+      uppy-DragDrop-container
+      ${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
+      ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
+    `;
+    const dragDropStyle = {
       width: this.opts.width,
@@ -255,5 +224,3 @@ height: this.opts.height
       style: dragDropStyle,
-      onClick: function onClick() {
-        return _this6.fileInputRef.click();
-      },
+      onClick: () => this.fileInputRef.click(),
       onDragOver: this.handleDragOver,
@@ -265,6 +232,8 @@ onDragLeave: this.handleDragLeave,
     }, DragDrop.renderArrowSvg(), this.renderLabel(), this.renderNote()));
-  };
+  }
 
-  _proto.install = function install() {
-    var target = this.opts.target;
+  install() {
+    const {
+      target
+    } = this.opts;
     this.setPluginState({
@@ -277,9 +246,8 @@ isDraggingOver: false
     }
-  };
+  }
 
-  _proto.uninstall = function uninstall() {
+  uninstall() {
     this.unmount();
-  };
+  }
 
-  return DragDrop;
-}(Plugin), _class.VERSION = "1.4.31", _temp);
+}, _class.VERSION = "2.0.0-alpha.0", _temp);

package.json

 {
   "name": "@uppy/drag-drop",
   "description": "Droppable zone UI for Uppy. Drag and drop files into it to upload.",
-  "version": "1.4.31",
+  "version": "2.0.0-alpha.0",
   "license": "MIT",
@@ -28,4 +28,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"
   },
@@ -35,3 +35,3 @@ "peerDependencies": {
   },
-  "gitHead": "28997bc5c733e3f7ab7183d6cd61d2dfd74f71e4"
+  "gitHead": "113b627dd0ef5aa5d198dc309dda05da2117dfe5"
 }

README.md

@@ -17,8 +17,8 @@ # @uppy/drag-drop
 ```js
-const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
+import Uppy from '@uppy/core'
+import DragDrop from '@uppy/drag-drop'
 
 const uppy = new Uppy()
 uppy.use(DragDrop, {
-  target: '#upload'
+  target: '#upload',
 })
@@ -25,0 +25,0 @@ ```

src/index.js

@@ -1,2 +0,2 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
@@ -12,3 +12,3 @@ const toArray = require('@uppy/utils/lib/toArray')
  */
-module.exports = class DragDrop extends Plugin {
+module.exports = class DragDrop extends UIPlugin {
   // eslint-disable-next-line global-require
@@ -42,2 +42,4 @@ static VERSION = require('../package.json').version
 
+    this.i18nInit()
+
     // Check for browser dragDrop support
@@ -47,4 +49,2 @@ this.isDragDropSupported = isDragDropSupported()
 
-    this.i18nInit()
-
     // Bind `this` to class methods
@@ -59,14 +59,2 @@ this.onInputChange = this.onInputChange.bind(this)
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   addFiles (files) {
@@ -73,0 +61,0 @@ const descriptors = files.map((file) => ({

types/generatedLocale.d.ts

@@ -1,8 +0,9 @@
-import Uppy = require('@uppy/core')
+/* eslint-disable */
+  import type { Locale } from '@uppy/core'
 
-type DragDropLocale = Uppy.Locale<
-  | 'dropHereOr'
-  | 'browse'
->
+  type DragDropLocale = Locale<
+      | 'dropHereOr'
+| 'browse'
+  >
 
-export = DragDropLocale
+  export default DragDropLocale

types/index.d.ts

@@ -1,22 +0,20 @@
-import Uppy = require('@uppy/core')
-import DragDropLocale = require('./generatedLocale')
+import type { PluginOptions, UIPlugin, PluginTarget } from '@uppy/core'
+import DragDropLocale from './generatedLocale'
 
-declare module DragDrop {
-  interface DragDropOptions extends Uppy.PluginOptions {
-    replaceTargetContent?: boolean
-    target?: Uppy.PluginTarget
-    inputName?: string
-    allowMultipleFiles?: boolean
-    width?: string | number
-    height?: string | number
-    note?: string
-    locale?: DragDropLocale
-    onDragOver?: (event: MouseEvent) => void
-    onDragLeave?: (event: MouseEvent) => void
-    onDrop?: (event: MouseEvent) => void
-  }
+export interface DragDropOptions extends PluginOptions {
+  replaceTargetContent?: boolean
+  target?: PluginTarget
+  inputName?: string
+  allowMultipleFiles?: boolean
+  width?: string | number
+  height?: string | number
+  note?: string
+  locale?: DragDropLocale
+  onDragOver?: (event: MouseEvent) => void
+  onDragLeave?: (event: MouseEvent) => void
+  onDrop?: (event: MouseEvent) => void
 }
 
-declare class DragDrop extends Uppy.Plugin<DragDrop.DragDropOptions> {}
+declare class DragDrop extends UIPlugin<DragDropOptions> {}
 
-export = DragDrop
+export default DragDrop

types/index.test-d.ts

@@ -1,26 +0,26 @@
-import Uppy = require("@uppy/core");
+import Uppy from '@uppy/core'
 
-import DragDrop = require("../");
+import DragDrop from '..'
 
 {
-  const uppy = Uppy<Uppy.StrictTypes>();
+  const uppy = new Uppy()
 
   uppy.use(DragDrop, {
     replaceTargetContent: true,
-    target: "body",
-    inputName: "test",
+    target: 'body',
+    inputName: 'test',
     allowMultipleFiles: true,
     width: 100,
-    height: "100",
-    note: "note",
+    height: '100',
+    note: 'note',
     locale: {
       strings: {
-        dropHereOr: "test",
-        browse: "test"
-      }
+        dropHereOr: 'test',
+        browse: 'test',
+      },
     },
-    onDragOver: event => event.clientX,
-    onDragLeave: event => event.clientY,
-    onDrop: event => event
-  });
+    onDragOver: (event) => event.clientX,
+    onDragLeave: (event) => event.clientY,
+    onDrop: (event) => event,
+  })
 }

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

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

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

33877

decreased by-10.88%

Lines of code

494

decreased by-6.08%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

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

• + Addedpreact@10.24.3(transitive)

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

• Updatedpreact@^10.5.13