Merge pull request #539 from GetStream/custom-message-action-click

feat: Allow custom event handler for message actions button

Author: szuperaz

docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx

@@ -30,7 +30,9 @@ export class CustomMessageComponent {
 
 ## Customization
 
-You can provide your own message actions box component (or just a template for the items) by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
+- You can provide your own message actions box component (or just a template for the items) by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx).
+- You can extend the built-in actions with custom actions, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactions)
+- You can also provide a custom event handler method to be called when the message actions button is clicked, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactionclickhandler)
 
 [//]: # "Start of generated content"
 [//]: # "End of generated content"

package-lock.json

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "4.5.0",
+    "@stream-io/stream-chat-css": "4.6.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -70,7 +70,7 @@ export class MessageActionsBoxComponent
   /**
    * An event which emits `true` if the edit message modal is open, and `false` when it is closed.
    *
-   * @deprecated components should use `messageReactionsService.getAuthorizedMessageActionsCount` method
+   * @deprecated components should use `messageReactionsService.messageToEdit$` Observable
    *
    * More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
    */

projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts

@@ -4,6 +4,7 @@ import {
   CustomMessageActionItem,
   DefaultStreamChatGenerics,
   MessageActionItem,
+  MessageActionsClickDetails,
   StreamMessage,
 } from './types';
 import { ChatClientService } from './chat-client.service';
@@ -99,6 +100,10 @@ export class MessageActionsService<
    * You can pass your own custom actions that will be displayed inside the built-in message actions component
    */
   customActions$ = new BehaviorSubject<CustomMessageActionItem[]>([]);
+  /**
+   * By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler.
+   */
+  customActionClickHandler?: (details: MessageActionsClickDetails<T>) => void;
 
   constructor(
     private chatClientService: ChatClientService,

projects/stream-chat-angular/src/lib/message-actions.service.ts

@@ -35,6 +35,7 @@
         <div
           class="str-chat__message-simple__actions str-chat__message-options"
           data-testid="message-options"
+          [class.str-chat__message-actions-open]="isActionBoxOpen"
           [class.str-chat__message-edit-in-progress]="isEditing"
           *ngIf="areOptionsVisible"
         >
@@ -56,6 +57,7 @@
             [popperHideOnClickOutside]="true"
             [popperHideOnMouseLeave]="false"
             [popperDisableAnimation]="true"
+            (popperOnHidden)="isActionBoxOpen = false"
           >
             <popper-content #popperContent>
               <ng-template
@@ -87,8 +89,8 @@
             <div
               class="str-chat__message-actions-box-button"
               data-testid="action-icon"
-              (click)="isActionBoxOpen = !isActionBoxOpen"
-              (keyup.enter)="isActionBoxOpen = !isActionBoxOpen"
+              (click)="messageActionsClicked()"
+              (keyup.enter)="messageActionsClicked()"
               *ngIf="visibleMessageActionsCount > 0"
             >
               <stream-icon-placeholder

projects/stream-chat-angular/src/lib/message/message.component.html

@@ -549,16 +549,22 @@ describe('MessageComponent', () => {
     expect(queryMessageActionsBoxComponent()?.isOpen).toBeTrue();
   });
 
-  it('should close message actions box on mouseleave event', () => {
+  it('should call custom message actions click handler', () => {
+    const service = TestBed.inject(MessageActionsService);
+    const spy = jasmine.createSpy();
+    service.customActionClickHandler = spy;
     component.enabledMessageActions = ['update-own-message', 'flag-message'];
-    component.isActionBoxOpen = true;
     component.ngOnChanges({ enabledMessageActions: {} as SimpleChange });
     fixture.detectChanges();
 
-    queryContainer()?.dispatchEvent(new Event('mouseleave'));
-    fixture.detectChanges();
+    queryActionIcon()?.click();
 
-    expect(component.isActionBoxOpen).toBeFalse();
+    expect(spy).toHaveBeenCalledWith({
+      message: component.message,
+      enabledActions: component.enabledMessageActions,
+      isMine: component.isSentByCurrentUser,
+      customActions: component.customActions,
+    });
   });
 
   it('should provide #enabledActions to message actions box', () => {

projects/stream-chat-angular/src/lib/message/message.component.spec.ts

@@ -161,6 +161,9 @@ export class MessageComponent
         }
         if (isEditing !== this.isEditing) {
           this.isEditing = isEditing;
+          if (!this.isEditing) {
+            this.isActionBoxOpen = false;
+          }
           if (this.isViewInited) {
             this.cdRef.detectChanges();
           }
@@ -257,17 +260,28 @@ export class MessageComponent
 
   ngAfterViewInit(): void {
     this.isViewInited = true;
-    this.ngZone.runOutsideAngular(() => {
-      this.container?.nativeElement.addEventListener('mouseleave', () =>
-        this.mouseLeft()
-      );
-    });
   }
 
   ngOnDestroy(): void {
     this.subscriptions.forEach((s) => s.unsubscribe());
   }
 
+  messageActionsClicked() {
+    if (!this.message) {
+      return;
+    }
+    if (this.messageActionsService.customActionClickHandler) {
+      this.messageActionsService.customActionClickHandler({
+        message: this.message,
+        enabledActions: this.enabledMessageActions,
+        customActions: this.customActions,
+        isMine: this.isSentByCurrentUser,
+      });
+    } else {
+      this.isActionBoxOpen = !this.isActionBoxOpen;
+    }
+  }
+
   getAttachmentListContext(): AttachmentListContext {
     return {
       messageId: this.message?.id || '',
@@ -386,14 +400,6 @@ export class MessageComponent
     this.createMessageParts(false);
   }
 
-  mouseLeft() {
-    if (this.isActionBoxOpen) {
-      this.ngZone.run(() => {
-        this.isActionBoxOpen = false;
-      });
-    }
-  }
-
   private createMessageParts(shouldTranslate = true) {
     this.messageTextParts = undefined;
     this.messageText = undefined;

projects/stream-chat-angular/src/lib/message/message.component.ts

@@ -410,3 +410,12 @@ export type MessageReactionClickDetails = {
   messageId: string;
   reactionType: string;
 };
+
+export type MessageActionsClickDetails<
+  T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = {
+  message: StreamMessage<T>;
+  enabledActions: string[];
+  isMine: boolean;
+  customActions: CustomMessageActionItem[];
+};