Skip to content

Commit

Permalink
feat(module:grid): support nzFlex and nzGutter array, deprecated nzType
Browse files Browse the repository at this point in the history
  • Loading branch information
vthinkxie committed Jan 11, 2020
1 parent 22db30c commit c4d2694
Show file tree
Hide file tree
Showing 35 changed files with 737 additions and 812 deletions.
3 changes: 2 additions & 1 deletion components/button/button-group.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*/

import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
import { IndexableObject } from 'ng-zorro-antd/core';

export type NzButtonGroupSize = 'large' | 'default' | 'small';

Expand All @@ -23,7 +24,7 @@ export type NzButtonGroupSize = 'large' | 'default' | 'small';
})
export class NzButtonGroupComponent implements OnInit, OnChanges {
@Input() nzSize: NzButtonGroupSize = 'default';
hostClassMap = {};
hostClassMap: IndexableObject = {};
updateHostClassMap(): void {
this.hostClassMap = {
['ant-btn-group']: true,
Expand Down
37 changes: 10 additions & 27 deletions components/button/button.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,16 @@ import {
Component,
ContentChild,
ElementRef,
HostBinding,
Inject,
Input,
NgZone,
OnChanges,
OnDestroy,
OnInit,
Optional,
Renderer2,
SimpleChanges,
ViewEncapsulation
} from '@angular/core';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';

import { InputBoolean, NZ_WAVE_GLOBAL_CONFIG, NzConfigService, NzWaveConfig, NzWaveDirective, WithConfig } from 'ng-zorro-antd/core';
import { IndexableObject, InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core';
import { NzIconDirective } from 'ng-zorro-antd/icon';
import { Subject } from 'rxjs';
import { filter, startWith, takeUntil } from 'rxjs/operators';
Expand All @@ -53,7 +48,6 @@ const NZ_CONFIG_COMPONENT_NAME = 'button';
})
export class NzButtonComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit, AfterContentInit {
@ContentChild(NzIconDirective, { read: ElementRef }) nzIconDirectiveElement: ElementRef;
@HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(this.ngZone, this.elementRef, this.waveConfig, this.animationType);
@Input() @InputBoolean() nzBlock: boolean = false;
@Input() @InputBoolean() nzGhost: boolean = false;
@Input() @InputBoolean() nzSearch: boolean = false;
Expand All @@ -62,10 +56,9 @@ export class NzButtonComponent implements OnInit, OnDestroy, OnChanges, AfterVie
@Input() nzType: NzButtonType = null;
@Input() nzShape: NzButtonShape = null;
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzButtonSize;
readonly nativeElement: HTMLElement = this.elementRef.nativeElement;
private destroy$ = new Subject<void>();
private loading$ = new Subject<boolean>();
hostClassMap = {};
hostClassMap: IndexableObject = {};

updateHostClassMap(): void {
this.hostClassMap = {
Expand Down Expand Up @@ -102,10 +95,7 @@ export class NzButtonComponent implements OnInit, OnDestroy, OnChanges, AfterVie
private elementRef: ElementRef,
private cdr: ChangeDetectorRef,
private renderer: Renderer2,
private ngZone: NgZone,
public nzConfigService: NzConfigService,
@Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private waveConfig: NzWaveConfig,
@Optional() @Inject(ANIMATION_MODULE_TYPE) private animationType: string
public nzConfigService: NzConfigService
) {
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
Expand All @@ -117,30 +107,18 @@ export class NzButtonComponent implements OnInit, OnDestroy, OnChanges, AfterVie

ngOnInit(): void {
this.updateHostClassMap();
this.nzWave.ngOnInit();
}

ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
this.nzWave.ngOnDestroy();
}

ngOnChanges(changes: SimpleChanges): void {
this.updateHostClassMap();
const { nzType, nzLoading } = changes;
const { nzLoading } = changes;
if (nzLoading) {
this.loading$.next(this.nzLoading);
}
if (nzType && nzType.currentValue === 'link') {
this.nzWave.disable();
} else {
this.nzWave.enable();
}
}

ngAfterViewInit(): void {
this.insertSpan(this.nativeElement.childNodes, this.renderer);
this.insertSpan(this.elementRef.nativeElement.childNodes, this.renderer);
}

ngAfterContentInit(): void {
Expand All @@ -159,4 +137,9 @@ export class NzButtonComponent implements OnInit, OnDestroy, OnChanges, AfterVie
}
});
}

ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
3 changes: 1 addition & 2 deletions components/button/button.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@ import { NgModule } from '@angular/core';

import { NzWaveModule, ɵNzTransitionPatchModule as NzTransitionPatchModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';

import { NzButtonGroupComponent } from './button-group.component';
import { NzButtonComponent } from './button.component';

@NgModule({
declarations: [NzButtonComponent, NzButtonGroupComponent],
exports: [NzButtonComponent, NzButtonGroupComponent, NzTransitionPatchModule],
exports: [NzButtonComponent, NzButtonGroupComponent, NzTransitionPatchModule, NzWaveModule],
imports: [CommonModule, NzWaveModule, NzIconModule, NzTransitionPatchModule]
})
export class NzButtonModule {}
16 changes: 4 additions & 12 deletions components/core/config/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@

import { InjectionToken, TemplateRef, Type } from '@angular/core';

import { NzAlignType, NzShapeSCType, NzSizeDSType, NzSizeLDSType, NzSizeMDSType } from '../types';

import { SafeUrl } from '@angular/platform-browser';
import { BreakpointMap, NzBreakpoint } from '../responsive/public-api';
import { NzBreakpointEnum } from '../responsive/public-api';

import { NzShapeSCType, NzSizeDSType, NzSizeLDSType, NzSizeMDSType } from '../types';

export interface NzConfig {
affix?: AffixConfig;
Expand All @@ -31,7 +31,6 @@ export interface NzConfig {
drawer?: DrawerConfig;
empty?: EmptyConfig;
form?: FormConfig;
grid?: GridConfig;
icon?: IconConfig;
message?: MessageConfig;
modal?: ModalConfig;
Expand Down Expand Up @@ -125,7 +124,7 @@ export interface CollapsePanelConfig {

export interface DescriptionsConfig {
nzBorder?: boolean;
nzColumn?: { [key in NzBreakpoint]?: number } | number;
nzColumn?: { [key in NzBreakpointEnum]?: number } | number;
nzSize?: 'default' | 'middle' | 'small';
nzColon?: boolean;
}
Expand All @@ -144,13 +143,6 @@ export interface FormConfig {
nzNoColon?: boolean;
}

export interface GridConfig {
nzAlign?: NzAlignType;
nzGutter?: number | BreakpointMap;
nzJustify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
nzType?: 'flex';
}

export interface IconConfig {
nzTheme?: 'fill' | 'outline' | 'twotone';
nzTwotoneColor?: string;
Expand Down
7 changes: 3 additions & 4 deletions components/core/responsive/nz-breakpoint.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

export enum NzBreakpoint {
export enum NzBreakpointEnum {
xxl = 'xxl',
xl = 'xl',
lg = 'lg',
Expand All @@ -15,9 +15,8 @@ export enum NzBreakpoint {
xs = 'xs'
}

export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

export type BreakpointMap = { [key in NzBreakpoint]: string };
export type BreakpointMap = { [key in NzBreakpointEnum]: string };
export type NzBreakpointKey = keyof typeof NzBreakpointEnum;

export const responsiveMap: BreakpointMap = {
xs: '(max-width: 575px)',
Expand Down
6 changes: 3 additions & 3 deletions components/core/transition-patch/transition-patch.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,21 @@ describe('transition-patch', () => {

@Component({
template: `
<button nz-button id="patch"></button>
<button nz-button></button>
`
})
export class TestTransitionPatchComponent {}

@Component({
template: `
<button nz-button hidden id="patch"></button>
<button nz-button hidden></button>
`
})
export class TestTransitionPatchHiddenComponent {}

@Component({
template: `
<button nz-button hidden="abc" id="patch"></button>
<button nz-button hidden="abc"></button>
`
})
export class TestTransitionPatchRestoreComponent {}
2 changes: 0 additions & 2 deletions components/core/types/direction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,3 @@
export type NzDirectionVHIType = 'vertical' | 'horizontal' | 'inline';
export type NzDirectionVHType = 'vertical' | 'horizontal';
export type NzFourDirectionType = 'top' | 'bottom' | 'left' | 'right';

export type NzAlignType = 'top' | 'middle' | 'bottom';
2 changes: 1 addition & 1 deletion components/core/wave/nz-wave.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function NZ_WAVE_GLOBAL_CONFIG_FACTORY(): NzWaveConfig {
}

@Directive({
selector: '[nz-wave]',
selector: '[nz-wave],button[nz-button]',
exportAs: 'nzWave'
})
export class NzWaveDirective implements OnInit, OnDestroy {
Expand Down
14 changes: 7 additions & 7 deletions components/descriptions/nz-descriptions.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ import {
TemplateRef,
ViewEncapsulation
} from '@angular/core';

import { InputBoolean, NzBreakpointEnum, NzConfigService, NzDomEventService, responsiveMap, warn, WithConfig } from 'ng-zorro-antd/core';
import { merge, Subject } from 'rxjs';
import { auditTime, finalize, startWith, switchMap, takeUntil } from 'rxjs/operators';

import { InputBoolean, NzBreakpoint, NzConfigService, NzDomEventService, responsiveMap, warn, WithConfig } from 'ng-zorro-antd/core';
import { NzDescriptionsItemRenderProps, NzDescriptionsLayout, NzDescriptionsSize } from './nz-descriptions-definitions';
import { NzDescriptionsItemComponent } from './nz-descriptions-item.component';

const NZ_CONFIG_COMPONENT_NAME = 'descriptions';
const defaultColumnMap: { [key in NzBreakpoint]: number } = {
const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
xxl: 3,
xl: 3,
lg: 3,
Expand Down Expand Up @@ -65,7 +65,7 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte

@Input() @InputBoolean() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) nzBordered: boolean;
@Input() nzLayout: NzDescriptionsLayout = 'horizontal';
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, defaultColumnMap) nzColumn: number | { [key in NzBreakpoint]: number };
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, defaultColumnMap) nzColumn: number | { [key in NzBreakpointEnum]: number };
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzDescriptionsSize;
@Input() nzTitle: string | TemplateRef<void> = '';
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzColon: boolean;
Expand Down Expand Up @@ -165,11 +165,11 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
this.itemMatrix = matrix;
}

private matchMedia(): NzBreakpoint {
let bp: NzBreakpoint = NzBreakpoint.md;
private matchMedia(): NzBreakpointEnum {
let bp: NzBreakpointEnum = NzBreakpointEnum.md;

Object.keys(responsiveMap).map((breakpoint: string) => {
const castBP = breakpoint as NzBreakpoint;
const castBP = breakpoint as NzBreakpointEnum;
const matchBelow = this.mediaMatcher.matchMedia(responsiveMap[castBP]).matches;
if (matchBelow) {
bp = castBP;
Expand Down
18 changes: 3 additions & 15 deletions components/form/nz-form-control.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

import {
AfterContentInit,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Expand All @@ -24,11 +23,10 @@ import {
ViewEncapsulation
} from '@angular/core';
import { FormControl, FormControlDirective, FormControlName, NgControl, NgModel } from '@angular/forms';

import { helpMotion, NgClassType, toBoolean } from 'ng-zorro-antd/core';
import { Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';

import { helpMotion, NgClassType, NzUpdateHostClassService, toBoolean } from 'ng-zorro-antd/core';
import { NzColDirective, NzRowDirective } from 'ng-zorro-antd/grid';
import { NzFormItemComponent } from './nz-form-item.component';

export type NzFormControlStatusType = 'warning' | 'validating' | 'error' | 'success' | null;
Expand All @@ -40,7 +38,6 @@ export type NzFormControlStatusType = 'warning' | 'validating' | 'error' | 'succ
animations: [helpMotion],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [NzUpdateHostClassService],
templateUrl: './nz-form-control.component.html',
styles: [
`
Expand All @@ -53,7 +50,7 @@ export type NzFormControlStatusType = 'warning' | 'validating' | 'error' | 'succ
`
]
})
export class NzFormControlComponent extends NzColDirective implements OnDestroy, OnInit, AfterContentInit, AfterViewInit, OnDestroy {
export class NzFormControlComponent implements OnDestroy, OnInit, AfterContentInit, OnDestroy {
private _hasFeedback = false;
private validateChanges: Subscription = Subscription.EMPTY;
private validateString: string | null;
Expand Down Expand Up @@ -170,25 +167,20 @@ export class NzFormControlComponent extends NzColDirective implements OnDestroy,
}

constructor(
nzUpdateHostClassService: NzUpdateHostClassService,
elementRef: ElementRef,
@Optional() @Host() private nzFormItemComponent: NzFormItemComponent,
@Optional() @Host() nzRowDirective: NzRowDirective,
private cdr: ChangeDetectorRef,
renderer: Renderer2
) {
super(nzUpdateHostClassService, elementRef, nzFormItemComponent || nzRowDirective, renderer);
renderer.addClass(elementRef.nativeElement, 'ant-form-item-control-wrapper');
}

ngOnInit(): void {
super.ngOnInit();
this.setControlClassMap();
}

ngOnDestroy(): void {
this.removeSubscribe();
super.ngOnDestroy();
}

ngAfterContentInit(): void {
Expand All @@ -200,8 +192,4 @@ export class NzFormControlComponent extends NzColDirective implements OnDestroy,
}
}
}

ngAfterViewInit(): void {
super.ngAfterViewInit();
}
}
Loading

0 comments on commit c4d2694

Please sign in to comment.