Merge pull request #533 from uploadcare/fix/drag-n-drop-cursor

fix(drag-n-drop): do not show drop cursor when it's not over the drop target
uploadcare · Oct 6, 2023 · 8a4c007 · 8a4c007
2 parents da89f95 + 5f4fae2
commit 8a4c007
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/blocks/Config/normalizeConfigValue.js b/blocks/Config/normalizeConfigValue.js
@@ -5,7 +5,7 @@ const asString = (value) => String(value);
 /** @param {unknown} value */
 const asNumber = (value) => Number(value);
 /** @param {unknown} value */
-const asBoolean = (value) => {
+export const asBoolean = (value) => {
   if (typeof value === 'boolean') return value;
   // for attr like multiple="true" (react will pass it as string)
   if (value === 'true') return true;

diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js
@@ -4,6 +4,7 @@ import { DropzoneState, addDropzone } from './addDropzone.js';
 import { Modal } from '../Modal/Modal.js';
 import { stringToArray } from '../../utils/stringToArray.js';
 import { UploadSource } from '../utils/UploadSource.js';
+import { asBoolean } from '../Config/normalizeConfigValue.js';
 
 export class DropArea extends UploaderBlock {
   init$ = {
@@ -44,16 +45,16 @@ export class DropArea extends UploaderBlock {
     this.$['lr-drop-area/targets'].add(this);
 
     this.defineAccessor('disabled', (value) => {
-      this.set$({ isEnabled: !value });
+      this.set$({ isEnabled: !asBoolean(value) });
     });
     this.defineAccessor('clickable', (value) => {
-      this.set$({ isClickable: typeof value === 'string' });
+      this.set$({ isClickable: asBoolean(value) });
     });
     this.defineAccessor('with-icon', (value) => {
-      this.set$({ withIcon: typeof value === 'string' });
+      this.set$({ withIcon: asBoolean(value) });
     });
     this.defineAccessor('fullscreen', (value) => {
-      this.set$({ isFullscreen: typeof value === 'string' });
+      this.set$({ isFullscreen: asBoolean(value) });
     });
 
     this.defineAccessor('text', (value) => {

diff --git a/blocks/DropArea/addDropzone.js b/blocks/DropArea/addDropzone.js
@@ -76,10 +76,13 @@ export function addDropzone(desc) {
   };
 
   let onDragOver = (e) => {
+    if (desc.shouldIgnore()) {
+      return;
+    }
+
     if (!isDragging()) {
       eventCounter += 1;
     }
-    e.preventDefault();
 
     /** @type {[Number, Number]} */
     let dragPoint = [e.x, e.y];
@@ -92,6 +95,7 @@ export function addDropzone(desc) {
     let isNearest = Math.min(...nearnessRegistry.values()) === nearness;
 
     if (isOver && isNearest) {
+      e.preventDefault();
       setState(DropzoneState.OVER);
     } else if (isNear && isNearest) {
       setState(DropzoneState.NEAR);

diff --git a/blocks/SimpleBtn/SimpleBtn.js b/blocks/SimpleBtn/SimpleBtn.js
@@ -1,5 +1,6 @@
 // @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { asBoolean } from '../Config/normalizeConfigValue.js';
 
 export class SimpleBtn extends UploaderBlock {
   constructor() {
@@ -8,6 +9,7 @@ export class SimpleBtn extends UploaderBlock {
     this.init$ = {
       ...this.init$,
       '*simpleButtonText': '',
+      withDropZone: true,
       onClick: () => {
         this.initFlow();
       },
@@ -16,14 +18,25 @@ export class SimpleBtn extends UploaderBlock {
 
   initCallback() {
     super.initCallback();
+
+    this.defineAccessor(
+      'dropzone',
+      /** @param {unknown} val */
+      (val) => {
+        if (typeof val === 'undefined') {
+          return;
+        }
+        this.$.withDropZone = asBoolean(val);
+      }
+    );
     this.subConfigValue('multiple', (val) => {
       this.$['*simpleButtonText'] = val ? this.l10n('upload-files') : this.l10n('upload-file');
     });
   }
 }
 
 SimpleBtn.template = /* HTML */ `
-  <lr-drop-area>
+  <lr-drop-area set="@disabled: !withDropZone">
     <button type="button" set="onclick: onClick">
       <lr-icon name="upload"></lr-icon>
       <span>{{*simpleButtonText}}</span>
@@ -32,3 +45,8 @@ SimpleBtn.template = /* HTML */ `
     </button>
   </lr-drop-area>
 `;
+
+SimpleBtn.bindAttributes({
+  // @ts-expect-error TODO: we need to update symbiote types
+  dropzone: null,
+});