From 1cc3c0f9036f36e46effa12597a0c6f5083403e8 Mon Sep 17 00:00:00 2001
From: dorosty <ma.dorosty@gmail.com>
Date: Tue, 23 Jan 2024 14:23:36 +0330
Subject: [PATCH 1/5] fix(dnd): hande items insted of files inside drop handler
---
src/utils/dnd.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/dnd.js b/src/utils/dnd.js
index b195eea..e760fdb 100644
--- a/src/utils/dnd.js
+++ b/src/utils/dnd.js
@@ -95,8 +95,8 @@ const getDataTransfer = (ev, type) => {
let data;
if (ev.dataTransfer) {
- files = ev.dataTransfer.files
- ? Array.from(ev.dataTransfer.files)
+ files = ev.dataTransfer.items
+ ? Array.from(ev.dataTransfer.items)
: [];
try {
From b5c2011db7fe780d4b667ac3288803872a1598f9 Mon Sep 17 00:00:00 2001
From: Ali Dorosty <ma.dorosty@gmail.com>
Date: Wed, 24 Jan 2024 10:44:35 +0330
Subject: [PATCH 2/5] feat(dnd): add configurable DataTransferProperty
---
src/utils/dnd.js | 11 ++++++-----
src/utils/windows.js | 1 +
src/window.js | 3 ++-
3 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/src/utils/dnd.js b/src/utils/dnd.js
index e760fdb..0178de8 100644
--- 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.items
- ? Array.from(ev.dataTransfer.items)
+ 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/utils/windows.js b/src/utils/windows.js
index 799f27e..2613cb6 100644
--- a/src/utils/windows.js
+++ b/src/utils/windows.js
@@ -59,6 +59,7 @@ export const createAttributes = attrs => ({
shadowDOM: false,
clamp: true,
droppable: true,
+ droppableDataTransferProperty: 'files',
mediaQueries: {
small: 'screen and (max-width: 640px)',
medium: 'screen and (min-width: 640px) and (max-width: 1024px)',
diff --git a/src/window.js b/src/window.js
index 98b8248..f0cc636 100644
--- a/src/window.js
+++ b/src/window.js
@@ -458,7 +458,8 @@ export default class Window extends EventEmitter {
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.attributes.droppableDataTransferProperty,
});
this.on('destroy', () => d.destroy());
From 26614e9bd844dbf61a77b9ea225d476e33632e42 Mon Sep 17 00:00:00 2001
From: Ali Dorosty <ma.dorosty@gmail.com>
Date: Thu, 25 Jan 2024 13:57:15 +0330
Subject: [PATCH 3/5] style: change attribute configuration
---
index.d.ts | 4 +++-
src/utils/windows.js | 3 +--
src/window.js | 14 ++++++++++++--
3 files changed, 16 insertions(+), 5 deletions(-)
diff --git a/index.d.ts b/index.d.ts
index 6f8e66b..350ca51 100644
--- 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/windows.js b/src/utils/windows.js
index 2613cb6..2096c36 100644
--- a/src/utils/windows.js
+++ b/src/utils/windows.js
@@ -58,8 +58,7 @@ export const createAttributes = attrs => ({
visibility: 'global',
shadowDOM: false,
clamp: true,
- droppable: true,
- droppableDataTransferProperty: 'files',
+ droppable: {},
mediaQueries: {
small: 'screen and (max-width: 640px)',
medium: 'screen and (min-width: 640px) and (max-width: 1024px)',
diff --git a/src/window.js b/src/window.js
index f0cc636..ca53e5a 100644
--- 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={}] 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,12 +454,22 @@ export default class Window extends EventEmitter {
// DnD functionality
if (this.attributes.droppable) {
+ /*
+ `this.attributes.droppable` should probably always be an object
+ and never be set to `true`.
+ The following code is only to update the setting for legacy applications.
+ */
+ if (this.attributes.droppable === true) {
+ this.attributes.droppable = {};
+ }
+
+ const {dataTransferProperty = 'files'} = 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),
- dataTransferProperty: this.attributes.droppableDataTransferProperty,
+ dataTransferProperty,
});
this.on('destroy', () => d.destroy());
From b392800a15e802581b3918b9c10abf321f0f457e Mon Sep 17 00:00:00 2001
From: Ali Dorosty <ma.dorosty@gmail.com>
Date: Fri, 26 Jan 2024 07:34:31 +0330
Subject: [PATCH 4/5] fix: do not change property
---
src/window.js | 12 +++---------
1 file changed, 3 insertions(+), 9 deletions(-)
diff --git a/src/window.js b/src/window.js
index ca53e5a..0c9de80 100644
--- a/src/window.js
+++ b/src/window.js
@@ -454,16 +454,10 @@ export default class Window extends EventEmitter {
// DnD functionality
if (this.attributes.droppable) {
- /*
- `this.attributes.droppable` should probably always be an object
- and never be set to `true`.
- The following code is only to update the setting for legacy applications.
- */
- if (this.attributes.droppable === true) {
- this.attributes.droppable = {};
- }
+ const {dataTransferProperty = 'files'} = this.attributes.droppable === true
+ ? {}
+ : this.attributes.droppable;
- const {dataTransferProperty = 'files'} = this.attributes.droppable;
const d = droppable(this.$element, {
ondragenter: (...args) => this.emit('dragenter', ...args, this),
ondragover: (...args) => this.emit('dragover', ...args, this),
From 74c82667bb1f0d5d4994212b1fe827bff40d82ca Mon Sep 17 00:00:00 2001
From: Ali Dorosty <ma.dorosty@gmail.com>
Date: Sat, 27 Jan 2024 02:36:06 +0330
Subject: [PATCH 5/5] fix: revert default value
---
src/utils/windows.js | 2 +-
src/window.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/windows.js b/src/utils/windows.js
index 2096c36..799f27e 100644
--- a/src/utils/windows.js
+++ b/src/utils/windows.js
@@ -58,7 +58,7 @@ export const createAttributes = attrs => ({
visibility: 'global',
shadowDOM: false,
clamp: true,
- droppable: {},
+ droppable: true,
mediaQueries: {
small: 'screen and (max-width: 640px)',
medium: 'screen and (min-width: 640px) and (max-width: 1024px)',
diff --git a/src/window.js b/src/window.js
index 0c9de80..fc1fc2b 100644
--- 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 | {dataTransferProperty?: 'files' | 'items'}} [droppable={}] 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