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
NG-ZORRO · Apr 19, 2019 · a231cb5 · a231cb5
1 parent 663169f
commit a231cb5
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git 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<TemplateRef<void> | string>;
   @Input() @InputBoolean() nzShowToday: boolean = true;
   @Input() nzMode: PanelMode | PanelMode[];
-  @Input() nzRanges: FunctionProp<PresetRanges>;
+  @Input() nzRanges: PresetRanges;
   @Output() readonly nzOnPanelChange = new EventEmitter<PanelMode | PanelMode[]>();
   @Output() readonly nzOnCalendarChange = new EventEmitter<Date[]>();
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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';