feat(datePicker): #INFR-9165 support thyMode dynamically switched (#2770

)
atinc · Aug 23, 2023 · 9b4d1b7 · 9b4d1b7 · vercel · Aug 23, 2023
1 parent 1f95b3b
commit 9b4d1b7
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 29 deletions.
diff --git a/src/date-picker/abstract-picker.component.ts b/src/date-picker/abstract-picker.component.ts
@@ -50,11 +50,19 @@ const _MixinBase: Constructor<ThyHasTabIndex> & Constructor<ThyCanDisable> & typ
 export abstract class AbstractPickerComponent extends _MixinBase implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
     thyValue: CompatibleValue | null;
 
+    _panelMode: ThyPanelMode = 'date';
+
     /**
      * 模式
      * @type decade | year | month | date | week | flexible
      */
-    @Input() thyMode: ThyPanelMode = 'date';
+    @Input() set thyMode(value: ThyPanelMode) {
+        this._panelMode = value ?? 'date';
+    }
+
+    get thyMode() {
+        return this._panelMode;
+    }
 
     /**
      * 是否显示清除按钮

diff --git a/src/date-picker/abstract-picker.directive.ts b/src/date-picker/abstract-picker.directive.ts
@@ -34,12 +34,6 @@ export abstract class PickerDirective extends AbstractPickerComponent implements
 
     @Input() thyDateRender: FunctionProp<TemplateRef<Date> | string>;
 
-    /**
-     * 模式
-     * @type decade | year | month | date
-     */
-    @Input() thyMode: ThyPanelMode = 'date';
-
     panelMode: ThyPanelMode | ThyPanelMode[];
 
     /**

diff --git a/src/date-picker/base-picker.component.ts b/src/date-picker/base-picker.component.ts
@@ -24,8 +24,21 @@ export class BasePickerComponent extends AbstractPickerComponent implements OnIn
 
     panelMode: ThyPanelMode | ThyPanelMode[];
 
+    initialized: boolean;
+
     @Input() thyDateRender: FunctionProp<TemplateRef<Date> | string>;
 
+    @Input() set thyMode(value: ThyPanelMode) {
+        this._panelMode = value ?? 'date';
+        if (this.initialized) {
+            this.setDefaultTimePickerState(this._panelMode);
+        }
+    }
+
+    get thyMode() {
+        return this._panelMode;
+    }
+
     /**
      * @type EventEmitter<ThyPanelMode | ThyPanelMode[]>
      */
@@ -72,7 +85,8 @@ export class BasePickerComponent extends AbstractPickerComponent implements OnIn
 
     ngOnInit(): void {
         super.ngOnInit();
-        this.setDefaultTimePickerState();
+        this.setDefaultTimePickerState(this._panelMode);
+        this.initialized = true;
     }
 
     onValueChange(value: CompatibleValue | RangeAdvancedValue): void {
@@ -84,23 +98,22 @@ export class BasePickerComponent extends AbstractPickerComponent implements OnIn
     }
 
     // Displays the time directly when the time must be displayed by default
-    setDefaultTimePickerState() {
-        this.thyMode = this.thyMode || 'date';
+    setDefaultTimePickerState(value: ThyPanelMode) {
         this.withTime = this.thyMustShowTime;
         if (this.isRange) {
-            this.panelMode = this.flexible ? ['date', 'date'] : [this.thyMode, this.thyMode];
+            this.panelMode = this.flexible ? ['date', 'date'] : [value, value];
         } else {
-            this.panelMode = this.thyMode;
+            this.panelMode = value;
         }
-        this.showWeek = this.thyMode === 'week';
+        this.showWeek = value === 'week';
         if (!this.thyFormat) {
             const inputFormats: { [key in ThyPanelMode]?: string } = {
                 year: 'yyyy',
                 month: 'yyyy-MM',
                 week: 'yyyy-ww周',
                 date: this.thyShowTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'
             };
-            this.thyFormat = this.flexible ? inputFormats['date'] : inputFormats[this.thyMode];
+            this.thyFormat = this.flexible ? inputFormats['date'] : inputFormats[value];
         }
     }
 

diff --git a/src/date-picker/month-picker.component.ts b/src/date-picker/month-picker.component.ts
@@ -6,7 +6,6 @@ import { NgIf } from '@angular/common';
 import { BasePickerComponent } from './base-picker.component';
 import { DatePopupComponent } from './lib/popups/date-popup.component';
 import { ThyPickerComponent } from './picker.component';
-import { ThyPanelMode } from './standard-types';
 
 /**
  * 月份选择组件
@@ -34,12 +33,11 @@ export class ThyMonthPickerComponent extends BasePickerComponent {
      */
     @Input() thyFormat = 'yyyy-MM';
 
-    thyMode: ThyPanelMode = 'month';
-
     private hostRenderer = useHostRenderer();
 
     constructor(cdr: ChangeDetectorRef, protected element: ElementRef) {
         super(cdr, element);
         this.hostRenderer.addClass('thy-calendar-picker');
+        this.thyMode = 'month';
     }
 }
diff --git a/src/date-picker/picker.util.ts b/src/date-picker/picker.util.ts
@@ -110,7 +110,7 @@ export function hasValue(value: CompatibleValue): boolean {
 
 export function makeValue(value: CompatibleDate | null, isRange: boolean = false): CompatibleValue {
     if (isRange) {
-        return value ? (value as Date[]).map(val => new TinyDate(val)) : [];
+        return Array.isArray(value) ? (value as Date[]).map(val => new TinyDate(val)) : [];
     } else {
         return value ? new TinyDate(value as Date) : null;
     }

diff --git a/src/date-picker/range-picker.component.spec.ts b/src/date-picker/range-picker.component.spec.ts
@@ -849,6 +849,43 @@ describe('ThyRangePickerComponent', () => {
         }));
     });
 
+    describe('switch thyMode', () => {
+        beforeEach(() => {
+            fixtureInstance.useSuite = 1;
+        });
+
+        it('should get correct default thyMode', fakeAsync(() => {
+            fixture.detectChanges();
+            openPickerByClickTrigger();
+            expect(queryFromOverlay('.thy-calendar-picker-inner-popup').firstElementChild.className).toBeFalsy();
+        }));
+
+        it(`should set thyMode to week`, fakeAsync(() => {
+            fixture.detectChanges();
+            fixtureInstance.thyMode = 'week';
+            fixture.detectChanges();
+            openPickerByClickTrigger();
+            expect(queryFromOverlay('.thy-calendar-picker-inner-popup').firstElementChild.className).toBeFalsy();
+            expect(queryFromOverlay('.thy-calendar-week-number-header')).toBeTruthy();
+        }));
+
+        it(`should set thyMode to month`, fakeAsync(() => {
+            fixture.detectChanges();
+            fixtureInstance.thyMode = 'month';
+            fixture.detectChanges();
+            openPickerByClickTrigger();
+            expect(queryFromOverlay('.thy-calendar-picker-inner-popup').firstElementChild.className).toEqual('thy-calendar-month');
+        }));
+
+        it(`should set thyMode to decade`, fakeAsync(() => {
+            fixture.detectChanges();
+            fixtureInstance.thyMode = 'decade';
+            fixture.detectChanges();
+            openPickerByClickTrigger();
+            expect(queryFromOverlay('.thy-calendar-picker-inner-popup').firstElementChild.className).toEqual('thy-calendar-decade');
+        }));
+    });
+
     function getPickerTrigger(): HTMLInputElement {
         return debugElement.query(By.css('thy-picker .thy-calendar-picker-input')).nativeElement as HTMLInputElement;
     }

diff --git a/src/date-picker/range-picker.component.ts b/src/date-picker/range-picker.component.ts
@@ -1,4 +1,4 @@
-import { ThyPanelMode, ThyShortcutPreset, ThyShortcutRange } from './standard-types';
+import { ThyShortcutPreset, ThyShortcutRange } from './standard-types';
 import { forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, Input } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -34,12 +34,6 @@ export class ThyRangePickerComponent extends BasePickerComponent implements OnIn
 
     private hostRenderer = useHostRenderer();
 
-    /**
-     * 支持的选区间模式
-     * @type  year | month | date
-     */
-    @Input() thyMode: ThyPanelMode = 'date';
-
     /**
      * 已废弃，请使用 thyShortcutPresets
      * @deprecated

diff --git a/src/date-picker/week-picker.component.ts b/src/date-picker/week-picker.component.ts
@@ -3,7 +3,6 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { useHostRenderer } from '@tethys/cdk/dom';
 
 import { BasePickerComponent } from './base-picker.component';
-import { ThyPanelMode } from './standard-types';
 import { DatePopupComponent } from './lib/popups/date-popup.component';
 import { NgIf } from '@angular/common';
 import { ThyPickerComponent } from './picker.component';
@@ -30,12 +29,12 @@ import { ThyPickerComponent } from './picker.component';
 })
 export class ThyWeekPickerComponent extends BasePickerComponent {
     showWeek = true;
-    thyMode: ThyPanelMode = 'week';
 
     private hostRenderer = useHostRenderer();
 
     constructor(cdr: ChangeDetectorRef, protected elementRef: ElementRef) {
         super(cdr, elementRef);
         this.hostRenderer.addClass('thy-calendar-picker');
+        this.thyMode = 'week';
     }
 }
diff --git a/src/date-picker/year-picker.component.ts b/src/date-picker/year-picker.component.ts
@@ -35,8 +35,6 @@ export class ThyYearPickerComponent extends BasePickerComponent {
      */
     @Input() thyFormat = 'yyyy';
 
-    thyMode: ThyPanelMode = 'year';
-
     isRange = false;
 
     endPanelMode: ThyPanelMode = 'year';
@@ -46,5 +44,6 @@ export class ThyYearPickerComponent extends BasePickerComponent {
     constructor(cdr: ChangeDetectorRef, protected elementRef: ElementRef) {
         super(cdr, elementRef);
         this.hostRenderer.addClass('thy-calendar-picker');
+        this.thyMode = 'year';
     }
 }