ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
251 lines (244 loc) • 13.8 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, ViewEncapsulation, Input, Injectable, ApplicationRef, ComponentFactoryResolver, NgZone, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-zorro-antd-mobile/icon';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
import { first } from 'rxjs/operators';
import { WingBlankModule } from 'ng-zorro-antd-mobile/wing-blank';
class ToastComponent {
get content() {
return this._content;
}
set content(value) {
if (value instanceof TemplateRef) {
this.isContentString = false;
}
else {
this.isContentString = true;
}
this._zone.run(() => {
this._content = value;
});
}
get iconType() {
return this._iconType;
}
set iconType(value) {
this._zone.run(() => {
this._iconType = value;
});
}
constructor(_zone) {
this._zone = _zone;
this.prefixCls = 'am-toast';
this.isContentString = true;
this.transitionName = 'am-fade-enter am-fade-enter-active';
this._iconType = '';
this._content = '';
this.mask = true;
this.position = 'middle';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ToastComponent, selector: "Toast", inputs: { mask: "mask", content: "content", iconType: "iconType", position: "position" }, host: { properties: { "class.am-toast": "true", "class.am-toast-mask": "mask", "class.am-toast-mask-top": "mask && position === 'top'", "class.am-toast-mask-middle": "mask && position === 'middle'", "class.am-toast-mask-bottom": "mask && position === 'bottom'", "class.am-toast-nomask": "!mask", "class.am-toast-nomask-top": "!mask && position === 'top'", "class.am-toast-nomask-middle": "!mask && position === 'middle'", "class.am-toast-nomask-bottom": "!mask && position === 'bottom'" } }, ngImport: i0, template: "<div class=\"{{ prefixCls }}-notice {{ prefixCls }}-notice-closable {{ transitionName }}\">\n <div class=\"{{ prefixCls }}-notice-content\">\n <div role=\"alert\" *ngIf=\"iconType\" class=\"{{ prefixCls }}-text {{ prefixCls }}-text-icon\" aria-live=\"assertive\">\n <Icon [type]=\"iconType\" [size]=\"'lg'\"></Icon>\n <div *ngIf=\"isContentString\" class=\"{{ prefixCls }}-text-info\">{{ content }}</div>\n </div>\n <div *ngIf=\"!iconType\" class=\"{{ prefixCls }}-text\" role=\"alert\" aria-live=\"assertive\">\n <div *ngIf=\"isContentString\" class=\"{{ prefixCls }}-text-info\">{{ content }}</div>\n <ng-template *ngIf=\"!isContentString\" [ngTemplateOutlet]=\"content\"></ng-template>\n </div>\n </div>\n <a class=\"{{ prefixCls }}-notice-close\">\n <span class=\"{{ prefixCls }}-notice-close-x\"></span>\n </a>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "Icon, nzm-icon", inputs: ["color", "type", "src", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastComponent, decorators: [{
type: Component,
args: [{ selector: 'Toast', encapsulation: ViewEncapsulation.None, host: {
'[class.am-toast]': 'true',
'[class.am-toast-mask]': 'mask',
'[class.am-toast-mask-top]': `mask && position === 'top'`,
'[class.am-toast-mask-middle]': `mask && position === 'middle'`,
'[class.am-toast-mask-bottom]': `mask && position === 'bottom'`,
'[class.am-toast-nomask]': '!mask',
'[class.am-toast-nomask-top]': `!mask && position === 'top'`,
'[class.am-toast-nomask-middle]': `!mask && position === 'middle'`,
'[class.am-toast-nomask-bottom]': `!mask && position === 'bottom'`
}, template: "<div class=\"{{ prefixCls }}-notice {{ prefixCls }}-notice-closable {{ transitionName }}\">\n <div class=\"{{ prefixCls }}-notice-content\">\n <div role=\"alert\" *ngIf=\"iconType\" class=\"{{ prefixCls }}-text {{ prefixCls }}-text-icon\" aria-live=\"assertive\">\n <Icon [type]=\"iconType\" [size]=\"'lg'\"></Icon>\n <div *ngIf=\"isContentString\" class=\"{{ prefixCls }}-text-info\">{{ content }}</div>\n </div>\n <div *ngIf=\"!iconType\" class=\"{{ prefixCls }}-text\" role=\"alert\" aria-live=\"assertive\">\n <div *ngIf=\"isContentString\" class=\"{{ prefixCls }}-text-info\">{{ content }}</div>\n <ng-template *ngIf=\"!isContentString\" [ngTemplateOutlet]=\"content\"></ng-template>\n </div>\n </div>\n <a class=\"{{ prefixCls }}-notice-close\">\n <span class=\"{{ prefixCls }}-notice-close-x\"></span>\n </a>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { mask: [{
type: Input
}], content: [{
type: Input
}], iconType: [{
type: Input
}], position: [{
type: Input
}] } });
class ToastOptions {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastOptions, decorators: [{
type: Injectable
}] });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
let ToastService = class ToastService {
constructor(_appRef, _cfr, _zone) {
this._appRef = _appRef;
this._cfr = _cfr;
this._zone = _zone;
this.timeout = null;
this.zone = null;
this.compRef = null;
this.insertElement = null;
this.toastCompFactory = null;
this.appRef = null;
this.zone = this._zone;
this.appRef = this._appRef;
this.toastCompFactory = this._cfr.resolveComponentFactory(ToastComponent);
}
_initConfig(config, options) {
const props = {};
const optionalParams = ['content', 'iconType', 'mask', 'position'];
config = Object.assign(options, config);
optionalParams.forEach(key => {
if (config[key] !== undefined) {
props[key] = config[key];
}
});
const iconType = {
info: '',
success: 'success',
fail: 'fail',
offline: 'dislike',
loading: 'loading'
}[options.iconType];
props['iconType'] = iconType;
props['mask'] = options.mask;
props['position'] = options.position;
return props;
}
async notice(config, type, timeInterval = 2000, onClose, mask = true, position = 'middle') {
// 如果已经存在，在没有遮罩层的情况下，会响应别的toast，需要清除原来的
if (this.compRef) {
this.hide();
}
const options = new ToastOptions();
options.iconType = type;
options.mask = mask;
options.position = position;
const props = this._initConfig(config, options);
this.insertElement = document.body.insertBefore(document.createElement(this.toastCompFactory.selector), document.body.firstChild);
let instance;
let subject;
// 需要等待应用程序稳定后再安装，比如在 ngOnInit 里调用
if (!this._zone.isStable) {
await this._appRef.isStable.pipe(first(stable => stable));
}
this.compRef = this._appRef.bootstrap(this.toastCompFactory);
instance = this.compRef.instance;
subject = instance.subject;
if (timeInterval) {
this.timeout = setTimeout(() => {
if (onClose) {
onClose();
}
this.hide();
}, timeInterval);
}
Object.assign(instance, props);
return subject;
}
/**
* Open info dialog
*/
info(content, timeInterval, onClose, mask, position) {
const config = Object.assign({
iconType: 'info',
content: content
});
return this.notice(config, 'info', timeInterval, onClose, mask, position);
}
/**
* Open success dialog
*/
success(content, timeInterval, onClose, mask, position) {
const config = Object.assign({
iconType: 'success',
content: content
});
return this.notice(config, 'success', timeInterval, onClose, mask, position);
}
show(content, timeInterval, mask, position) {
const config = Object.assign({
iconType: 'info',
content: content
});
return this.notice(config, 'info', timeInterval, () => { }, mask, position);
}
fail(content, timeInterval, onClose, mask, position) {
const config = Object.assign({
iconType: 'fail',
content: content
});
return this.notice(config, 'fail', timeInterval, onClose, mask, position);
}
offline(content, timeInterval, onClose, mask, position) {
const config = Object.assign({
iconType: 'offline',
content: content
});
return this.notice(config, 'offline', timeInterval, onClose, mask, position);
}
loading(content, timeInterval, onClose, mask, position) {
const config = Object.assign({
iconType: 'loading',
content: content
});
return this.notice(config, 'loading', timeInterval, onClose, mask, position);
}
hide() {
if (this.timeout) {
clearTimeout(this.timeout);
}
if (this.compRef) {
this._zone.run(() => {
this.compRef.destroy();
document.body.removeChild(this.insertElement);
});
this.compRef = null;
this.insertElement = null;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastService, providedIn: 'root' }); }
};
ToastService = __decorate([
Injectable(),
__metadata("design:paramtypes", [ApplicationRef, ComponentFactoryResolver, NgZone])
], ToastService);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}, {
type: Injectable
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }] });
class ToastModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ToastModule, declarations: [ToastComponent], imports: [CommonModule, IconModule, WingBlankModule], exports: [ToastComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastModule, providers: [ToastService], imports: [CommonModule, IconModule, WingBlankModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, IconModule, WingBlankModule],
exports: [ToastComponent],
declarations: [ToastComponent],
providers: [ToastService]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ToastService as Toast, ToastComponent, ToastModule, ToastOptions, ToastService };
//# sourceMappingURL=ng-zorro-antd-mobile-toast.mjs.map