@uppy/drag-drop: refactor to TypeScript

[aduh95]

No description provided.

[github-actions]

Diff output files

diff --git a/packages/@uppy/drag-drop/lib/DragDrop.js b/packages/@uppy/drag-drop/lib/DragDrop.js
index f85de6d..a8cc723 100644
--- a/packages/@uppy/drag-drop/lib/DragDrop.js
+++ b/packages/@uppy/drag-drop/lib/DragDrop.js
@@ -7,11 +7,81 @@ const packageJson = {
   "version": "3.0.3",
 };
 import locale from "./locale.js";
+const defaultOptions = {
+  inputName: "files[]",
+  width: "100%",
+  height: "100%",
+};
 export default class DragDrop extends UIPlugin {
   constructor(uppy, opts) {
-    super(uppy, opts);
+    super(uppy, {
+      ...defaultOptions,
+      ...opts,
+    });
+    this.isDragDropSupported = isDragDropSupported();
+    this.addFiles = files => {
+      const descriptors = files.map(file => ({
+        source: this.id,
+        name: file.name,
+        type: file.type,
+        data: file,
+        meta: {
+          relativePath: file.relativePath || null,
+        },
+      }));
+      try {
+        this.uppy.addFiles(descriptors);
+      } catch (err) {
+        this.uppy.log(err);
+      }
+    };
+    this.onInputChange = event => {
+      const files = toArray(event.target.files);
+      if (files.length > 0) {
+        this.uppy.log("[DragDrop] Files selected through input");
+        this.addFiles(files);
+      }
+      event.target.value = null;
+    };
+    this.handleDragOver = event => {
+      var _this$opts$onDragOver, _this$opts;
+      event.preventDefault();
+      event.stopPropagation();
+      const {
+        types,
+      } = event.dataTransfer;
+      const hasFiles = types.some(type => type === "Files");
+      const {
+        allowNewUpload,
+      } = this.uppy.getState();
+      if (!hasFiles || !allowNewUpload) {
+        event.dataTransfer.dropEffect = "none";
+        clearTimeout(this.removeDragOverClassTimeout);
+        return;
+      }
+      event.dataTransfer.dropEffect = "copy";
+      clearTimeout(this.removeDragOverClassTimeout);
+      this.setPluginState({
+        isDraggingOver: true,
+      });
+      (_this$opts$onDragOver = (_this$opts = this.opts).onDragOver) == null
+        || _this$opts$onDragOver.call(_this$opts, event);
+    };
+    this.handleDragLeave = event => {
+      var _this$opts$onDragLeav, _this$opts2;
+      event.preventDefault();
+      event.stopPropagation();
+      clearTimeout(this.removeDragOverClassTimeout);
+      this.removeDragOverClassTimeout = setTimeout(() => {
+        this.setPluginState({
+          isDraggingOver: false,
+        });
+      }, 50);
+      (_this$opts$onDragLeav = (_this$opts2 = this.opts).onDragLeave) == null
+        || _this$opts$onDragLeav.call(_this$opts2, event);
+    };
     this.handleDrop = async event => {
-      var _this$opts$onDrop, _this$opts;
+      var _this$opts$onDrop, _this$opts3;
       event.preventDefault();
       event.stopPropagation();
       clearTimeout(this.removeDragOverClassTimeout);
@@ -28,93 +98,13 @@ export default class DragDrop extends UIPlugin {
         this.uppy.log("[DragDrop] Files dropped");
         this.addFiles(files);
       }
-      (_this$opts$onDrop = (_this$opts = this.opts).onDrop) == null || _this$opts$onDrop.call(_this$opts, event);
+      (_this$opts$onDrop = (_this$opts3 = this.opts).onDrop) == null || _this$opts$onDrop.call(_this$opts3, event);
     };
     this.type = "acquirer";
     this.id = this.opts.id || "DragDrop";
     this.title = "Drag & Drop";
     this.defaultLocale = locale;
-    const defaultOpts = {
-      target: null,
-      inputName: "files[]",
-      width: "100%",
-      height: "100%",
-      note: null,
-    };
-    this.opts = {
-      ...defaultOpts,
-      ...opts,
-    };
     this.i18nInit();
-    this.isDragDropSupported = isDragDropSupported();
-    this.removeDragOverClassTimeout = null;
-    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);
-  }
-  addFiles(files) {
-    const descriptors = files.map(file => ({
-      source: this.id,
-      name: file.name,
-      type: file.type,
-      data: file,
-      meta: {
-        relativePath: file.relativePath || null,
-      },
-    }));
-    try {
-      this.uppy.addFiles(descriptors);
-    } catch (err) {
-      this.uppy.log(err);
-    }
-  }
-  onInputChange(event) {
-    const files = toArray(event.target.files);
-    if (files.length > 0) {
-      this.uppy.log("[DragDrop] Files selected through input");
-      this.addFiles(files);
-    }
-    event.target.value = null;
-  }
-  handleDragOver(event) {
-    var _this$opts$onDragOver, _this$opts2;
-    event.preventDefault();
-    event.stopPropagation();
-    const {
-      types,
-    } = event.dataTransfer;
-    const hasFiles = types.some(type => type === "Files");
-    const {
-      allowNewUpload,
-    } = this.uppy.getState();
-    if (!hasFiles || !allowNewUpload) {
-      event.dataTransfer.dropEffect = "none";
-      clearTimeout(this.removeDragOverClassTimeout);
-      return;
-    }
-    event.dataTransfer.dropEffect = "copy";
-    clearTimeout(this.removeDragOverClassTimeout);
-    this.setPluginState({
-      isDraggingOver: true,
-    });
-    (_this$opts$onDragOver = (_this$opts2 = this.opts).onDragOver) == null
-      || _this$opts$onDragOver.call(_this$opts2, event);
-  }
-  handleDragLeave(event) {
-    var _this$opts$onDragLeav, _this$opts3;
-    event.preventDefault();
-    event.stopPropagation();
-    clearTimeout(this.removeDragOverClassTimeout);
-    this.removeDragOverClassTimeout = setTimeout(() => {
-      this.setPluginState({
-        isDraggingOver: false,
-      });
-    }, 50);
-    (_this$opts$onDragLeav = (_this$opts3 = this.opts).onDragLeave) == null
-      || _this$opts$onDragLeav.call(_this$opts3, event);
   }
   renderHiddenFileInput() {
     const {