UNPKG

ng-zorro-antd

Version:

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

261 lines (254 loc) 8.07 kB
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Renderer2, ElementRef, Input, NgModule } from '@angular/core'; import { toCssPixel } from 'ng-zorro-antd/core'; import { CommonModule } from '@angular/common'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzSkeletonComponent { /** * @param {?} cdr * @param {?} renderer * @param {?} elementRef */ constructor(cdr, renderer, elementRef) { this.cdr = cdr; this.nzActive = false; this.nzLoading = true; this.nzTitle = true; this.nzAvatar = false; this.nzParagraph = true; this.rowsList = []; this.widthList = []; renderer.addClass(elementRef.nativeElement, 'ant-skeleton'); } /** * @param {?=} value * @return {?} */ toCSSUnit(value = '') { return toCssPixel(value); } /** * @private * @return {?} */ getTitleProps() { /** @type {?} */ const hasAvatar = !!this.nzAvatar; /** @type {?} */ const hasParagraph = !!this.nzParagraph; /** @type {?} */ let width = ''; if (!hasAvatar && hasParagraph) { width = '38%'; } else if (hasAvatar && hasParagraph) { width = '50%'; } return Object.assign({ width }, this.getProps(this.nzTitle)); } /** * @private * @return {?} */ getAvatarProps() { /** @type {?} */ const shape = !!this.nzTitle && !this.nzParagraph ? 'square' : 'circle'; /** @type {?} */ const size = 'large'; return Object.assign({ shape, size }, this.getProps(this.nzAvatar)); } /** * @private * @return {?} */ getParagraphProps() { /** @type {?} */ const hasAvatar = !!this.nzAvatar; /** @type {?} */ const hasTitle = !!this.nzTitle; /** @type {?} */ const basicProps = {}; // Width if (!hasAvatar || !hasTitle) { basicProps.width = '61%'; } // Rows if (!hasAvatar && hasTitle) { basicProps.rows = 3; } else { basicProps.rows = 2; } return Object.assign({}, basicProps, this.getProps(this.nzParagraph)); } /** * @private * @template T * @param {?} prop * @return {?} */ getProps(prop) { return prop && typeof prop === 'object' ? prop : {}; } /** * @private * @return {?} */ getWidthList() { const { width, rows } = this.paragraph; /** @type {?} */ let widthList = []; if (width && Array.isArray(width)) { widthList = width; } else if (width && !Array.isArray(width)) { widthList = []; widthList[(/** @type {?} */ (rows)) - 1] = width; } return widthList; } /** * @private * @return {?} */ updateProps() { this.title = this.getTitleProps(); this.avatar = this.getAvatarProps(); this.paragraph = this.getParagraphProps(); this.rowsList = [...Array(this.paragraph.rows)]; this.widthList = this.getWidthList(); this.cdr.markForCheck(); } /** * @return {?} */ ngOnInit() { this.updateProps(); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { if (changes.nzTitle || changes.nzAvatar || changes.nzParagraph) { this.updateProps(); } } } NzSkeletonComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'nz-skeleton', exportAs: 'nzSkeleton', template: "<ng-container *ngIf=\"nzLoading\">\n <div class=\"ant-skeleton-header\" *ngIf=\"!!nzAvatar\">\n <span\n class=\"ant-skeleton-avatar\"\n [class.ant-skeleton-avatar-lg]=\"avatar.size === 'large'\"\n [class.ant-skeleton-avatar-sm]=\"avatar.size === 'small'\"\n [class.ant-skeleton-avatar-circle]=\"avatar.shape === 'circle'\"\n [class.ant-skeleton-avatar-square]=\"avatar.shape === 'square'\">\n </span>\n </div>\n <div class=\"ant-skeleton-content\">\n <h3 *ngIf=\"!!nzTitle\" class=\"ant-skeleton-title\" [style.width]=\"toCSSUnit(title.width)\"></h3>\n <ul *ngIf=\"!!nzParagraph\" class=\"ant-skeleton-paragraph\">\n <li *ngFor=\"let row of rowsList; let i=index\" [style.width]=\"toCSSUnit(widthList[i])\">\n </li>\n </ul>\n </div>\n</ng-container>\n<ng-container *ngIf=\"!nzLoading\">\n <ng-content></ng-content>\n</ng-container>", host: { '[class.ant-skeleton-with-avatar]': '!!nzAvatar', '[class.ant-skeleton-active]': 'nzActive' } }] } ]; /** @nocollapse */ NzSkeletonComponent.ctorParameters = () => [ { type: ChangeDetectorRef }, { type: Renderer2 }, { type: ElementRef } ]; NzSkeletonComponent.propDecorators = { nzActive: [{ type: Input }], nzLoading: [{ type: Input }], nzTitle: [{ type: Input }], nzAvatar: [{ type: Input }], nzParagraph: [{ type: Input }] }; if (false) { /** @type {?} */ NzSkeletonComponent.prototype.nzActive; /** @type {?} */ NzSkeletonComponent.prototype.nzLoading; /** @type {?} */ NzSkeletonComponent.prototype.nzTitle; /** @type {?} */ NzSkeletonComponent.prototype.nzAvatar; /** @type {?} */ NzSkeletonComponent.prototype.nzParagraph; /** @type {?} */ NzSkeletonComponent.prototype.title; /** @type {?} */ NzSkeletonComponent.prototype.avatar; /** @type {?} */ NzSkeletonComponent.prototype.paragraph; /** @type {?} */ NzSkeletonComponent.prototype.rowsList; /** @type {?} */ NzSkeletonComponent.prototype.widthList; /** * @type {?} * @private */ NzSkeletonComponent.prototype.cdr; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzSkeletonModule { } NzSkeletonModule.decorators = [ { type: NgModule, args: [{ declarations: [NzSkeletonComponent], imports: [CommonModule], exports: [NzSkeletonComponent] },] } ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @license * Copyright Alibaba.com All Rights Reserved. * * 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 */ /** * @record */ function NzSkeletonAvatar() { } if (false) { /** @type {?|undefined} */ NzSkeletonAvatar.prototype.size; /** @type {?|undefined} */ NzSkeletonAvatar.prototype.shape; } /** * @record */ function NzSkeletonTitle() { } if (false) { /** @type {?|undefined} */ NzSkeletonTitle.prototype.width; } /** * @record */ function NzSkeletonParagraph() { } if (false) { /** @type {?|undefined} */ NzSkeletonParagraph.prototype.rows; /** @type {?|undefined} */ NzSkeletonParagraph.prototype.width; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzSkeletonComponent, NzSkeletonModule }; //# sourceMappingURL=ng-zorro-antd-skeleton.js.map