From a231cb579e66026851ffcea75f4eee0517d0cba5 Mon Sep 17 00:00:00 2001 From: kekehaoz Date: Fri, 19 Apr 2019 18:03:15 +0800 Subject: [PATCH] feat(module:date-picker): `nzRanges` support callback (#3304) * feat(module:date-picker): nzRanges support callback * feat(module:date-picker): nzRanges support callback * fix(module:date-picker): fix build error * feat(module:date-picker): nzRanges support callback * refactor(module:date-picker): refactor PresetRanges close #1629 --- components/date-picker/date-range-picker.component.ts | 2 +- components/date-picker/doc/index.en-US.md | 2 +- components/date-picker/doc/index.zh-CN.md | 2 +- .../lib/popups/date-range-popup.component.ts | 10 ++++++---- components/date-picker/range-picker.component.spec.ts | 9 +++++++++ components/date-picker/standard-types.ts | 2 +- 6 files changed, 19 insertions(+), 8 deletions(-) diff --git a/components/date-picker/date-range-picker.component.ts b/components/date-picker/date-range-picker.component.ts index 1ebb4cf9f23..491675b9d73 100644 --- a/components/date-picker/date-range-picker.component.ts +++ b/components/date-picker/date-range-picker.component.ts @@ -28,7 +28,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements @Input() nzRenderExtraFooter: FunctionProp | string>; @Input() @InputBoolean() nzShowToday: boolean = true; @Input() nzMode: PanelMode | PanelMode[]; - @Input() nzRanges: FunctionProp; + @Input() nzRanges: PresetRanges; @Output() readonly nzOnPanelChange = new EventEmitter(); @Output() readonly nzOnCalendarChange = new EventEmitter(); diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md index 55b898a4b9d..4aa0b50daa2 100644 --- a/components/date-picker/doc/index.en-US.md +++ b/components/date-picker/doc/index.en-US.md @@ -108,7 +108,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke | `[ngModel]` | Date | `Date[]` | - | | `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date, partial: 'start'｜'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - | | `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `"yyyy-MM-dd"` | -| `[nzRanges]` | preseted ranges for quick selection | `{ [ key: string ]: Date[] }` | - | +| `[nzRanges]` | preseted ranges for quick selection | `{ [ key: string ]: Date[] } ｜ { [ key: string ]: () => Date[] }` | - | | `[nzRenderExtraFooter]` | render extra footer in panel | `TemplateRef｜string｜(() => TemplateRef｜string)` | - | | `[nzShowTime]` | to provide an additional time selection | `object｜boolean` | [TimePicker Options](/components/time-picker/en#api) | | `[nzPlaceHolder]` | placeholder of date input | `string[]` | - | diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md index ff22cdecc89..31f475ddcb7 100644 --- a/components/date-picker/doc/index.zh-CN.md +++ b/components/date-picker/doc/index.zh-CN.md @@ -108,7 +108,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd'; | `[ngModel]` | 日期 | `Date[]` | - | | `[nzDisabledTime]` | 不可选择的时间 | `(current: Date, partial: 'start'｜'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - | | `[nzFormat]` | 展示的日期格式，见`nzFormat特别说明` | `string` | `"yyyy-MM-dd"` | -| `[nzRanges]`       | 预设时间范围快捷选择 | `{ [ key: string ]: Date[] }` | - | +| `[nzRanges]` | 预设时间范围快捷选择 | `{ [ key: string ]: Date[] } ｜ { [ key: string ]: () => Date[] }` | - | | `[nzRenderExtraFooter]` | 在面板中添加额外的页脚 | `TemplateRef｜string｜(() => TemplateRef｜string)` | - | | `[nzShowTime]` | 增加时间选择功能 | `object｜boolean` | [TimePicker Options](/components/time-picker/zh#api) | | `[nzPlaceHolder]` | 输入框提示文字 | `string[]` | - | diff --git a/components/date-picker/lib/popups/date-range-popup.component.ts b/components/date-picker/lib/popups/date-range-popup.component.ts index 90dc59f0471..dece073ec59 100644 --- a/components/date-picker/lib/popups/date-range-popup.component.ts +++ b/components/date-picker/lib/popups/date-range-popup.component.ts @@ -302,8 +302,8 @@ export class DateRangePopupComponent implements OnInit, OnChanges { return null; } - onClickPresetRange(val: Date[]): void { - const value = val; + onClickPresetRange(val: PresetRanges[keyof PresetRanges]): void { + const value = typeof val === 'function' ? val() : val; this.setValue([new CandyDate(value[0]), new CandyDate(value[1])]); this.resultOk.emit(); } @@ -312,8 +312,10 @@ export class DateRangePopupComponent implements OnInit, OnChanges { this.clearHoverValue(); } - onHoverPresetRange(val: Date[]): void { - this.hoverValue = [new CandyDate(val[0]), new CandyDate(val[1])]; + onHoverPresetRange(val: PresetRanges[keyof PresetRanges]): void { + if (typeof val !== 'function') { + this.hoverValue = [new CandyDate(val[0]), new CandyDate(val[1])]; + } } getObjectKeys(obj: object): string[] { diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts index 5d802228d1b..839055bab7b 100644 --- a/components/date-picker/range-picker.component.spec.ts +++ b/components/date-picker/range-picker.component.spec.ts @@ -624,6 +624,15 @@ describe('NzRangePickerComponent', () => { fixture.detectChanges(); tick(500); expect(queryFromOverlay('.ant-calendar-picker-container')).toBeFalsy(); + + fixtureInstance.nzRanges = { Today: () => [today, today] }; + fixture.detectChanges(); + openPickerByClickTrigger(); + selector = queryFromOverlay('.ant-calendar-range-quick-selector > a'); + const nzRangesSpy = spyOn(fixtureInstance.nzRanges, 'Today'); + dispatchMouseEvent(selector, 'click'); + fixture.detectChanges(); + expect(nzRangesSpy).toHaveBeenCalled(); })); it('should custom input date range', fakeAsync(() => { diff --git a/components/date-picker/standard-types.ts b/components/date-picker/standard-types.ts index de14fe47c93..a759f2c7111 100644 --- a/components/date-picker/standard-types.ts +++ b/components/date-picker/standard-types.ts @@ -39,7 +39,7 @@ export interface SupportTimeOptions { } export interface PresetRanges { - [key: string]: Date[]; + [key: string]: Date[] | (() => Date[]); } export type PanelMode = 'decade' | 'year' | 'month' | 'date' | 'time';