feat(date-picker): add event thyDateChange and deprecated shortcutVal…

…ueChange
atinc · Oct 25, 2023 · 4745832 · 4745832
1 parent da6ef88
commit 4745832
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 7 deletions.
diff --git a/src/date-picker/abstract-picker.component.ts b/src/date-picker/abstract-picker.component.ts
@@ -28,7 +28,8 @@ import {
     ThyShortcutPosition,
     CompatiblePresets,
     ThyShortcutValueChange,
-    ThyDateGranularity
+    ThyDateGranularity,
+    ThyDateChangeEvent
 } from './standard-types';
 
 /**
@@ -158,8 +159,17 @@ export abstract class AbstractPickerComponent
         this.shortcutPresets = presets;
     }
 
+    /**
+     * 已废弃，请使用 thyDateChange
+     * @deprecated please use thyDateChange
+     */
     @Output() readonly thyShortcutValueChange = new EventEmitter<ThyShortcutValueChange>();
 
+    /**
+     * 日期变化的回调
+     */
+    @Output() readonly thyDateChange = new EventEmitter<ThyDateChangeEvent>();
+
     @Output() readonly thyOpenChange = new EventEmitter<boolean>();
 
     @ViewChild(ThyPickerComponent, { static: true }) public picker: ThyPickerComponent;
@@ -222,6 +232,10 @@ export abstract class AbstractPickerComponent
         this.thyShortcutValueChange.emit(event);
     }
 
+    onDateValueChange(event: ThyDateChangeEvent) {
+        this.thyDateChange.emit(event);
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.thyPlaceHolder && changes.thyPlaceHolder.firstChange && typeof this.thyPlaceHolder !== 'undefined') {
             this.isCustomPlaceHolder = true;

diff --git a/src/date-picker/abstract-picker.directive.ts b/src/date-picker/abstract-picker.directive.ts
@@ -22,8 +22,9 @@ import {
 
 import { AbstractPickerComponent } from './abstract-picker.component';
 import { DatePopupComponent } from './lib/popups/date-popup.component';
-import { ThyPanelMode, ThyShortcutValueChange } from './standard-types';
+import { ThyDateChangeEvent, ThyPanelMode, ThyShortcutValueChange } from './standard-types';
 import { CompatibleValue } from './inner-types';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * @private
@@ -117,6 +118,8 @@ export abstract class PickerDirective extends AbstractPickerComponent implements
         mapTo(true)
     );
 
+    takeUntilDestroyed = takeUntilDestroyed();
+
     ngOnInit() {
         this.getInitialState();
     }
@@ -184,6 +187,9 @@ export abstract class PickerDirective extends AbstractPickerComponent implements
             componentInstance.shortcutValueChange?.pipe(takeUntil(this.destroy$)).subscribe((event: ThyShortcutValueChange) => {
                 this.thyShortcutValueChange.emit(event);
             });
+            componentInstance.dateValueChange?.pipe(this.takeUntilDestroyed).subscribe((event: ThyDateChangeEvent) => {
+                this.thyDateChange.emit(event);
+            });
             popoverRef
                 .afterOpened()
                 .pipe(takeUntil(this.destroy$))

diff --git a/src/date-picker/base-picker.component.html b/src/date-picker/base-picker.component.html
@@ -43,6 +43,7 @@
     [shortcutPresets]="shortcutPresets"
     [shortcutPosition]="shortcutPosition"
     (shortcutValueChange)="onShortcutValueChange($event)"
+    (dateValueChange)="onDateValueChange($event)"
     [className]="thyPanelClassName"
     (resultOk)="onResultOk()"
   ></date-popup>

diff --git a/src/date-picker/lib/popups/date-popup.component.ts b/src/date-picker/lib/popups/date-popup.component.ts
@@ -26,6 +26,7 @@ import {
     CompatiblePresets,
     DisabledDateFn,
     SupportTimeOptions,
+    ThyDateChangeEvent,
     ThyDateGranularity,
     ThyPanelMode,
     ThyShortcutPosition,
@@ -101,7 +102,11 @@ export class DatePopupComponent implements OnChanges, OnInit {
     @Output() readonly valueChange = new EventEmitter<CompatibleValue | RangeAdvancedValue>();
     @Output() readonly resultOk = new EventEmitter<void>(); // Emitted when done with date selecting
     @Output() readonly showTimePickerChange = new EventEmitter<boolean>();
+    /**
+     * @deprecated
+     */
     @Output() readonly shortcutValueChange = new EventEmitter<ThyShortcutValueChange>();
+    @Output() readonly dateValueChange = new EventEmitter<ThyDateChangeEvent>();
 
     prefixCls = 'thy-calendar';
     showTimePicker = false;
@@ -364,6 +369,9 @@ export class DatePopupComponent implements OnChanges, OnInit {
         this.valueChange.emit(value);
         // clear custom date when select a advanced date
         this.selectedValue = [];
+        this.dateValueChange.emit({
+            value: [value.begin, value.end]
+        });
     }
 
     changeValueFromSelect(value: TinyDate, partType?: RangePartType): void {
@@ -393,10 +401,16 @@ export class DatePopupComponent implements OnChanges, OnInit {
                 );
                 this.setValue(this.cloneRangeDate(this.selectedValue));
                 this.calendarChange.emit(this.cloneRangeDate(this.selectedValue));
+                this.dateValueChange.emit({
+                    value: this.cloneRangeDate(this.selectedValue)
+                });
             }
         } else {
             const updatedValue = this.updateHourMinute(value);
             this.setValue(updatedValue);
+            this.dateValueChange.emit({
+                value: updatedValue
+            });
         }
     }
 
@@ -604,6 +618,10 @@ export class DatePopupComponent implements OnChanges, OnInit {
             triggerPresets: shortcutPresets
         });
         this.setValue(selectedPresetValue);
+        this.dateValueChange.emit({
+            value: helpers.isArray(value) ? this.selectedValue : selectedPresetValue,
+            triggerPresets: shortcutPresets
+        });
     }
 
     public trackByFn(index: number) {

diff --git a/src/date-picker/range-picker.component.spec.ts b/src/date-picker/range-picker.component.spec.ts
@@ -452,6 +452,62 @@ describe('ThyRangePickerComponent', () => {
             expect(thyShortcutValueChange).toHaveBeenCalledBefore(thyModelChange);
         }));
 
+        it('should support thyDateChange', fakeAsync(() => {
+            fixtureInstance.thyShowShortcut = true;
+            let rangePresets = shortcutRangesPresets();
+            const triggerPresets = Object.assign(rangePresets[0], { disabled: false });
+            const thyDateChange = spyOn(fixtureInstance, 'thyDateChange');
+            fixture.detectChanges();
+            openPickerByClickTrigger();
+            const shortcutItems = overlayContainerElement.querySelectorAll('.thy-calendar-picker-shortcut-item');
+            dispatchMouseEvent(shortcutItems[0], 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            expect(thyDateChange).toHaveBeenCalled();
+            expect(thyDateChange).toHaveBeenCalledWith({
+                value: [new TinyDate(new TinyDate().startOfDay().getTime() - 3600 * 1000 * 24 * 6), new TinyDate().endOfDay()],
+                triggerPresets: triggerPresets
+            });
+        }));
+
+        it('should emit thyDateChange after', fakeAsync(() => {
+            fixtureInstance.thyShowShortcut = true;
+            const thyDateChange = spyOn(fixtureInstance, 'thyDateChange');
+            const thyModelChange = spyOn(fixtureInstance, 'modelValueChange');
+            fixture.detectChanges();
+            openPickerByClickTrigger();
+            const shortcutItems = overlayContainerElement.querySelectorAll('.thy-calendar-picker-shortcut-item');
+            dispatchMouseEvent(shortcutItems[0], 'click');
+            fixture.detectChanges();
+            tick(500);
+            expect(thyModelChange).toHaveBeenCalledBefore(thyDateChange);
+        }));
+
+        it('should thyDateChange triggerPresets null when manual select', fakeAsync(() => {
+            fixtureInstance.modelValue = { begin: new Date('2023-10-25'), end: new Date('2023-10-25') };
+            const thyDateChange = spyOn(fixtureInstance, 'thyDateChange');
+            fixture.detectChanges();
+            openPickerByClickTrigger();
+            const left = getFirstCell('left');
+            dispatchMouseEvent(left, 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            const right = getFirstCell('right');
+            dispatchMouseEvent(right, 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            expect(thyDateChange).toHaveBeenCalled();
+            expect(thyDateChange).toHaveBeenCalledWith({
+                value: [
+                    new TinyDate(fromUnixTime(fixtureInstance.modelValue.begin as number)).startOfDay(),
+                    new TinyDate(fromUnixTime(fixtureInstance.modelValue.end as number)).endOfDay()
+                ]
+            });
+        }));
+
         it('should default shortcut the last 30 days worked', fakeAsync(() => {
             fixtureInstance.thyShowShortcut = true;
             fixture.detectChanges();
@@ -970,6 +1026,7 @@ describe('ThyRangePickerComponent', () => {
                 (ngModelChange)="modelValueChange($event)"
                 (thyOnPanelChange)="thyOnPanelChange($event)"
                 (thyOnCalendarChange)="thyOnCalendarChange($event)"
+                (thyDateChange)="thyDateChange($event)"
                 (thyShortcutValueChange)="thyShortcutValueChange($event)"></thy-range-picker>
             <ng-template #tplDateRender let-current>
                 <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
@@ -1019,4 +1076,5 @@ class ThyTestRangePickerComponent {
     thyOnCalendarChange(): void {}
     thyShortcutValueChange(): void {}
     thyOnOk(): void {}
+    thyDateChange(): void {}
 }
diff --git a/src/date-picker/range-picker.directive.spec.ts b/src/date-picker/range-picker.directive.spec.ts
@@ -1,4 +1,4 @@
-import { endOfDay, startOfDay } from 'date-fns';
+import { endOfDay, startOfDay, subDays } from 'date-fns';
 import { dispatchMouseEvent } from 'ngx-tethys/testing';
 
 import { OverlayContainer } from '@angular/cdk/overlay';
@@ -13,6 +13,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ThyDatePickerModule } from './date-picker.module';
 import { ThyPropertyOperationComponent, ThyPropertyOperationModule } from 'ngx-tethys/property-operation';
 import { CompatiblePresets, ThyDateRangeEntry, ThyShortcutPosition, ThyShortcutRange } from './standard-types';
+import { TinyDate } from 'ngx-tethys/util';
 
 registerLocaleData(zh);
 
@@ -161,6 +162,31 @@ describe('ThyRangePickerDirective', () => {
             expect(queryFromOverlay('.thy-calendar-week-number')).toBeTruthy();
         }));
 
+        it('should support thyDateChange', fakeAsync(() => {
+            fixtureInstance.thyShowShortcut = true;
+            fixtureInstance.thyShortcutPresets = [
+                {
+                    title: '最近 7 天',
+                    value: [new TinyDate(subDays(new Date(), 6)).getTime(), new TinyDate().endOfDay().getTime()]
+                }
+            ];
+            const triggerPresets = Object.assign(fixtureInstance.thyShortcutPresets[0], { disabled: false });
+            const thyDateChange = spyOn(fixtureInstance, 'thyDateChange');
+            fixture.detectChanges();
+            dispatchClickEvent(getPickerTriggerWrapper());
+            fixture.detectChanges();
+            const shortcutItems = overlayContainerElement.querySelectorAll('.thy-calendar-picker-shortcut-item');
+            dispatchMouseEvent(shortcutItems[0], 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            expect(thyDateChange).toHaveBeenCalled();
+            expect(thyDateChange).toHaveBeenCalledWith({
+                value: [new TinyDate(new TinyDate().startOfDay().getTime() - 3600 * 1000 * 24 * 6), new TinyDate().endOfDay()],
+                triggerPresets: triggerPresets
+            });
+        }));
+
         function queryFromOverlay(selector: string): HTMLElement {
             return overlayContainerElement.querySelector(selector) as HTMLElement;
         }
@@ -194,6 +220,7 @@ describe('ThyRangePickerDirective', () => {
             [thyShortcutRanges]="thyShortcutRanges"
             [thyMode]="mode"
             (thyOnCalendarChange)="thyOnCalendarChange($event)"
+            (thyDateChange)="thyDateChange($event)"
             (thyOpenChange)="thyOpenChange($event)"></thy-property-operation>
     `
 })
@@ -206,4 +233,5 @@ class ThyTestRangePickerComponent {
     mode: string;
     thyOpenChange(): void {}
     thyOnCalendarChange(): void {}
+    thyDateChange(): void {}
 }
diff --git a/src/date-picker/standard-types.ts b/src/date-picker/standard-types.ts
@@ -55,11 +55,19 @@ export interface ThyShortcutPreset {
     disabled?: boolean;
 }
 
+/**
+ * @deprecated
+ */
 export interface ThyShortcutValueChange {
     value: CompatibleValue;
     triggerPresets: ThyShortcutPreset;
 }
 
+export interface ThyDateChangeEvent {
+    value: CompatibleValue;
+    triggerPresets?: ThyShortcutPreset;
+}
+
 /**
  * @deprecated please use ThyPanelMode
  */

diff --git a/src/date-picker/week-picker.component.spec.ts b/src/date-picker/week-picker.component.spec.ts
@@ -5,10 +5,11 @@ import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { getWeekOfMonth } from 'date-fns';
+import { fromUnixTime, getWeekOfMonth } from 'date-fns';
 import { dispatchFakeEvent, dispatchMouseEvent } from 'ngx-tethys/testing';
 
 import { ThyDatePickerModule } from './date-picker.module';
+import { TinyDate } from 'ngx-tethys/util';
 
 registerLocaleData(zh);
 
@@ -105,6 +106,21 @@ describe('ThyWeekPickerComponent', () => {
             expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
         });
 
+        it('should support thyDateChange', fakeAsync(() => {
+            const thyDateChange = spyOn(fixtureInstance, 'thyDateChange');
+            fixture.detectChanges();
+            dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            const week = queryFromOverlay(`tbody.thy-calendar-tbody td.thy-calendar-cell`);
+            dispatchMouseEvent(week, 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            expect(thyDateChange).toHaveBeenCalled();
+        }));
+
         it('should has active class', fakeAsync(() => {
             fixtureInstance.thyValue = new Date();
             fixture.detectChanges();
@@ -139,14 +155,15 @@ describe('ThyWeekPickerComponent', () => {
 
 @Component({
     template: `
-        <thy-week-picker
+        <thy-date-picker
             class="d-block w-50 mb-3"
             [(ngModel)]="thyValue"
             (ngModelChange)="modelValueChange($event)"
             [thyAllowClear]="thyAllowClear"
             [thyDisabled]="thyDisabled"
-            [thyPlaceHolder]="thyPlaceHolder">
-        </thy-week-picker>
+            (thyDateChange)="thyDateChange($event)"
+            [thyPlaceHolder]="thyPlaceHolder"
+            [thyMode]="'week'"></thy-date-picker>
     `
 })
 class TestWeekPickerComponent {
@@ -155,4 +172,5 @@ class TestWeekPickerComponent {
     thyPlaceHolder: string = '请选择周';
     thyValue: Date;
     modelValueChange(): void {}
+    thyDateChange(): void {}
 }
diff --git a/src/date-picker/year-picker.component.spec.ts b/src/date-picker/year-picker.component.spec.ts
@@ -8,6 +8,8 @@ import { By } from '@angular/platform-browser';
 import { createFakeEvent, dispatchMouseEvent } from 'ngx-tethys/testing';
 
 import { ThyDatePickerModule } from './date-picker.module';
+import { TinyDate } from 'ngx-tethys/util';
+import { fromUnixTime } from 'date-fns';
 
 registerLocaleData(zh);
 
@@ -138,6 +140,24 @@ describe('ThyYearPickerComponent', () => {
             const result = thyOnChange.calls.allArgs()[0][0];
             expect(new Date(result * 1000).getFullYear()).toBe(parseInt(cellText));
         }));
+
+        it('should support thyDateChange', fakeAsync(() => {
+            const thyDateChange = spyOn(fixtureInstance, 'thyDateChange');
+            fixture.detectChanges();
+            dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            const year = queryFromOverlay(`tbody.thy-calendar-year-panel-tbody td.thy-calendar-year-panel-cell`);
+            dispatchMouseEvent(year, 'click');
+            fixture.detectChanges();
+            tick(500);
+            fixture.detectChanges();
+            expect(thyDateChange).toHaveBeenCalled();
+            // expect(thyDateChange).toHaveBeenCalledWith({
+            //     value: new TinyDate(fromUnixTime(fixtureInstance.thyValue as any))
+            // })
+        }));
     }); // /general api testing
 
     describe('panel switch and move forward/afterward', () => {
@@ -241,6 +261,7 @@ describe('ThyYearPickerComponent', () => {
             [thyAllowClear]="thyAllowClear"
             [thyDisabled]="thyDisabled"
             [thyDisabledDate]="thyDisabledDate"
+            (thyDateChange)="thyDateChange($event)"
             [thyPlaceHolder]="thyPlaceHolder">
         </thy-year-picker>
     `
@@ -254,4 +275,5 @@ class TestYearPickerComponent {
     thyValue: Date;
     thyOpen: boolean;
     modelValueChange(): void {}
+    thyDateChange(): void {}
 }