From 408aad80fa2f807e116a6fec650500c2d8094ff1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20Mar=C3=ADn?= Date: Fri, 15 Mar 2024 20:47:05 +0100 Subject: [PATCH] refactor: replace @Output decorator with output() function --- .../ng-talk-channel-list.component.ts | 15 +++++++-------- .../channel/ng-talk-channel.component.ts | 8 ++++---- .../send/emoji/ng-talk-send-emoji.component.ts | 4 ++-- .../send/gif/ng-talk-send-gif.component.ts | 4 ++-- .../send/ng-talk-send-message.component.ts | 7 ++++--- .../src/lib/directives/in-viewport.directive.ts | 4 ++-- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/projects/ng-talk/src/lib/components/channel-list/ng-talk-channel-list.component.ts b/projects/ng-talk/src/lib/components/channel-list/ng-talk-channel-list.component.ts index f1f4495..445efdf 100644 --- a/projects/ng-talk/src/lib/components/channel-list/ng-talk-channel-list.component.ts +++ b/projects/ng-talk/src/lib/components/channel-list/ng-talk-channel-list.component.ts @@ -3,7 +3,6 @@ import { Component, DestroyRef, ElementRef, - EventEmitter, forwardRef, HostBinding, HostListener, @@ -11,7 +10,7 @@ import { OnChanges, OnDestroy, OnInit, - Output, + output, signal, SimpleChanges } from '@angular/core'; @@ -25,10 +24,10 @@ import {ChatMessage} from '../../models/chat-message'; import {ChatUser} from '../../models/chat-user'; import {FnPipe} from "../../pipes/fn.pipe"; import {nameof} from '../../utils/utils'; +import {NgTalkChannelComponent} from "../channel/ng-talk-channel.component"; +import {NgTalkChannelPreviewComponent} from "../channel/preview/ng-talk-channel-preview.component"; import {MessageLoadingMethod, NgTalkSettings} from '../ng-talk-settings'; import {NG_TALK_CHANNEL_LIST_TOKEN} from "./ng-talk-channel-list-token"; -import {NgTalkChannelPreviewComponent} from "../channel/preview/ng-talk-channel-preview.component"; -import {NgTalkChannelComponent} from "../channel/ng-talk-channel.component"; @Component({ selector: 'ng-talk-channel-list', @@ -46,12 +45,12 @@ export class NgTalkChannelListComponent implements OnInit, OnChanges, OnDestroy @Input() public user: ChatUser; @Input() public adapter: ChatAdapter; @Input() public settings = new NgTalkSettings(); - @Output() public search = new EventEmitter(); - @Output() public channelChanged = new EventEmitter(); + public search = output(); + public channelChanged = output(); // Forwarded events from single channel - @Output() public messageSent = new EventEmitter(); - @Output() public userClicked = new EventEmitter(); + public messageSent = output(); + public userClicked = output(); @HostBinding('class') public displayMode: 'desktop' | 'mobile'; diff --git a/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts b/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts index d96270b..68a27ab 100644 --- a/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts +++ b/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts @@ -1,6 +1,6 @@ import {CdkDrag, CdkDragEnd, CdkDragMove} from '@angular/cdk/drag-drop'; import {NgComponentOutlet} from "@angular/common"; -import {AfterViewInit, Component, DestroyRef, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, signal, SimpleChanges, ViewChild, viewChildren} from '@angular/core'; +import {AfterViewInit, Component, DestroyRef, ElementRef, Input, OnChanges, OnInit, output, signal, SimpleChanges, ViewChild, viewChildren} from '@angular/core'; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {Subscription} from 'rxjs'; import {InViewportDirective} from '../../directives/in-viewport.directive'; @@ -35,9 +35,9 @@ export class NgTalkChannelComponent implements OnInit, OnChanges, AfterViewInit @Input() public settings: NgTalkSettings; @Input() public disableRendering = false; - @Output() public messageSent = new EventEmitter(); - @Output() public userClicked = new EventEmitter(); - @Output() public deleted = new EventEmitter(); + public messageSent = output(); + public userClicked = output(); + public deleted = output(); @ViewChild('chatBox') private _chatBox: ElementRef; @ViewChild(NgTalkSendMessageComponent) private _sendMessageComponent: NgTalkSendMessageComponent; diff --git a/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts b/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts index 5ccfa6d..f5bc910 100644 --- a/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts +++ b/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts @@ -1,5 +1,5 @@ import {KeyValue, KeyValuePipe} from '@angular/common'; -import {Component, EventEmitter, Output} from '@angular/core'; +import {Component, output} from '@angular/core'; import {FormsModule} from "@angular/forms"; import {FnPipe} from "../../../../pipes/fn.pipe"; import {NgTalkChannelComponent} from '../../ng-talk-channel.component'; @@ -52,7 +52,7 @@ import emoji from './emoji.json'; ` }) export class NgTalkSendEmojiComponent { - @Output() public emojiSelected = new EventEmitter(); + public emojiSelected = output(); protected readonly emoji = emoji; protected searchQuery: string; diff --git a/projects/ng-talk/src/lib/components/channel/send/gif/ng-talk-send-gif.component.ts b/projects/ng-talk/src/lib/components/channel/send/gif/ng-talk-send-gif.component.ts index 2acca29..6137642 100644 --- a/projects/ng-talk/src/lib/components/channel/send/gif/ng-talk-send-gif.component.ts +++ b/projects/ng-talk/src/lib/components/channel/send/gif/ng-talk-send-gif.component.ts @@ -1,6 +1,6 @@ import {AsyncPipe} from "@angular/common"; import {HttpClient} from '@angular/common/http'; -import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {Component, OnInit, output} from '@angular/core'; import {FormsModule} from "@angular/forms"; import {debounceTime, map, Observable, Subject} from 'rxjs'; import {FnPipe} from "../../../../pipes/fn.pipe"; @@ -57,7 +57,7 @@ import {NgTalkChannelComponent} from '../../ng-talk-channel.component'; ` }) export class NgTalkSendGifComponent implements OnInit { - @Output() public gifSelected = new EventEmitter(); + public gifSelected = output(); protected searchQuery: string; protected gifs$: Observable; diff --git a/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts b/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts index 292ab4c..bd4949c 100644 --- a/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts +++ b/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts @@ -1,5 +1,4 @@ -import {Component, ElementRef, Inject, Optional, ViewChild} from '@angular/core'; -import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; +import {Component, DestroyRef, ElementRef, Inject, Optional, ViewChild} from '@angular/core'; import {FormsModule} from "@angular/forms"; import {ChatChannel} from '../../../models/chat-channel'; import {ChatMessage, ChatMessageType} from '../../../models/chat-message'; @@ -144,9 +143,11 @@ export class NgTalkSendMessageComponent { protected showGifSelector = false; constructor(protected chat: NgTalkChannelComponent, + destroyRef: DestroyRef, @Optional() @Inject(NG_TALK_CHANNEL_LIST_TOKEN) channelList: NgTalkChannelListComponent) { if (channelList) { // Detectar cambio de canal si estamos en un listado - channelList.channelChanged.pipe(takeUntilDestroyed()).subscribe((c) => this._onChannelChanged(c)); + const subscription = channelList.channelChanged.subscribe((c) => this._onChannelChanged(c)); + destroyRef.onDestroy(() => subscription.unsubscribe()); } chat.focus = () => this.focus(); diff --git a/projects/ng-talk/src/lib/directives/in-viewport.directive.ts b/projects/ng-talk/src/lib/directives/in-viewport.directive.ts index 13fb91e..d7ee406 100644 --- a/projects/ng-talk/src/lib/directives/in-viewport.directive.ts +++ b/projects/ng-talk/src/lib/directives/in-viewport.directive.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core'; +import {Directive, ElementRef, Input, OnDestroy, OnInit, output} from '@angular/core'; /** * From https://github.com/thisissoon/angular-inviewport @@ -25,7 +25,7 @@ import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} f }) export class InViewportDirective implements OnDestroy, OnInit { @Input() public inViewportOptions: IntersectionObserverInit & { delay?: number }; - @Output() public inViewportChange = new EventEmitter(); + public inViewportChange = output(); private _inViewport: boolean; protected observer: IntersectionObserver;