Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat : input & output signal migration #25

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat : input & output signal migration #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e78dc48
feat : input & output signal migration
mohan-mu Oct 23, 2024
b6deac0
Refactor defaultConfig input in HotToastContainerComponent
mohan-mu Oct 23, 2024
5e7184b
Refactor toast component to use updated toast object
mohan-mu Oct 24, 2024
05a653e
Refactor toast component to use updated toast object and defaultConfi…
mohan-mu Oct 24, 2024
fd04870
Refactor toast component to use updated toast object and defaultConfi…
mohan-mu Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="hot-toast-animated-icon" [style.color]="iconTheme?.primary">
<div class="hot-toast-animated-icon" [style.color]="iconTheme()?.primary">
<ng-content></ng-content>
</div>
4 changes: 2 additions & 2 deletions projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { IconTheme } from '../../hot-toast.model';

@Component({
Expand All @@ -8,5 +8,5 @@ import { IconTheme } from '../../hot-toast.model';
standalone: true,
})
export class AnimatedIconComponent {
@Input() iconTheme: IconTheme;
iconTheme = input<IconTheme>();
}
29 changes: 15 additions & 14 deletions ...ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, QueryList, ViewChildren } from '@angular/core';
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, Input } from '@angular/core';
import { Subject } from 'rxjs';
import {
HotToastClose,
Expand Down Expand Up @@ -66,18 +66,19 @@ export class HotToastContainerComponent {
const visibleToasts = this.getVisibleToasts(position);
const index = visibleToasts.findIndex((toast) => toast.id === toastId);
const offset =
index !== -1
? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
const toastsAfter = visibleToasts.length - 1 - i;
return this.defaultConfig.visibleToasts !== 0 && i < visibleToasts.length - this.defaultConfig.visibleToasts
? 0
: acc +
(this.defaultConfig.stacking === 'vertical' || this.isShowingAllToasts
? t.height || 0
: toastsAfter * HOT_TOAST_DEPTH_SCALE + HOT_TOAST_DEPTH_SCALE_ADD) +
HOT_TOAST_MARGIN;
}, 0)
: 0;
index !== -1
? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
const toastsAfter = visibleToasts.length - 1 - i;
return this.defaultConfig.visibleToasts !== 0 &&
i < visibleToasts.length - this.defaultConfig.visibleToasts
? 0
: acc +
(this.defaultConfig.stacking === 'vertical' || this.isShowingAllToasts
? t.height || 0
: toastsAfter * HOT_TOAST_DEPTH_SCALE + HOT_TOAST_DEPTH_SCALE_ADD) +
HOT_TOAST_MARGIN;
}, 0)
: 0;
return offset;
}

Expand Down Expand Up @@ -189,7 +190,7 @@ export class HotToastContainerComponent {

closeToast(id?: string) {
if (id) {
const comp = this.hotToastComponentList.find((item) => item.toast.id === id);
const comp = this.hotToastComponentList.find((item) => item.toast().id === id);
if (comp) {
comp.close();
this.cdr.markForCheck();
Expand Down
24 changes: 12 additions & 12 deletions ...ert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div
class="hot-toast-bar-base-container"
[ngStyle]="containerPositionStyle"
[ngClass]="'hot-toast-theme-' + toast.theme"
[ngClass]="'hot-toast-theme-' + toast().theme"
[style.--hot-toast-scale]="scale"
[style.--hot-toast-translate-y]="translateY"
>
Expand All @@ -10,34 +10,34 @@
class="hot-toast-bar-base"
#hotToastBarBase
[ngStyle]="toastBarBaseStylesSignal()"
[ngClass]="toast.className"
[ngClass]="toast().className"
[style.--hot-toast-animation-state]="isManualClose ? 'running' : 'paused'"
[style.--hot-toast-exit-animation-state]="isShowingAllToasts ? 'paused' : 'running'"
[style.--hot-toast-exit-animation-state]="isShowingAllToasts() ? 'paused' : 'running'"
[style.--hot-toast-exit-animation-delay]="exitAnimationDelay"
[attr.aria-live]="toast.ariaLive"
[attr.role]="toast.role"
[attr.aria-live]="toast().ariaLive"
[attr.role]="toast().role"
>
<div class="hot-toast-icon" aria-hidden="true">
@if (toast.icon !== undefined) { @if (isIconString) {
<hot-toast-animated-icon [iconTheme]="toast.iconTheme">{{ toast.icon }}</hot-toast-animated-icon>
@if (toast().icon !== undefined) { @if (isIconString) {
<hot-toast-animated-icon [iconTheme]="toast().iconTheme">{{ toast().icon }}</hot-toast-animated-icon>
} @else {
<div>
<ng-container *dynamicView="toast.icon"></ng-container>
<ng-container *dynamicView="toast().icon"></ng-container>
</div>
} } @else {
<hot-toast-indicator [theme]="toast.iconTheme" [type]="toast.type"></hot-toast-indicator>
<hot-toast-indicator [theme]="toast().iconTheme" [type]="toast().type"></hot-toast-indicator>
}
</div>
<div class="hot-toast-message">
<ng-container *dynamicView="toast.message; context: context; injector: toastComponentInjector"></ng-container>
<ng-container *dynamicView="toast().message; context: context; injector: toastComponentInjector"></ng-container>
</div>
@if (toast.dismissible) {
@if (toast().dismissible) {
<button
(click)="close()"
type="button"
class="hot-toast-close-btn"
aria-label="Close"
[ngStyle]="toast.closeStyle"
[ngStyle]="toast().closeStyle"
></button>
}
</div>
Expand Down
132 changes: 57 additions & 75 deletions ...xpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@ import {
ChangeDetectionStrategy,
Component,
ElementRef,
EventEmitter,
Injector,
Input,
NgZone,
Output,
Renderer2,
SimpleChanges,
ViewChild,
Expand All @@ -16,6 +13,9 @@ import {
OnDestroy,
signal,
ChangeDetectorRef,
input,
output,
effect,
} from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { AnimatedIconComponent } from '../animated-icon/animated-icon.component';
Expand All @@ -34,40 +34,17 @@ import { animate } from '../../utils';
imports: [NgClass, NgStyle, AnimatedIconComponent, IndicatorComponent, DynamicViewDirective],
})
export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
private _toast: Toast<unknown>;
@Input()
set toast(value: Toast<unknown>) {
this._toast = value;
const top = value.position.includes('top');
const enterAnimation = `hotToastEnterAnimation${
top ? 'Negative' : 'Positive'
} ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;

this.toastBarBaseStylesSignal.set({ ...value.style, animation: enterAnimation });
}
get toast() {
return this._toast;
}
@Input() offset = 0;
@Input() defaultConfig: ToastConfig;
@Input() toastRef: CreateHotToastRef<unknown>;

private _toastsAfter = 0;
get toastsAfter() {
return this._toastsAfter;
}
@Input()
set toastsAfter(value) {
this._toastsAfter = value;
}

@Input() isShowingAllToasts = false;

@Output() height = new EventEmitter<number>();
@Output() beforeClosed = new EventEmitter();
@Output() afterClosed = new EventEmitter<HotToastClose>();
@Output() showAllToasts = new EventEmitter<boolean>();
@Output() toggleGroup = new EventEmitter<HotToastGroupEvent>();
toast = input<Toast<unknown>>();
toastsAfter = input(0);
offset = input(0);
defaultConfig = input<ToastConfig>();
toastRef = input<CreateHotToastRef<unknown>>();
isShowingAllToasts = input(false);
height = output<number>();
beforeClosed = output();
afterClosed = output<HotToastClose>();
showAllToasts = output<boolean>();
toggleGroup = output<HotToastGroupEvent>();

@ViewChild('hotToastBarBase', { static: true }) protected toastBarBase: ElementRef<HTMLElement>;

Expand All @@ -84,43 +61,52 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
protected renderer: Renderer2,
protected ngZone: NgZone,
private cdr: ChangeDetectorRef
) {}
) {

effect(() => {
const {position,style} = this.toast();
const top = position.includes('top');
const enterAnimation = `hotToastEnterAnimation${top ? 'Negative' : 'Positive'
} ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
this.toastBarBaseStylesSignal.set({ ...style, animation: enterAnimation });
});
}

get toastBarBaseHeight() {
return this.toastBarBase.nativeElement.offsetHeight;
}

get scale() {
return this.defaultConfig.stacking !== 'vertical' && !this.isShowingAllToasts
? this.toastsAfter * -HOT_TOAST_DEPTH_SCALE + 1
return this.defaultConfig().stacking !== 'vertical' && !this.isShowingAllToasts()
? this.toastsAfter() * -HOT_TOAST_DEPTH_SCALE + 1
: 1;
}

get translateY() {
return this.offset * (this.top ? 1 : -1) + 'px';
return this.offset() * (this.top ? 1 : -1) + 'px';
}

get exitAnimationDelay() {
return this.toast.duration + 'ms';
return this.toast().duration + 'ms';
}

get top() {
return this.toast.position.includes('top');
return this.toast().position.includes('top');
}

get containerPositionStyle() {
const verticalStyle = this.top ? { top: 0 } : { bottom: 0 };
const transform = `translateY(var(--hot-toast-translate-y)) scale(var(--hot-toast-scale))`;

const horizontalStyle = this.toast.position.includes('left')
? {
left: 0,
}
: this.toast.position.includes('right')
const horizontalStyle = this.toast().position.includes('left')
? {
left: 0,
}
: this.toast().position.includes('right')
? {
right: 0,
}
: {
: {
left: 0,
right: 0,
justifyContent: 'center',
Expand All @@ -133,14 +119,14 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
}

get isIconString() {
return typeof this.toast.icon === 'string';
return typeof this.toast().icon === 'string';
}

get groupChildrenToastRefs() {
return this.toastRef.groupRefs;
return this.toastRef().groupRefs;
}
set groupChildrenToastRefs(value: CreateHotToastRef<unknown>[]) {
(this.toastRef as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
(this.toastRef() as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
}

get groupChildrenToasts() {
Expand All @@ -152,7 +138,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
}

get isExpanded() {
return this.toastRef.groupExpanded;
return this.toastRef().groupExpanded;
}

ngOnChanges(changes: SimpleChanges): void {
Expand All @@ -164,18 +150,18 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
}

ngOnInit() {
if (isTemplateRef(this.toast.message)) {
this.context = { $implicit: this.toastRef };
if (isTemplateRef(this.toast().message)) {
this.context = { $implicit: this.toastRef() };
}
if (isComponent(this.toast.message)) {
if (isComponent(this.toast().message)) {
this.toastComponentInjector = Injector.create({
providers: [
{
provide: HotToastRef,
useValue: this.toastRef,
useValue: this.toastRef(),
},
],
parent: this.toast.injector || this.injector,
parent: this.toast().injector || this.injector,
});
}

Expand All @@ -199,16 +185,15 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
this.renderer.listen(nativeElement, 'animationend', (event: AnimationEvent) => {
if (this.isEnterAnimation(event)) {
this.ngZone.run(() => {
if (this.toast.autoClose) {
const exitAnimation = `hotToastExitAnimation${
this.top ? 'Negative' : 'Positive'
} ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1) var(--hot-toast-exit-animation-delay) var(--hot-toast-exit-animation-state)`;
this.toastBarBaseStylesSignal.set({ ...this.toast.style, animation: exitAnimation });
if (this.toast().autoClose) {
const exitAnimation = `hotToastExitAnimation${this.top ? 'Negative' : 'Positive'
} ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1) var(--hot-toast-exit-animation-delay) var(--hot-toast-exit-animation-state)`;
this.toastBarBaseStylesSignal.set({ ...this.toast().style, animation: exitAnimation });
}
});
}
if (this.isExitAnimation(event)) {
this.ngZone.run(() => this.afterClosed.emit({ dismissedByAction: this.isManualClose, id: this.toast.id }));
this.ngZone.run(() => this.afterClosed.emit({ dismissedByAction: this.isManualClose, id: this.toast().id }));
}
})
);
Expand All @@ -227,19 +212,17 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
}

softClose() {
const exitAnimation = `hotToastExitSoftAnimation${
this.top ? 'Negative' : 'Positive'
} ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
const exitAnimation = `hotToastExitSoftAnimation${this.top ? 'Negative' : 'Positive'
} ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;

const nativeElement = this.toastBarBase.nativeElement;

animate(this.renderer, nativeElement, exitAnimation);
this.softClosed = true;
}
softOpen() {
const softEnterAnimation = `hotToastEnterSoftAnimation${
top ? 'Negative' : 'Positive'
} ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
const softEnterAnimation = `hotToastEnterSoftAnimation${top ? 'Negative' : 'Positive'
} ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;

const nativeElement = this.toastBarBase.nativeElement;

Expand All @@ -251,10 +234,9 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
this.isManualClose = true;
this.cdr.markForCheck();

const exitAnimation = `hotToastExitAnimation${
this.top ? 'Negative' : 'Positive'
} ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
this.toastBarBaseStylesSignal.set({ ...this.toast.style, animation: exitAnimation });
const exitAnimation = `hotToastExitAnimation${this.top ? 'Negative' : 'Positive'
} ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
this.toastBarBaseStylesSignal.set({ ...this.toast().style, animation: exitAnimation });
}

handleMouseEnter() {
Expand All @@ -280,7 +262,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
}

private setToastAttributes() {
const toastAttributes: Record<string, string> = this.toast.attributes;
const toastAttributes: Record<string, string> = this.toast().attributes;
for (const [key, value] of Object.entries(toastAttributes)) {
this.renderer.setAttribute(this.toastBarBase.nativeElement, key, value);
}
Expand Down
Loading