Skip to content

Commit

Permalink
feat(toast): providing close callback to headless toast template
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cr3aHal0
Cr3aHal0 committed Dec 20, 2023
1 parent 3c3fd75 commit 13bfd07
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 28 deletions.
4 changes: 2 additions & 2 deletions src/app/components/toast/toast.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast
[attr.data-pc-section]="'root'"
>
<ng-container *ngIf="headlessTemplate; else notHeadless">
<ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message }"></ng-container>
<ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
</ng-container>
<ng-template #notHeadless>
<div class="p-toast-message-content" [ngClass]="message?.contentStyleClass" [attr.data-pc-section]="'content'">
Expand Down Expand Up @@ -181,7 +181,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
this.initTimeout();
}

onCloseIconClick(event: Event) {
onCloseIconClick = (event: Event) => {
this.clearTimeout();

this.onClose.emit({
Expand Down
40 changes: 14 additions & 26 deletions src/app/showcase/doc/toast/headlessdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';
<p><i>Headless</i> mode allows you to customize the entire user interface instead of the default elements.</p>
</app-docsectiontext>
<div class="card flex justify-content-center">
<p-toast position="top-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
<ng-template let-message pTemplate="headless">
<p-toast position="top-center" key="confirm" (onClose)="onClose()" [baseZIndex]="5000">
<ng-template let-message pTemplate="headless" let-closeFn="closeFn">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full">
Expand All @@ -21,8 +21,8 @@ import { Code } from '../../domain/code';
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
</div>
<div class="flex gap-3 mb-3">
<p-button label="Another Upload?" text="true" styleClass="p-0" (click)="onConfirm()"></p-button>
<p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="onReject()"></p-button>
<p-button label="Another Upload?" text="true" styleClass="p-0" (click)="closeFn($event)"></p-button>
<p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="closeFn($event)"></p-button>
</div>
</div>
</section>
Expand Down Expand Up @@ -67,19 +67,13 @@ export class HeadlessDoc {
}
}

onConfirm() {
this.messageService.clear('confirm');
this.visible = false;
}

onReject() {
this.messageService.clear('confirm');
onClose() {
this.visible = false;
}

code: Code = {
basic: `<p-toast position="top-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
<ng-template let-message pTemplate="headless">
basic: `<p-toast position="top-center" key="confirm" (onClose)="onClose()" [baseZIndex]="5000">
<ng-template let-message pTemplate="headless" let-closeFn="closeFn">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full">
Expand All @@ -90,17 +84,17 @@ export class HeadlessDoc {
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
</div>
<div class="flex gap-3 mb-3">
<p-button label="Another Upload?" text="true" styleClass="p-0" (click)="onConfirm()"></p-button>
<p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="onReject()"></p-button>
<p-button label="Another Upload?" text="true" styleClass="p-0" (click)="closeFn($event)"></p-button>
<p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="closeFn($event)"></p-button>
</div>
</div>
</section>
</ng-template>
</p-toast>
<button type="button" pButton pRipple (click)="showConfirm()" label="Confirm"></button>`,
html: `<div class="card flex justify-content-center">
<p-toast position="top-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
<ng-template let-message pTemplate="headless">
<p-toast position="top-center" key="confirm" (onClose)="onClose()" [baseZIndex]="5000">
<ng-template let-message pTemplate="headless" let-closeFn="closeFn">
<section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
<div class="flex flex-column gap-3 w-full">
Expand All @@ -111,8 +105,8 @@ export class HeadlessDoc {
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
</div>
<div class="flex gap-3 mb-3">
<p-button label="Another Upload?" text="true" styleClass="p-0" (click)="onConfirm()"></p-button>
<p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="onReject()"></p-button>
<p-button label="Another Upload?" text="true" styleClass="p-0" (click)="closeFn($event)"></p-button>
<p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="closeFn($event)"></p-button>
</div>
</div>
</section>
Expand Down Expand Up @@ -162,13 +156,7 @@ export class ToastHeadlessDemo {
}
}
onConfirm() {
this.messageService.clear('confirm');
this.visible = false;
}
onReject() {
this.messageService.clear('confirm');
onClose() {
this.visible = false;
}
}`
Expand Down

0 comments on commit 13bfd07

Please sign in to comment.