ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
311 lines (301 loc) • 13 kB
JavaScript
import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
import { InjectionToken, TemplateRef, Type, Injector, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Input, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
import { NzConfigService } from 'ng-zorro-antd/core/config';
import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n';
import { BidiModule } from '@angular/cdk/bidi';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
const NZ_EMPTY_COMPONENT_NAME = new InjectionToken('nz-empty-component-name');
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
function getEmptySize(componentName) {
switch (componentName) {
case 'table':
case 'list':
return 'normal';
case 'select':
case 'tree-select':
case 'cascader':
case 'transfer':
return 'small';
default:
return '';
}
}
class NzEmbedEmptyComponent {
constructor(configService, viewContainerRef, cdr, injector) {
this.configService = configService;
this.viewContainerRef = viewContainerRef;
this.cdr = cdr;
this.injector = injector;
this.contentType = 'string';
this.size = '';
this.destroy$ = new Subject();
}
ngOnChanges(changes) {
if (changes.nzComponentName) {
this.size = getEmptySize(changes.nzComponentName.currentValue);
}
if (changes.specificContent && !changes.specificContent.isFirstChange()) {
this.content = changes.specificContent.currentValue;
this.renderEmpty();
}
}
ngOnInit() {
this.subscribeDefaultEmptyContentChange();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
renderEmpty() {
const content = this.content;
if (typeof content === 'string') {
this.contentType = 'string';
}
else if (content instanceof TemplateRef) {
const context = { $implicit: this.nzComponentName };
this.contentType = 'template';
this.contentPortal = new TemplatePortal(content, this.viewContainerRef, context);
}
else if (content instanceof Type) {
const injector = Injector.create({
parent: this.injector,
providers: [{ provide: NZ_EMPTY_COMPONENT_NAME, useValue: this.nzComponentName }]
});
this.contentType = 'component';
this.contentPortal = new ComponentPortal(content, this.viewContainerRef, injector);
}
else {
this.contentType = 'string';
this.contentPortal = undefined;
}
this.cdr.detectChanges();
}
subscribeDefaultEmptyContentChange() {
this.configService
.getConfigChangeEventForComponent('empty')
.pipe(startWith(true), takeUntil(this.destroy$))
.subscribe(() => {
this.content = this.specificContent || this.getUserDefaultEmptyContent();
this.renderEmpty();
});
}
getUserDefaultEmptyContent() {
return (this.configService.getConfigForComponent('empty') || {}).nzDefaultEmptyContent;
}
}
NzEmbedEmptyComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-embed-empty',
exportAs: 'nzEmbedEmpty',
template: `
<ng-container *ngIf="!content && specificContent !== null" [ngSwitch]="size">
<nz-empty *ngSwitchCase="'normal'" class="ant-empty-normal" [nzNotFoundImage]="'simple'"></nz-empty>
<nz-empty *ngSwitchCase="'small'" class="ant-empty-small" [nzNotFoundImage]="'simple'"></nz-empty>
<nz-empty *ngSwitchDefault></nz-empty>
</ng-container>
<ng-container *ngIf="content">
<ng-template *ngIf="contentType !== 'string'" [cdkPortalOutlet]="contentPortal"></ng-template>
<ng-container *ngIf="contentType === 'string'">
{{ content }}
</ng-container>
</ng-container>
`
},] }
];
NzEmbedEmptyComponent.ctorParameters = () => [
{ type: NzConfigService },
{ type: ViewContainerRef },
{ type: ChangeDetectorRef },
{ type: Injector }
];
NzEmbedEmptyComponent.propDecorators = {
nzComponentName: [{ type: Input }],
specificContent: [{ type: Input }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
const NzEmptyDefaultImages = ['default', 'simple'];
class NzEmptyComponent {
constructor(i18n, cdr) {
this.i18n = i18n;
this.cdr = cdr;
this.nzNotFoundImage = 'default';
this.isContentString = false;
this.isImageBuildIn = true;
this.destroy$ = new Subject();
}
ngOnChanges(changes) {
const { nzNotFoundContent, nzNotFoundImage } = changes;
if (nzNotFoundContent) {
const content = nzNotFoundContent.currentValue;
this.isContentString = typeof content === 'string';
}
if (nzNotFoundImage) {
const image = nzNotFoundImage.currentValue || 'default';
this.isImageBuildIn = NzEmptyDefaultImages.findIndex(i => i === image) > -1;
}
}
ngOnInit() {
this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.locale = this.i18n.getLocaleData('Empty');
this.cdr.markForCheck();
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzEmptyComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-empty',
exportAs: 'nzEmpty',
template: `
<div class="ant-empty-image">
<ng-container *ngIf="!isImageBuildIn">
<ng-container *nzStringTemplateOutlet="nzNotFoundImage">
<img [src]="nzNotFoundImage" [alt]="isContentString ? nzNotFoundContent : 'empty'" />
</ng-container>
</ng-container>
<nz-empty-default *ngIf="isImageBuildIn && nzNotFoundImage !== 'simple'"></nz-empty-default>
<nz-empty-simple *ngIf="isImageBuildIn && nzNotFoundImage === 'simple'"></nz-empty-simple>
</div>
<p class="ant-empty-description" *ngIf="nzNotFoundContent !== null">
<ng-container *nzStringTemplateOutlet="nzNotFoundContent">
{{ isContentString ? nzNotFoundContent : locale['description'] }}
</ng-container>
</p>
<div class="ant-empty-footer" *ngIf="nzNotFoundFooter">
<ng-container *nzStringTemplateOutlet="nzNotFoundFooter">
{{ nzNotFoundFooter }}
</ng-container>
</div>
`,
host: {
class: 'ant-empty'
}
},] }
];
NzEmptyComponent.ctorParameters = () => [
{ type: NzI18nService },
{ type: ChangeDetectorRef }
];
NzEmptyComponent.propDecorators = {
nzNotFoundImage: [{ type: Input }],
nzNotFoundContent: [{ type: Input }],
nzNotFoundFooter: [{ type: Input }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzEmptyDefaultComponent {
}
NzEmptyDefaultComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-empty-default',
exportAs: 'nzEmptyDefault',
template: `
<svg class="ant-empty-img-default" width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(24 31.67)">
<ellipse class="ant-empty-img-default-ellipse" cx="67.797" cy="106.89" rx="67.797" ry="12.668" />
<path
class="ant-empty-img-default-path-1"
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
/>
<path
class="ant-empty-img-default-path-2"
d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
transform="translate(13.56)"
/>
<path
class="ant-empty-img-default-path-3"
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
/>
<path
class="ant-empty-img-default-path-4"
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
/>
</g>
<path
class="ant-empty-img-default-path-5"
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
/>
<g class="ant-empty-img-default-g" transform="translate(149.65 15.383)">
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
</g>
</g>
</svg>
`
},] }
];
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzEmptySimpleComponent {
}
NzEmptySimpleComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-empty-simple',
exportAs: 'nzEmptySimple',
template: `
<svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
<ellipse class="ant-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7" />
<g class="ant-empty-img-simple-g" fill-rule="nonzero">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
<path
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
class="ant-empty-img-simple-path"
/>
</g>
</g>
</svg>
`
},] }
];
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzEmptyModule {
}
NzEmptyModule.decorators = [
{ type: NgModule, args: [{
imports: [BidiModule, CommonModule, PortalModule, NzOutletModule, NzI18nModule],
declarations: [NzEmptyComponent, NzEmbedEmptyComponent, NzEmptyDefaultComponent, NzEmptySimpleComponent],
exports: [NzEmptyComponent, NzEmbedEmptyComponent]
},] }
];
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
/**
* Generated bundle index. Do not edit.
*/
export { NZ_EMPTY_COMPONENT_NAME, NzEmbedEmptyComponent, NzEmptyComponent, NzEmptyDefaultComponent, NzEmptyModule, NzEmptySimpleComponent };
//# sourceMappingURL=ng-zorro-antd-empty.js.map