refactor(chat-input): Drag handlers bindings

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -10,6 +10,7 @@ import { chatContext } from '../common/context.js';
 import { addKeybindings } from '../common/controllers/key-bindings.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { partMap } from '../common/part-map.js';
 import { isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import { registerIconFromText } from '../icon/icon.registry.js';
@@ -95,7 +96,7 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   @state()
-  private containerPart = 'input-container';
+  private _parts = { 'input-container': true, dragging: false };
 
   private _defaults: Partial<ChatRenderers>;
   private _cachedRenderers?: {
@@ -140,7 +141,6 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   protected override firstUpdated() {
-    this.setupDragAndDrop();
     this._chatState.updateAcceptedTypesCache();
     this._chatState.textArea = this._textInputElement;
 
@@ -159,63 +159,51 @@ export default class IgcChatInputComponent extends LitElement {
     };
   }
 
-  private setupDragAndDrop() {
-    const container = this.shadowRoot?.querySelector(
-      `div[part='input-container']`
-    ) as HTMLElement;
-    if (container) {
-      container.addEventListener('dragenter', this.handleDragEnter.bind(this));
-      container.addEventListener('dragover', this.handleDragOver.bind(this));
-      container.addEventListener('dragleave', this.handleDragLeave.bind(this));
-      container.addEventListener('drop', this.handleDrop.bind(this));
-    }
-  }
-
   private _handleFocusState(event: FocusEvent): void {
     this._chatState.emitEvent(
       event.type === 'focus' ? 'igcInputFocus' : 'igcInputBlur'
     );
   }
 
-  private handleDragEnter(event: DragEvent) {
+  private _handleDragEnter(event: DragEvent): void {
     event.preventDefault();
     event.stopPropagation();
 
     const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);
-    this.containerPart = `input-container ${!isEmpty(validFiles) ? ' dragging' : ''}`;
+    this._parts = { 'input-container': true, dragging: !isEmpty(validFiles) };
     this._chatState.emitEvent('igcAttachmentDrag');
   }
 
-  private handleDragOver(e: DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
+  private _handleDragOver(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
   }
 
-  private handleDragLeave(e: DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
+  private _handleDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
 
     // Check if we're actually leaving the container
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const x = e.clientX;
-    const y = e.clientY;
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = event.clientX;
+    const y = event.clientY;
 
     if (
       x <= rect.left ||
       x >= rect.right ||
       y <= rect.top ||
       y >= rect.bottom
     ) {
-      this.containerPart = 'input-container';
+      this._parts = { 'input-container': true, dragging: false };
     }
   }
 
-  private handleDrop(e: DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.containerPart = 'input-container';
+  private _handleDrop(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this._parts = { 'input-container': true, dragging: false };
 
-    const validFiles = getChatAcceptedFiles(e, this._acceptedTypes);
+    const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);
     this._chatState.emitEvent('igcAttachmentDrop');
     this._chatState.attachFiles(validFiles);
     this.requestUpdate();
@@ -354,7 +342,13 @@ export default class IgcChatInputComponent extends LitElement {
     if (!this._renderers) return nothing;
 
     return html`
-      <div part="${this.containerPart}">
+      <div
+        part=${partMap(this._parts)}
+        @dragenter=${this._handleDragEnter}
+        @dragover=${this._handleDragOver}
+        @dragleave=${this._handleDragLeave}
+        @drop=${this._handleDrop}
+      >
         ${this._chatState.inputAttachments &&
         this._chatState.inputAttachments.length > 0
           ? html` <div part="attachments" role="list" aria-label="Attachments">

src/components/chat/chat.spec.ts

@@ -23,11 +23,12 @@ import {
   simulateKeyboard,
 } from '../common/utils.spec.js';
 import { simulateFileUpload } from '../file-input/file-input.spec.js';
+import IgcInputComponent from '../input/input.js';
 import IgcChatComponent from './chat.js';
 
 describe('Chat', () => {
   before(() => {
-    defineComponents(IgcChatComponent);
+    defineComponents(IgcChatComponent, IgcInputComponent);
   });
 
   const DIFF_OPTIONS = {
@@ -1102,7 +1103,7 @@ describe('Chat', () => {
               </div>
             </div>
             <div part="input-wrapper">
-                <igc-input placeholder="Type text here...">
+                <igc-input type="text" placeholder="Type text here...">
             </div>
             <div part="buttons-container">
               <div>