Merge branch 'master' into cmq/fix-#INFR-10604

atinc · Nov 24, 2023 · f78fc1d · f78fc1d
2 parents 4df804a + 4c9f17a
commit f78fc1d
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 25 deletions.
diff --git a/src/anchor/style/anchor.scss b/src/anchor/style/anchor.scss
@@ -40,9 +40,11 @@ $anchor-border-width: 2px;
         }
         &-horizontal {
             position: relative;
+            padding: 0;
 
             .thy-anchor {
                 display: flex;
+                padding: 0;
                 overflow-x: auto;
                 scrollbar-width: none;
 
@@ -57,7 +59,7 @@ $anchor-border-width: 2px;
                         position: relative;
                         display: block;
                         width: 100%;
-                        height: $anchor-border-width;
+                        height: 1px;
                         margin: 0 auto;
                         background-color: variables.$nav-border-color;
                         content: ' ';
@@ -70,9 +72,13 @@ $anchor-border-width: 2px;
                         transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
                     }
                 }
-                &-link-title {
-                    padding-left: 8px;
-                    padding-right: 8px;
+                &-link {
+                    padding-left: 20px;
+
+                    &-title {
+                        padding: 13px 12px;
+                        color: variables.$gray-800;
+                    }
                 }
             }
         }

diff --git a/src/date-picker/base-picker.component.ts b/src/date-picker/base-picker.component.ts
@@ -18,7 +18,7 @@ import { AbstractPickerComponent } from './abstract-picker.component';
 import { CompatibleValue, RangeAdvancedValue } from './inner-types';
 import { CompatibleDate, ThyPanelMode } from './standard-types';
 import { ThyPickerComponent } from './picker.component';
-import { isValidDateString, parseFormatDate, transformDateValue } from './picker.util';
+import { hasTimeInStringDate, isValidStringDate, parseStringDate, transformDateValue } from './picker.util';
 
 /**
  * @private
@@ -124,14 +124,14 @@ export class BasePickerComponent extends AbstractPickerComponent implements OnIn
             return;
         }
         let value = formatDate as string;
-        const valueValid = isValidDateString(value);
-        const valueLimitValid = valueValid ? this.isValidDateLimit(parseFormatDate(value)) : false;
+        const valueValid = isValidStringDate(value);
+        const valueLimitValid = valueValid ? this.isValidDateLimit(parseStringDate(value)) : false;
         if (valueValid && valueLimitValid) {
             this.innerPreviousDate = value;
         } else {
             value = this.innerPreviousDate;
         }
-        const tinyDate = value ? parseFormatDate(value) : null;
+        const tinyDate = value ? (this.thyShowTime ? parseStringDate(value) : parseStringDate(value).startOfDay()) : null;
         this.restoreTimePickerState(tinyDate);
         super.onValueChange(tinyDate);
     }
@@ -213,8 +213,11 @@ export class BasePickerComponent extends AbstractPickerComponent implements OnIn
     }
 
     onInputDate(value: string) {
-        if (value && isValidDateString(value)) {
-            this.thyValue = parseFormatDate(value);
+        if (value && isValidStringDate(value)) {
+            if (this.thyShowTime) {
+                this.withTime = hasTimeInStringDate(value);
+            }
+            this.thyValue = parseStringDate(value);
         }
     }
 

diff --git a/src/date-picker/date-picker.component.spec.ts b/src/date-picker/date-picker.component.spec.ts
@@ -1016,6 +1016,7 @@ describe('ThyDatePickerComponent', () => {
 
         it('should input value assessable', fakeAsync(() => {
             fixtureInstance.thyFormat = 'yyyy-MM-dd hh:mm:ss';
+            fixtureInstance.thyShowTime = true;
             fixture.detectChanges();
             const onChange = spyOn(fixtureInstance, 'thyOnChange');
             openPickerByClickTrigger();
@@ -1042,6 +1043,7 @@ describe('ThyDatePickerComponent', () => {
             fixture.detectChanges();
             const onChange = spyOn(fixtureInstance, 'thyOnChange');
             fixtureInstance.thyFormat = 'yyyy年MM月dd hh时mm分ss秒';
+            fixtureInstance.thyShowTime = true;
             fixture.detectChanges();
             openPickerByClickTrigger();
             const input = getPickerTrigger();
@@ -1059,6 +1061,61 @@ describe('ThyDatePickerComponent', () => {
             expect(onChange).toHaveBeenCalledWith(new TinyDate(new Date('2023-11-01 08:00')).getUnixTime());
         }));
 
+        it('should return startOfDay when thyShowTime false', fakeAsync(() => {
+            fixtureInstance.thyFormat = 'yyyy-MM-dd hh:mm:ss';
+            fixtureInstance.thyShowTime = false;
+            fixture.detectChanges();
+            const onChange = spyOn(fixtureInstance, 'thyOnChange');
+            openPickerByClickTrigger();
+            const input = getPickerTrigger();
+            input.value = '2023-11-01 08:00';
+            input.dispatchEvent(new Event('input'));
+            dispatchKeyboardEvent(input, 'keydown', ENTER);
+            flush();
+            fixture.detectChanges();
+            take(500);
+            fixture.detectChanges();
+            expect(onChange).toHaveBeenCalled();
+            expect(onChange).toHaveBeenCalledWith(new TinyDate('2023-11-01 00:00').getUnixTime());
+            flush();
+        }));
+
+        it('should withtime when input formatdate has time', fakeAsync(() => {
+            fixtureInstance.thyShowTime = true;
+            fixtureInstance.thyValue = { date: new Date(), with_time: 0 };
+            fixture.detectChanges();
+            const onChange = spyOn(fixtureInstance, 'thyOnChange');
+            openPickerByClickTrigger();
+            const input = getPickerTrigger();
+            input.value = '2023-11-01 08:00';
+            input.dispatchEvent(new Event('input'));
+            dispatchKeyboardEvent(input, 'keydown', ENTER);
+            flush();
+            fixture.detectChanges();
+            take(500);
+            fixture.detectChanges();
+            expect(onChange).toHaveBeenCalled();
+            expect(onChange).toHaveBeenCalledWith({
+                date: new TinyDate('2023-11-01 08:00').getUnixTime(),
+                with_time: 1
+            });
+            flush();
+
+            input.value = '2023-11-01';
+            input.dispatchEvent(new Event('input'));
+            dispatchKeyboardEvent(input, 'keydown', ENTER);
+            flush();
+            fixture.detectChanges();
+            take(500);
+            fixture.detectChanges();
+            expect(onChange).toHaveBeenCalled();
+            expect(onChange).toHaveBeenCalledWith({
+                date: new TinyDate('2023-11-01 00:00').getUnixTime(),
+                with_time: 0
+            });
+            flush();
+        }));
+
         it('should allow input format date', fakeAsync(() => {
             fixture.detectChanges();
             fixture.detectChanges();

diff --git a/src/date-picker/lib/calendar/calendar-footer.component.ts b/src/date-picker/lib/calendar/calendar-footer.component.ts
@@ -1,4 +1,15 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ElementRef, ViewContainerRef, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    ElementRef,
+    ViewContainerRef,
+    OnInit,
+    OnChanges,
+    SimpleChanges
+} from '@angular/core';
 
 import { TinyDate } from 'ngx-tethys/util';
 import { ThyButtonComponent } from 'ngx-tethys/button';
@@ -20,7 +31,7 @@ import { InputBoolean } from 'ngx-tethys/core';
     standalone: true,
     imports: [NgIf, ThyIconComponent, ThyInnerTimePickerComponent, FormsModule, ThyButtonComponent]
 })
-export class CalendarFooterComponent implements OnInit {
+export class CalendarFooterComponent implements OnInit, OnChanges {
     @Input() showTime = false;
     @Input() mustShowTime = false;
     @Input() value: TinyDate;
@@ -40,6 +51,12 @@ export class CalendarFooterComponent implements OnInit {
         }
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.mustShowTime) {
+            this._initTimeShowMode();
+        }
+    }
+
     onSelectTime(date: Date): void {
         this.selectTime.emit(new TinyDate(date));
     }

diff --git a/src/date-picker/picker.component.ts b/src/date-picker/picker.component.ts
@@ -22,7 +22,6 @@ import { CompatibleValue, RangePartType } from './inner-types';
 import { getFlexibleAdvancedReadableValue } from './picker.util';
 import { ThyDateGranularity } from './standard-types';
 import { ThyEnterDirective } from 'ngx-tethys/shared';
-import { BehaviorSubject } from 'rxjs';
 
 /**
  * @private
@@ -139,6 +138,7 @@ export class ThyPickerComponent implements AfterViewInit {
     }
 
     onBlur(event: FocusEvent) {
+        this.blur.emit(event);
         if (this.entering) {
             this.valueChange.emit(this.pickerInput.nativeElement.value);
         }

diff --git a/src/date-picker/picker.util.ts b/src/date-picker/picker.util.ts
@@ -203,16 +203,26 @@ export function getShortcutValue(value: ThyShortcutValue): number | Date {
     return helpers.isFunction(value) ? value() : value;
 }
 
-export function isValidDateString(dateStr: string): boolean {
-    const parseDate = parseFormatDate(dateStr).nativeDate.getTime();
+export function isValidStringDate(dateStr: string): boolean {
+    const parseDate = parseStringDate(dateStr).nativeDate.getTime();
     return !(parseDate < 0 || isNaN(parseDate));
 }
 
-export function parseFormatDate(dateStr: string): TinyDate {
+export function parseStringDate(dateStr: string): TinyDate {
+    return hasTimeInStringDate(dateStr) ? new TinyDate(fixStringDate(dateStr)) : new TinyDate(fixStringDate(dateStr)).startOfDay();
+}
+
+export function hasTimeInStringDate(dateStr: string): boolean {
+    const formatDate = fixStringDate(dateStr);
+    const timeRegex = /(\d{1,2}:\d{1,2}(:\d{1,2})?)|(^\d{1,2}时\d{1,2}分(\d{1,2}秒)?)$/;
+    return timeRegex.test(formatDate);
+}
+
+function fixStringDate(dateStr: string) {
     let replacedStr = dateStr.replace(/[^0-9\s.,:]/g, '-').replace('- ', ' ');
     const hasYear = /\d{4}/.test(replacedStr);
     if (!hasYear || replacedStr.length < 'yyyy.M.d'.length) {
         replacedStr = `${new TinyDate(new Date()).getYear()}-${replacedStr}`;
     }
-    return new TinyDate(replacedStr);
+    return replacedStr;
 }
diff --git a/src/switch/examples/disabled/disabled.component.html b/src/switch/examples/disabled/disabled.component.html
@@ -1 +1,3 @@
 <thy-switch [thyDisabled]="true" [(ngModel)]="isChecked"></thy-switch>
+
+<thy-switch disabled [(ngModel)]="isChecked" class="ml-4"></thy-switch>
diff --git a/src/switch/switch.component.ts b/src/switch/switch.component.ts
@@ -57,6 +57,8 @@ export class ThySwitchComponent extends TabIndexDisabledControlValueAccessorMixi
 
     private initialized = false;
 
+    private isDisabledFirstChange = true;
+
     @ViewChild('switch', { static: true }) switchElementRef: ElementRef;
 
     /**
@@ -135,8 +137,9 @@ export class ThySwitchComponent extends TabIndexDisabledControlValueAccessorMixi
         this.onModelTouched = fn;
     }
 
-    setDisabledState(isDisabled: boolean) {
-        this.disabled = isDisabled;
+    setDisabledState(isDisabled: boolean): void {
+        this.disabled = (this.isDisabledFirstChange && this.thyDisabled) || isDisabled;
+        this.isDisabledFirstChange = false;
         this.setClassNames();
     }
 

diff --git a/src/switch/test/switch.component.spec.ts b/src/switch/test/switch.component.spec.ts
@@ -1,18 +1,20 @@
 import { Component, DebugElement } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ThySwitchComponent } from '../switch.component';
 import { ThySwitchModule } from '../switch.module';
 
 @Component({
     selector: 'thy-switch-test',
-    template: ` <thy-switch [thySize]="size" [thyType]="type" [thyDisabled]="isDisabled"></thy-switch> `
+    template: `<thy-switch [thySize]="size" [thyType]="type" [thyDisabled]="isDisabled" [(ngModel)]="isChecked"></thy-switch>
+        <thy-switch disabled [(ngModel)]="isChecked"></thy-switch>`
 })
 class SwitchTestComponent {
     size = ``;
     type = ``;
     isDisabled: boolean;
+    isChecked: boolean;
 }
 
 describe('switch component', () => {
@@ -106,4 +108,14 @@ describe('switch component', () => {
         fixture.detectChanges();
         expect(label.getAttribute('tabindex')).toBe('0');
     });
+
+    it('should have correct class when set disabled attribute', fakeAsync(() => {
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+        const disabledSwitch = fixture.debugElement.queryAll(By.directive(ThySwitchComponent))[1];
+        const disabledSwitchElement = disabledSwitch.nativeElement;
+        labelNode = disabledSwitchElement.children[0];
+        expect(labelNode.classList.contains('thy-switch-disabled')).toBeTruthy();
+    }));
 });
diff --git a/src/time-picker/test/time-picker.component.spec.ts b/src/time-picker/test/time-picker.component.spec.ts
@@ -425,7 +425,6 @@ describe('ThyTimePickerComponent', () => {
             [thySize]="size"
             [thyFormat]="format"
             [thyBackdrop]="backdrop"
-            [disabled]="disabled"
             [thyDisabled]="disabled"
             [thyReadonly]="readonly"
             [thyHourStep]="hourStep"

diff --git a/src/time-picker/time-picker.component.ts b/src/time-picker/time-picker.component.ts
@@ -15,7 +15,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { isValid } from 'date-fns';
 import { getFlexiblePositions, InputBoolean, ThyPlacement } from 'ngx-tethys/core';
-import { TinyDate } from 'ngx-tethys/util';
+import { TinyDate, coerceBooleanProperty } from 'ngx-tethys/util';
 import { ThyTimePanelComponent } from './time-picker-panel.component';
 import { ThyIconComponent } from 'ngx-tethys/icon';
 import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common';
@@ -132,7 +132,11 @@ export class ThyTimePickerComponent implements OnInit, AfterViewInit, ControlVal
      * @default false
      */
     @Input() @InputBoolean() set thyDisabled(value: boolean) {
-        this.disabled = value;
+        this.disabled = coerceBooleanProperty(value);
+    }
+
+    get thyDisabled(): boolean {
+        return this.disabled;
     }
 
     /**
@@ -182,6 +186,8 @@ export class ThyTimePickerComponent implements OnInit, AfterViewInit, ControlVal
 
     keepFocus: boolean;
 
+    private isDisabledFirstChange = true;
+
     onValueChangeFn: (val: number | Date) => void = () => void 0;
 
     onTouchedFn: () => void = () => void 0;
@@ -331,7 +337,8 @@ export class ThyTimePickerComponent implements OnInit, AfterViewInit, ControlVal
     }
 
     setDisabledState?(isDisabled: boolean): void {
-        this.disabled = isDisabled;
+        this.disabled = (this.isDisabledFirstChange && this.thyDisabled) || isDisabled;
+        this.isDisabledFirstChange = false;
     }
 
     private setValue(value: Date, formatText: boolean = true) {