UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

311 lines (301 loc) 13 kB
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