feat(dnd): add configurable dataTransferProperty to droppable (#213)

os-js · Jan 26, 2024 · 12717e2 · 12717e2
1 parent f4343b8
commit 12717e2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -577,7 +577,9 @@ export type WindowAttributes = {
   /**
    * If window should have the default drop action
    */
-  droppable?: boolean;
+  droppable?: boolean | {
+    dataTransferProperty?: 'files' | 'items';
+  };
   /**
    * Minimum dimension
    */

diff --git a/src/utils/dnd.js b/src/utils/dnd.js
@@ -90,13 +90,13 @@ const retval = (fn, ...args) => {
   return true;
 };
 
-const getDataTransfer = (ev, type) => {
+const getDataTransfer = (ev, type, dataTransferProperty) => {
   let files = [];
   let data;
 
   if (ev.dataTransfer) {
-    files = ev.dataTransfer.files
-      ? Array.from(ev.dataTransfer.files)
+    files = ev.dataTransfer[dataTransferProperty]
+      ? Array.from(ev.dataTransfer[dataTransferProperty])
       : [];
 
     try {
@@ -200,9 +200,10 @@ export const draggable = (el, options = {}) => {
  * @return {DroppableInstance}
  */
 export const droppable = (el, options = {}) => {
-  const {strict, type, effect, ondragenter, ondragover, ondragleave, ondrop} = {
+  const {strict, type, effect, dataTransferProperty, ondragenter, ondragover, ondragleave, ondrop} = {
     type: 'application/json',
     effect: 'move',
+    dataTransferProperty: 'files',
     ondragenter: () => true,
     ondragover: () => true,
     ondragleave: () => true,
@@ -241,7 +242,7 @@ export const droppable = (el, options = {}) => {
       return false;
     }
 
-    const {files, data} = getDataTransfer(ev, type);
+    const {files, data} = getDataTransfer(ev, type, dataTransferProperty);
 
     ev.stopPropagation();
     ev.preventDefault();

diff --git a/src/window.js b/src/window.js
@@ -84,7 +84,7 @@ import logger from './logger';
  * @property {boolean} [controls=true] Show controls
  * @property {string} [visibility=global] Global visibility, 'restricted' to hide from window lists etc.
  * @property {boolean} [clamp=true] Clamp the window position upon creation
- * @property {boolean} [droppable=true] If window should have the default drop action
+ * @property {boolean | {dataTransferProperty?: 'files' | 'items'}} [droppable=true] If window should have the default drop action
  * @property {WindowDimension} [minDimension] Minimum dimension
  * @property {WindowDimension} [maxDimension] Maximum dimension
  * @property {{name: string}} [mediaQueries] A map of matchMedia to name
@@ -454,11 +454,16 @@ export default class Window extends EventEmitter {
 
     // DnD functionality
     if (this.attributes.droppable) {
+      const {dataTransferProperty = 'files'} = this.attributes.droppable === true
+        ? {}
+        : this.attributes.droppable;
+
       const d = droppable(this.$element, {
         ondragenter: (...args) => this.emit('dragenter', ...args, this),
         ondragover: (...args) => this.emit('dragover', ...args, this),
         ondragleave: (...args) => this.emit('dragleave', ...args, this),
-        ondrop: (...args) => this.emit('drop', ...args, this)
+        ondrop: (...args) => this.emit('drop', ...args, this),
+        dataTransferProperty,
       });
 
       this.on('destroy', () => d.destroy());