ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feat/is dragging prop (#2025)

Browse source 
* fix: lion-selected-filelist, restored composed: true and bubbles: true for 'file-remove-requested' event, otherwise removing files for subclassers won't work

* feat: added isDragging property
This commit is contained in:
Danny Moerkerke 2023-06-27 09:18:41 +02:00 committed by GitHub
parent 05fbac7f71
commit 137a1b6cf5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/yellow-eels-rule.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
lion-input-file: added isDragging property

12
packages/ui/components/input-file/src/LionInputFile.js
View file

@ -47,6 +47,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
maxFileSize: { type: Number, attribute: 'max-file-size' }, maxFileSize: { type: Number, attribute: 'max-file-size' },
enableDropZone: { type: Boolean, attribute: 'enable-drop-zone' }, enableDropZone: { type: Boolean, attribute: 'enable-drop-zone' },
uploadOnSelect: { type: Boolean, attribute: 'upload-on-select' }, uploadOnSelect: { type: Boolean, attribute: 'upload-on-select' },
isDragging: { type: Boolean, attribute: 'is-dragging', reflect: true },
uploadResponse: { type: Array, state: false }, uploadResponse: { type: Array, state: false },
_selectedFilesMetaData: { type: Array, state: true }, _selectedFilesMetaData: { type: Array, state: true },
}; };
@ -300,11 +301,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
(/** @type {Event} */ ev) => { (/** @type {Event} */ ev) => {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
if (eventName !== 'dragleave') { this.isDragging = eventName !== 'dragleave';
this.setAttribute('is-dragging', '');
} else {
this.removeAttribute('is-dragging');
}
}, },
false, false,
); );
@ -316,7 +313,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
if (ev.target === this._inputNode) { if (ev.target === this._inputNode) {
ev.preventDefault(); ev.preventDefault();
} }
this.removeAttribute('is-dragging'); this.isDragging = false;
}, },
false, false,
); );
@ -436,6 +433,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
]; ];
} }
}); });
// this._selectedFilesMetaData = [...this._selectedFilesMetaData];
} }
}); });
} }
@ -468,7 +466,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
*/ */
_processDroppedFiles(ev) { _processDroppedFiles(ev) {
ev.preventDefault(); ev.preventDefault();
this.removeAttribute('is-dragging'); this.isDragging = false;
const isDraggingMultipleWhileNotSupported = const isDraggingMultipleWhileNotSupported =
ev.dataTransfer && ev.dataTransfer.items.length > 1 && !this.multiple; ev.dataTransfer && ev.dataTransfer.items.length > 1 && !this.multiple;

4
packages/ui/components/input-file/test/lion-input-file.test.js
View file

@ -927,12 +927,14 @@ describe('lion-input-file', () => {
it('should set "is-dragging" on dragenter', async () => { it('should set "is-dragging" on dragenter', async () => {
const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone'); const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
dropzone?.dispatchEvent(new Event('dragenter', { bubbles: true })); dropzone?.dispatchEvent(new Event('dragenter', { bubbles: true }));
await el.updateComplete;
expect(el.hasAttribute('is-dragging')).to.equal(true); expect(el.hasAttribute('is-dragging')).to.equal(true);
}); });
it('should set "is-dragging" on dragover', async () => { it('should set "is-dragging" on dragover', async () => {
const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone'); const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
dropzone?.dispatchEvent(new Event('dragover', { bubbles: true })); dropzone?.dispatchEvent(new Event('dragover', { bubbles: true }));
await el.updateComplete;
expect(el.hasAttribute('is-dragging')).to.equal(true); expect(el.hasAttribute('is-dragging')).to.equal(true);
}); });
@ -942,6 +944,7 @@ describe('lion-input-file', () => {
await el.updateComplete; await el.updateComplete;
dropzone?.dispatchEvent(new Event('dragleave', { bubbles: true })); dropzone?.dispatchEvent(new Event('dragleave', { bubbles: true }));
await el.updateComplete;
expect(el.hasAttribute('is-dragging')).to.equal(false); expect(el.hasAttribute('is-dragging')).to.equal(false);
}); });
@ -951,6 +954,7 @@ describe('lion-input-file', () => {
await el.updateComplete; await el.updateComplete;
window.dispatchEvent(new Event('drop', { bubbles: true })); window.dispatchEvent(new Event('drop', { bubbles: true }));
await el.updateComplete;
expect(el.hasAttribute('is-dragging')).to.equal(false); expect(el.hasAttribute('is-dragging')).to.equal(false);
}); });