feat(chat): expose drag&drop events, cancelable attachment change event

Author: teodosiah

src/components/chat/chat-input.ts

@@ -1,6 +1,6 @@
 import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
-import { query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
 import { chatContext } from '../common/context.js';
@@ -55,12 +55,12 @@ export default class IgcChatInputComponent extends LitElement {
   @state()
   private inputValue = '';
 
-  @state()
-  private attachments: IgcMessageAttachment[] = [];
-
   @state()
   private dragClass = '';
 
+  @property({ attribute: false })
+  public attachments: IgcMessageAttachment[] = [];
+
   // Cache for accepted file types
   private _acceptedTypesCache: {
     extensions: Set<string>;
@@ -142,6 +142,9 @@ export default class IgcChatInputComponent extends LitElement {
     );
 
     this.dragClass = hasValidFiles ? 'dragging' : '';
+
+    const dragEvent = new CustomEvent('drag-attachment');
+    this.dispatchEvent(dragEvent);
   }
 
   private handleDragOver(e: DragEvent) {
@@ -178,6 +181,9 @@ export default class IgcChatInputComponent extends LitElement {
 
     const validFiles = files.filter((file) => this.isFileTypeAccepted(file));
 
+    const dropEvent = new CustomEvent('drop-attachment');
+    this.dispatchEvent(dropEvent);
+
     this.attachFiles(validFiles);
   }
 
@@ -199,7 +205,6 @@ export default class IgcChatInputComponent extends LitElement {
 
     this.dispatchEvent(messageEvent);
     this.inputValue = '';
-    this.attachments = [];
 
     if (this.textInputElement) {
       this.textInputElement.style.height = 'auto';
@@ -232,11 +237,10 @@ export default class IgcChatInputComponent extends LitElement {
         thumbnail: isImage ? URL.createObjectURL(file) : undefined,
       });
     });
-    this.attachments = [...this.attachments, ...newAttachments];
+
     const attachmentEvent = new CustomEvent('attachment-change', {
-      detail: this.attachments,
+      detail: [...this.attachments, ...newAttachments],
     });
-
     this.dispatchEvent(attachmentEvent);
   }
 
@@ -288,10 +292,8 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   private removeAttachment(index: number) {
-    this.attachments = this.attachments.filter((_, i) => i !== index);
-
     const attachmentEvent = new CustomEvent('attachment-change', {
-      detail: this.attachments,
+      detail: this.attachments.filter((_, i) => i !== index),
     });
 
     this.dispatchEvent(attachmentEvent);

src/components/chat/chat.spec.ts

@@ -995,7 +995,7 @@ describe('Chat', () => {
           detail: { isTyping: true },
         });
 
-        aTimeout(1000).then(() => {
+        aTimeout(3000).then(() => {
           expect(eventSpy).calledWith('igcTypingChange', {
             detail: { isTyping: false },
           });
@@ -1039,5 +1039,47 @@ describe('Chat', () => {
         });
       }
     });
+
+    it('can cancel `igcMessageCreated` event', async () => {
+      const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
+      const sendButton = inputArea?.shadowRoot?.querySelector(
+        'igc-icon-button[name="send-message"]'
+      );
+      const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
+
+      chat.addEventListener('igcMessageCreated', (event) => {
+        event.preventDefault();
+      });
+
+      if (sendButton && textArea) {
+        textArea.setAttribute('value', 'Hello!');
+        textArea.dispatchEvent(new Event('input'));
+        await elementUpdated(chat);
+        simulateClick(sendButton);
+        await elementUpdated(chat);
+        await clock.tickAsync(500);
+
+        expect(chat.messages.length).to.equal(0);
+      }
+    });
+
+    it('can cancel `igcAttachmentChange` event', async () => {
+      const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
+      const fileInput = inputArea?.shadowRoot
+        ?.querySelector('igc-file-input')
+        ?.shadowRoot?.querySelector('input') as HTMLInputElement;
+
+      chat.addEventListener('igcAttachmentChange', (event) => {
+        event.preventDefault();
+      });
+
+      simulateFileUpload(fileInput, files);
+      await elementUpdated(chat);
+      aTimeout(500);
+
+      expect(
+        inputArea?.shadowRoot?.querySelectorAll('igc-chip').length
+      ).to.equal(0);
+    });
   });
 });

src/components/chat/chat.ts

@@ -1,6 +1,6 @@
 import { ContextProvider } from '@lit/context';
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import IgcButtonComponent from '../button/button.js';
 import { chatContext } from '../common/context.js';
 import { watch } from '../common/decorators/watch.js';
@@ -20,9 +20,11 @@ export interface IgcChatComponentEventMap {
   igcMessageCreated: CustomEvent<IgcMessage>;
   igcAttachmentClick: CustomEvent<IgcMessageAttachment>;
   igcAttachmentChange: CustomEvent<IgcMessageAttachment>;
+  igcAttachmentDrag: CustomEvent<any>;
+  igcAttachmentDrop: CustomEvent<any>;
   igcTypingChange: CustomEvent<boolean>;
-  igcInputFocus: CustomEvent<void>;
-  igcInputBlur: CustomEvent<void>;
+  igcInputFocus: CustomEvent<any>;
+  igcInputBlur: CustomEvent<any>;
   igcInputChange: CustomEvent<string>;
   igcMessageCopied: CustomEvent<IgcMessage>;
 }
@@ -55,6 +57,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
     context: chatContext,
     initialValue: this,
   });
+
+  @state()
+  private inputAttachments: IgcMessageAttachment[] = [];
+
   @property({ type: String, reflect: true, attribute: 'current-user-id' })
   public currentUserId = 'user';
 
@@ -101,6 +107,16 @@ export default class IgcChatComponent extends EventEmitterMixin<
     this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });
   }
 
+  private handleAttachmentChange(e: CustomEvent) {
+    const allowed = this.emitEvent('igcAttachmentChange', {
+      detail: e.detail,
+      cancelable: true,
+    });
+    if (allowed) {
+      this.inputAttachments = [...e.detail];
+    }
+  }
+
   private addMessage(message: {
     id?: string;
     text: string;
@@ -122,6 +138,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
 
     if (allowed) {
       this.messages = [...this.messages, newMessage];
+      this.inputAttachments = [];
     }
   }
 
@@ -158,16 +175,17 @@ export default class IgcChatComponent extends EventEmitterMixin<
           </slot>
         </div>
         <igc-chat-input
+          .attachments=${this.inputAttachments}
           @message-created=${this.handleSendMessage}
           @typing-change=${(e: CustomEvent) => {
             this.emitEvent('igcTypingChange', { detail: e.detail });
           }}
           @input-change=${(e: CustomEvent) => {
             this.emitEvent('igcInputChange', { detail: e.detail });
           }}
-          @attachment-change=${(e: CustomEvent) => {
-            this.emitEvent('igcAttachmentChange', { detail: e.detail });
-          }}
+          @attachment-change=${this.handleAttachmentChange}
+          @drop-attachment=${() => this.emitEvent('igcAttachmentDrop')}
+          @drag-attachment=${() => this.emitEvent('igcAttachmentDrag')}
           @focus-input=${() => {
             this.emitEvent('igcInputFocus');
           }}