Skip to content

Commit

Permalink
refactor(module:date-picker): refactor control flow (#8322)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nicoss54
Nicoss54 authored Jan 2, 2024
1 parent c0b86bb commit 9b866bc
Show file tree
Hide file tree
Showing 14 changed files with 426 additions and 406 deletions.
98 changes: 58 additions & 40 deletions components/date-picker/calendar-footer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
import { NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
Expand Down Expand Up @@ -33,48 +33,58 @@ import { PREFIX_CLASS } from './util';
exportAs: 'calendarFooter',
template: `
<div class="{{ prefixCls }}-footer">
<div *ngIf="extraFooter" class="{{ prefixCls }}-footer-extra">
<ng-container [ngSwitch]="true">
<ng-container *ngSwitchCase="isTemplateRef(extraFooter)">
<ng-container *ngTemplateOutlet="$any(extraFooter)"></ng-container>
</ng-container>
<ng-container *ngSwitchCase="isNonEmptyString(extraFooter)">
@if (extraFooter) {
<div class="{{ prefixCls }}-footer-extra">
@if (isExtraFooterTemplateRef) {
<ng-container *ngTemplateOutlet="$any(extraFooter)" />
}
@if (isExtraFooterNonEmptyString) {
<span [innerHTML]="extraFooter"></span>
</ng-container>
</ng-container>
</div>
<a
*ngIf="showToday"
class="{{ prefixCls }}-today-btn {{ isTodayDisabled ? prefixCls + '-today-btn-disabled' : '' }}"
role="button"
(click)="isTodayDisabled ? null : onClickToday()"
title="{{ todayTitle }}"
>
{{ locale.today }}
</a>
<ul *ngIf="hasTimePicker || rangeQuickSelector" class="{{ prefixCls }}-ranges">
<ng-container *ngTemplateOutlet="rangeQuickSelector"></ng-container>
<li *ngIf="showNow" class="{{ prefixCls }}-now">
<a class="{{ prefixCls }}-now-btn" (click)="isTodayDisabled ? null : onClickToday()">
{{ locale.now }}
</a>
</li>
<li *ngIf="hasTimePicker" class="{{ prefixCls }}-ok">
<button
nz-button
type="button"
nzType="primary"
nzSize="small"
[disabled]="okDisabled"
(click)="okDisabled ? null : clickOk.emit()"
>
{{ locale.ok }}
</button>
</li>
</ul>
}
</div>
}
@if (showToday) {
<a
class="{{ prefixCls }}-today-btn {{ isTodayDisabled ? prefixCls + '-today-btn-disabled' : '' }}"
role="button"
(click)="isTodayDisabled ? null : onClickToday()"
title="{{ todayTitle }}"
>
{{ locale.today }}
</a>
}
@if (hasTimePicker || rangeQuickSelector) {
<ul class="{{ prefixCls }}-ranges">
<ng-container *ngTemplateOutlet="rangeQuickSelector" />
@if (showNow) {
<li class="{{ prefixCls }}-now">
<a class="{{ prefixCls }}-now-btn" (click)="isTodayDisabled ? null : onClickToday()">
{{ locale.now }}
</a>
</li>
}
@if (hasTimePicker) {
<li class="{{ prefixCls }}-ok">
<button
nz-button
type="button"
nzType="primary"
nzSize="small"
[disabled]="okDisabled"
(click)="okDisabled ? null : clickOk.emit()"
>
{{ locale.ok }}
</button>
</li>
}
</ul>
}
</div>
`,
imports: [NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NzButtonModule],
imports: [NgTemplateOutlet, NzButtonModule],
standalone: true
})
export class CalendarFooterComponent implements OnChanges {
Expand Down Expand Up @@ -116,4 +126,12 @@ export class CalendarFooterComponent implements OnChanges {
const now: CandyDate = new CandyDate();
this.clickToday.emit(now.clone()); // To prevent the "now" being modified from outside, we use clone
}

get isExtraFooterTemplateRef(): boolean {
return isTemplateRef(this.extraFooter);
}

get isExtraFooterNonEmptyString(): boolean {
return isNonEmptyString(this.extraFooter);
}
}
115 changes: 57 additions & 58 deletions components/date-picker/date-picker.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { ApplicationRef, Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, flush, inject, tick } from '@angular/core/testing';
import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
Expand Down Expand Up @@ -1410,63 +1410,62 @@ describe('in form', () => {

@Component({
template: `
<ng-container [ngSwitch]="useSuite">
<!-- Suite 1 -->
<nz-date-picker
*ngSwitchCase="1"
[nzAllowClear]="nzAllowClear"
[nzAutoFocus]="nzAutoFocus"
[nzDisabled]="nzDisabled"
[nzInputReadOnly]="nzInputReadOnly"
[nzDisabledDate]="nzDisabledDate"
[nzFormat]="nzFormat"
[nzLocale]="nzLocale"
[nzPlaceHolder]="nzPlaceHolder"
[nzPopupStyle]="nzPopupStyle"
[nzDropdownClassName]="nzDropdownClassName"
[nzSize]="nzSize"
(nzOnOpenChange)="nzOnOpenChange($event)"
[ngModel]="nzValue"
(ngModelChange)="nzOnChange($event)"
[nzDefaultPickerValue]="nzDefaultPickerValue"
[nzDateRender]="nzDateRender"
[nzDisabledTime]="nzDisabledTime"
[nzRenderExtraFooter]="nzRenderExtraFooter"
[nzShowToday]="nzShowToday"
[nzShowNow]="nzShowNow"
[nzMode]="nzMode"
(nzOnPanelChange)="nzOnPanelChange($event)"
(nzOnCalendarChange)="nzOnCalendarChange($event)"
[nzShowTime]="nzShowTime"
(nzOnOk)="nzOnOk($event)"
[nzSuffixIcon]="nzSuffixIcon"
[nzBorderless]="nzBorderless"
[nzInline]="nzInline"
[nzBackdrop]="nzBackdrop"
[nzPlacement]="nzPlacement"
[nzShowWeekNumber]="nzShowWeekNumber"
></nz-date-picker>
<ng-template #tplDateRender let-current>
<div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
</ng-template>
<ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
<!-- Suite 2 -->
<!-- use another picker to avoid nzOpen's side-effects because nzOpen acts as "true" if used -->
<nz-date-picker *ngSwitchCase="2" [nzOpen]="nzOpen" (nzOnOpenChange)="nzOnOpenChange($event)"></nz-date-picker>
<!-- Suite 3 -->
<nz-date-picker *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-date-picker>
<!-- Suite 4 -->
<nz-date-picker *ngSwitchCase="4" [formControl]="control" [nzDisabled]="nzDisabled"></nz-date-picker>
<!-- Suite 5 -->
<ng-container *ngSwitchCase="5">
<nz-date-picker [ngModel]="firstValue" (ngModelChange)="nzOnChange($event)"></nz-date-picker>
<nz-date-picker [ngModel]="secondValue"></nz-date-picker>
</ng-container>
</ng-container>
@switch (useSuite) {
@case (1) {
<nz-date-picker
[nzAllowClear]="nzAllowClear"
[nzAutoFocus]="nzAutoFocus"
[nzDisabled]="nzDisabled"
[nzInputReadOnly]="nzInputReadOnly"
[nzDisabledDate]="nzDisabledDate"
[nzFormat]="nzFormat"
[nzLocale]="nzLocale"
[nzPlaceHolder]="nzPlaceHolder"
[nzPopupStyle]="nzPopupStyle"
[nzDropdownClassName]="nzDropdownClassName"
[nzSize]="nzSize"
(nzOnOpenChange)="nzOnOpenChange($event)"
[ngModel]="nzValue"
(ngModelChange)="nzOnChange($event)"
[nzDefaultPickerValue]="nzDefaultPickerValue"
[nzDateRender]="nzDateRender"
[nzDisabledTime]="nzDisabledTime"
[nzRenderExtraFooter]="nzRenderExtraFooter"
[nzShowToday]="nzShowToday"
[nzShowNow]="nzShowNow"
[nzMode]="nzMode"
(nzOnPanelChange)="nzOnPanelChange($event)"
(nzOnCalendarChange)="nzOnCalendarChange($event)"
[nzShowTime]="nzShowTime"
(nzOnOk)="nzOnOk($event)"
[nzSuffixIcon]="nzSuffixIcon"
[nzBorderless]="nzBorderless"
[nzInline]="nzInline"
[nzBackdrop]="nzBackdrop"
[nzPlacement]="nzPlacement"
[nzShowWeekNumber]="nzShowWeekNumber"
/>
}
@case (2) {
<nz-date-picker [nzOpen]="nzOpen" (nzOnOpenChange)="nzOnOpenChange($event)"></nz-date-picker>
}
@case (3) {
<nz-date-picker nzOpen [(ngModel)]="modelValue"></nz-date-picker>
}
@case (4) {
<nz-date-picker [formControl]="control" [nzDisabled]="nzDisabled"></nz-date-picker>
}
@case (5) {
<ng-container>
<nz-date-picker [ngModel]="firstValue" (ngModelChange)="nzOnChange($event)"></nz-date-picker>
<nz-date-picker [ngModel]="secondValue"></nz-date-picker>
</ng-container>
}
}
<ng-template #tplDateRender let-current>
<div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
</ng-template>
<ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
`
})
class NzTestDatePickerComponent {
Expand Down
83 changes: 44 additions & 39 deletions components/date-picker/date-picker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
VerticalConnectionPos
} from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';
import { DOCUMENT, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
Expand Down Expand Up @@ -98,48 +98,49 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker',
exportAs: 'nzDatePicker',
template: `
<ng-container *ngIf="!nzInline; else inlineMode">
<!-- Content of single picker -->
<div *ngIf="!isRange" class="{{ prefixCls }}-input">
<input
#pickerInput
[attr.id]="nzId"
[class.ant-input-disabled]="nzDisabled"
[disabled]="nzDisabled"
[readOnly]="nzInputReadOnly"
[(ngModel)]="inputValue"
placeholder="{{ getPlaceholder() }}"
[size]="inputSize"
autocomplete="off"
(focus)="onFocus($event)"
(focusout)="onFocusout($event)"
(ngModelChange)="onInputChange($event)"
(keyup.enter)="onKeyupEnter($event)"
/>
<ng-container *ngTemplateOutlet="tplRightRest"></ng-container>
</div>
<!-- Content of range picker -->
<ng-container *ngIf="isRange">
@if (!nzInline) {
@if (!isRange) {
<div class="{{ prefixCls }}-input">
<ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'left' }"></ng-container>
<input
#pickerInput
[attr.id]="nzId"
[class.ant-input-disabled]="nzDisabled"
[disabled]="nzDisabled"
[readOnly]="nzInputReadOnly"
[(ngModel)]="inputValue"
placeholder="{{ getPlaceholder() }}"
[size]="inputSize"
autocomplete="off"
(focus)="onFocus($event)"
(focusout)="onFocusout($event)"
(ngModelChange)="onInputChange($event)"
(keyup.enter)="onKeyupEnter($event)"
/>
<ng-container *ngTemplateOutlet="tplRightRest" />
</div>
} @else {
<div class="{{ prefixCls }}-input">
<ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'left' }" />
</div>
<div #separatorElement class="{{ prefixCls }}-range-separator">
<span class="{{ prefixCls }}-separator">
<ng-container *nzStringTemplateOutlet="nzSeparator; let separator">
<ng-container *ngIf="nzSeparator; else defaultSeparator">{{ nzSeparator }}</ng-container>
<ng-template #defaultSeparator>
@if (nzSeparator) {
{{ nzSeparator }}
} @else {
<span nz-icon nzType="swap-right" nzTheme="outline"></span>
</ng-template>
}
</ng-container>
</span>
</div>
<div class="{{ prefixCls }}-input">
<ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }"></ng-container>
<ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }" />
</div>
<ng-container *ngTemplateOutlet="tplRightRest"></ng-container>
</ng-container>
</ng-container>
<ng-container *ngTemplateOutlet="tplRightRest" />
}
} @else {
<ng-template [ngTemplateOutlet]="inlineMode" />
}
<!-- Input for Range ONLY -->
<ng-template #tplRangeInput let-partType="partType">
<input
Expand All @@ -162,14 +163,19 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
<!-- Right operator icons -->
<ng-template #tplRightRest>
<div class="{{ prefixCls }}-active-bar" [ngStyle]="activeBarStyle"></div>
<span *ngIf="showClear()" class="{{ prefixCls }}-clear" (click)="onClickClear($event)">
<span nz-icon nzType="close-circle" nzTheme="fill"></span>
</span>
@if (showClear) {
<span class="{{ prefixCls }}-clear" (click)="onClickClear($event)">
<span nz-icon nzType="close-circle" nzTheme="fill"></span>
</span>
}
<span class="{{ prefixCls }}-suffix">
<ng-container *nzStringTemplateOutlet="nzSuffixIcon; let suffixIcon">
<span nz-icon [nzType]="suffixIcon"></span>
</ng-container>
<nz-form-item-feedback-icon *ngIf="hasFeedback && !!status" [status]="status"></nz-form-item-feedback-icon>
@if (hasFeedback && !!status) {
<nz-form-item-feedback-icon [status]="status" />
}
</span>
</ng-template>
Expand Down Expand Up @@ -205,7 +211,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
[ranges]="nzRanges"
[dir]="dir"
(resultOk)="onResultOk()"
></date-range-popup>
/>
</div>
</ng-template>
Expand Down Expand Up @@ -254,7 +260,6 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
],
animations: [slideMotion],
imports: [
NgIf,
FormsModule,
NgTemplateOutlet,
NzOutletModule,
Expand Down Expand Up @@ -482,7 +487,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit,
}
}

showClear(): boolean {
get showClear(): boolean {
return !this.nzDisabled && !this.isEmptyValue(this.datePickerService.value) && this.nzAllowClear;
}

Expand Down
Loading

0 comments on commit 9b866bc

Please sign in to comment.