From 11c4a2cbdf5ab67f8a91ba3437ed6daa4309ccb1 Mon Sep 17 00:00:00 2001 From: vthinkxie Date: Sat, 15 Jun 2019 19:48:42 +0800 Subject: [PATCH] chore: sync style with antd --- components/badge/nz-badge.component.html | 4 ++-- components/badge/nz-badge.component.ts | 24 ++++++++++++++++--- components/badge/nz-badge.spec.ts | 1 - .../button/nz-button-group.component.ts | 13 +++++----- components/core/responsive/index.ts | 8 +++++++ components/core/responsive/public-api.ts | 8 +++++++ components/grid/nz-col.directive.ts | 24 +++++++------------ components/grid/nz-row.directive.ts | 3 +-- 8 files changed, 55 insertions(+), 30 deletions(-) diff --git a/components/badge/nz-badge.component.html b/components/badge/nz-badge.component.html index e003296cbef..96a35f0429c 100644 --- a/components/badge/nz-badge.component.html +++ b/components/badge/nz-badge.component.html @@ -1,4 +1,4 @@ - + - +

{{ p }}

 diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts index 80810b72e8c..6442336939a 100644 --- a/components/badge/nz-badge.component.ts +++ b/components/badge/nz-badge.component.ts @@ -6,6 +6,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { ContentObserver } from '@angular/cdk/observers'; import { AfterViewInit, ChangeDetectionStrategy, @@ -13,6 +14,7 @@ import { ElementRef, Input, OnChanges, + OnDestroy, OnInit, Renderer2, SimpleChanges, @@ -21,6 +23,8 @@ import { ViewEncapsulation } from '@angular/core'; import { isEmpty, zoomBadgeMotion, InputBoolean } from 'ng-zorro-antd/core'; +import { Subject } from 'rxjs'; +import { startWith, takeUntil } from 'rxjs/operators'; export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | 'warning'; @@ -36,7 +40,8 @@ export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | '[class.ant-badge-status]': 'nzStatus' } }) -export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges { +export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { + private destroy$ = new Subject(); maxNumberArray: string[] = []; countArray: number[] = []; countSingleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; @@ -84,7 +89,7 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges { this.maxNumberArray = this.nzOverflowCount.toString().split(''); } - constructor(private renderer: Renderer2, private elementRef: ElementRef) { + constructor(private renderer: Renderer2, private elementRef: ElementRef, private contentObserver: ContentObserver) { renderer.addClass(elementRef.nativeElement, 'ant-badge'); } @@ -93,7 +98,15 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges { } ngAfterViewInit(): void { - this.checkContent(); + this.contentObserver + .observe(this.contentElement) + .pipe( + startWith(true), + takeUntil(this.destroy$) + ) + .subscribe(() => { + this.checkContent(); + }); } ngOnChanges(changes: SimpleChanges): void { @@ -112,4 +125,9 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges { this.presetColor = this.colorArray.indexOf(this.nzColor) !== -1 ? this.nzColor : null; } } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/components/badge/nz-badge.spec.ts b/components/badge/nz-badge.spec.ts index c7a256993a4..f4cd86b4179 100644 --- a/components/badge/nz-badge.spec.ts +++ b/components/badge/nz-badge.spec.ts @@ -121,7 +121,6 @@ describe('badge', () => { }); @Component({ - selector: 'nz-test-badge-basic', template: ` = ['nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl', 'nzXXl']; const listClassMap: NgClassInterface = {}; listOfSizeInputName.forEach(name => { const sizeName = name.replace('nz', '').toLowerCase(); @@ -79,15 +75,13 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr if (typeof this[name] === 'number' || typeof this[name] === 'string') { listClassMap[`${this.prefixCls}-${sizeName}-${this[name]}`] = true; } else { - listClassMap[`${this.prefixCls}-${sizeName}-${this[name].span}`] = this[name] && isNotNil(this[name].span); - listClassMap[`${this.prefixCls}-${sizeName}-pull-${this[name].pull}`] = - this[name] && isNotNil(this[name].pull); - listClassMap[`${this.prefixCls}-${sizeName}-push-${this[name].push}`] = - this[name] && isNotNil(this[name].push); - listClassMap[`${this.prefixCls}-${sizeName}-offset-${this[name].offset}`] = - this[name] && isNotNil(this[name].offset); - listClassMap[`${this.prefixCls}-${sizeName}-order-${this[name].order}`] = - this[name] && isNotNil(this[name].order); + const embedded = this[name] as EmbeddedProperty; + const prefixArray: Array = ['span', 'pull', 'push', 'offset', 'order']; + prefixArray.forEach(prefix => { + const prefixClass = prefix === 'span' ? '-' : `-${prefix}-`; + listClassMap[`${this.prefixCls}-${sizeName}${prefixClass}${embedded[prefix]}`] = + embedded && isNotNil(embedded[prefix]); + }); } } }); diff --git a/components/grid/nz-row.directive.ts b/components/grid/nz-row.directive.ts index 2880da18f06..37bef9df6ea 100644 --- a/components/grid/nz-row.directive.ts +++ b/components/grid/nz-row.directive.ts @@ -21,11 +21,10 @@ import { import { MediaMatcher } from '@angular/cdk/layout'; import { Platform } from '@angular/cdk/platform'; +import { responsiveMap, Breakpoint, IndexableObject, NzUpdateHostClassService } from 'ng-zorro-antd/core'; import { fromEvent, Subject } from 'rxjs'; import { auditTime, takeUntil } from 'rxjs/operators'; -import { responsiveMap, Breakpoint, IndexableObject, NzUpdateHostClassService } from 'ng-zorro-antd/core'; - export type NzJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between'; export type NzAlign = 'top' | 'middle' | 'bottom'; export type NzType = 'flex' | null;