atinc / ngx-tethys / #96

Committed 12 Aug 2025 06:20AM UTC coverage: 90.341% (+0.02%) from 90.324%

Build # #96

Build Type

push

Committed by

Commit Message

refactor(date-picker): migrate to signal for date-picker #TINFR-1463 (#3513)

* refactor(date-picker): migrate to signal for calendar header

* refactor(date-picker): migrate to signal for calendar footer

* refactor(date-picker): migrate to signal for calendar table

* refactor(date-picker): migrate to signal for date table cell

* refactor(date-picker): migrate to signal for date carousel

* refactor(date-picker): migrate to signal for inner-popup and date-popup

* refactor(date-picker): migrate to signal for pickers

Run Details

5531 of 6813 branches covered (81.18%)

Branch coverage included in aggregate %.

342 of 367 new or added lines in 20 files covered. (93.19%)

66 existing lines in 11 files now uncovered.

13969 of 14772 relevant lines covered (94.56%)

904.1 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.8

/src/date-picker/base-picker.component.ts

import { ThyClickDispatcher, ThyPlacement } from 'ngx-tethys/core';
import { elementMatchClosest, FunctionProp, TinyDate } from 'ngx-tethys/util';
import {
    Component,
    ElementRef,
    inject,
    input,
    Input,
    NgZone,
    OnChanges,
    OnInit,
    output,
    PLATFORM_ID,
    TemplateRef,
    viewChild
} from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { isPlatformBrowser } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { AbstractPickerComponent } from './abstract-picker.component';
import { CompatibleValue, RangeAdvancedValue } from './inner-types';
import { ThyPicker } from './picker.component';
import { hasTimeInStringDate, isValidStringDate, parseStringDate, transformDateValue } from './picker.util';
import { ThyCompatibleDate, ThyPanelMode } from './standard-types';
import { QUARTER_FORMAT } from './date-picker.config';

/**
 * @private
 */
@Component({
    template: ``,
    host: {
        '[attr.tabindex]': `tabIndex`,
        '(focus)': 'onFocus($event)',
        '(blur)': 'onBlur($event)'
    }
})
export class BasePicker extends AbstractPickerComponent implements OnInit, OnChanges {
    protected element = inject(ElementRef);

    initialized: boolean;

    private innerPreviousDate: string;

    private thyPicker = viewChild<ThyPicker>('thyPicker');

    readonly thyDateRender = input<FunctionProp<TemplateRef<Date> | string>>();

    @Input() set thyMode(value: ThyPanelMode) {
        this._panelMode = value ?? 'date';
        if (this.initialized) {
            this.setPanelMode();
            this.setFormat();
        }
    }

    get thyMode() {
        return this._panelMode;
    }

    /**
     * 是否有幕布
     */
    readonly thyHasBackdrop = input(true, { transform: coerceBooleanProperty });

    /**
     * 弹出位置
     * @type top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right | rightTop | rightBottom
     */
    readonly thyPlacement = input<ThyPlacement>('bottomLeft');

    readonly thyOnPanelChange = output<ThyPanelMode | ThyPanelMode[]>();

    readonly thyOnCalendarChange = output<Date[]>();

    readonly thyOnOk = output<ThyCompatibleDate | null>();

    thyClickDispatcher = inject(ThyClickDispatcher);

    platformId = inject(PLATFORM_ID);

    ngZone = inject(NgZone);

    ngOnInit(): void {
        super.ngOnInit();
        this.setPanelMode();
        this.setFormat();
        this.initialized = true;

        if (isPlatformBrowser(this.platformId)) {
            this.thyClickDispatcher
                .clicked(0)
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe((event: Event) => {
                    if (
                        !this.element.nativeElement.contains(event.target) &&
                        !this.thyPicker()
                            ?.overlayContainer()
                            ?.nativeElement.contains(event.target as Node) &&
                        this.realOpenState
                    ) {
                        this.ngZone.run(() => {
                            this.closeOverlay();
                            this.cdr.markForCheck();
                        });
                    }
                });
        }
    }

    onValueChange(value: CompatibleValue | RangeAdvancedValue): void {
        this.thyPicker().entering = false;
        this.restoreTimePickerState(value as CompatibleValue);
        super.onValueChange(value);
        if (!this.flexible()) {
            this.closeOverlay();
        }
        this.innerPreviousDate = this.thyPicker().getReadableValue(this.thyValue);
    }

    onInputValueChange(formatDate: string | null | Array<null>) {
        if (!formatDate || !formatDate.length) {
            const compatibleValue = formatDate ? (formatDate as CompatibleValue) : null;
            this.restoreTimePickerState(compatibleValue);
            super.onValueChange(compatibleValue);
            return;
        }
        let value = formatDate as string;
        const valueValid = isValidStringDate(value, this.thyTimeZone());
        const valueLimitValid = valueValid ? this.isValidDateLimit(parseStringDate(value, this.thyTimeZone())) : false;
        if (valueValid && valueLimitValid) {
            this.innerPreviousDate = value;
        } else {
            value = this.innerPreviousDate;
        }
        const tinyDate = value
            ? this.thyShowTime()
                ? parseStringDate(value, this.thyTimeZone())
                : parseStringDate(value, this.thyTimeZone()).startOfDay()
            : null;
        this.restoreTimePickerState(tinyDate);
        super.onValueChange(tinyDate);
    }

    setFormat() {
        if (!this.thyFormat()) {
            const inputFormats: { [key in ThyPanelMode]?: string } = {
                year: 'yyyy',
                quarter: `yyyy-${QUARTER_FORMAT}`,
                month: 'yyyy-MM',
                week: this.locale().weekThFormat,
                date: this.thyShowTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'
            };
            this.thyFormat.set(this.flexible() ? inputFormats['date'] : inputFormats[this.thyMode]);
        }
    }

    // Emit thyOnCalendarChange when select date by thy-range-picker
    onCalendarChange(value: TinyDate[]): void {
        if (this.isRange) {
            const rangeValue = value.map(x => x.nativeDate);
            this.thyOnCalendarChange.emit(rangeValue);
        }
    }

    onShowTimePickerChange(show: boolean): void {
        this.withTime = show;
    }

    onResultOk(): void {
        if (this.isRange) {
            const value = this.thyValue as TinyDate[];
            if (value.length) {
                this.thyOnOk.emit([value[0].nativeDate, value[1].nativeDate]);
            } else {
                this.thyOnOk.emit([]);
            }
        } else {
            if (this.thyValue) {
                this.thyOnOk.emit((this.thyValue as TinyDate).nativeDate);
            } else {
                this.thyOnOk.emit(null);
            }
        }
        this.closeOverlay();
    }

    onOpenChange(open: boolean): void {
        this.thyOpenChange.emit(open);
        if (!open) {
            this.onTouchedFn();
        }
    }

    onFocus(event: Event) {
        this.picker().focus();
    }

    onBlur(event?: FocusEvent) {
        // Tab 聚焦后自动聚焦到 input 输入框，此分支下直接返回，无需触发 onTouchedFn
        if (elementMatchClosest(event?.relatedTarget as HTMLElement, ['date-popup', 'thy-picker'])) {
            return;
        }
        this.onTouchedFn();
    }

    onInputDate(value: string) {
        if (value && isValidStringDate(value, this.thyTimeZone())) {
            if (this.thyShowTime()) {
                this.withTime = hasTimeInStringDate(value, this.thyTimeZone());
            }
            this.thyValue = parseStringDate(value, this.thyTimeZone());
        }
    }

    private isValidDateLimit(date: TinyDate): boolean {
        let disable = false;
        if (this.thyDisabledDate() !== undefined) {
            disable = this.thyDisabledDate()(date.nativeDate);
        }
        const minDate = this.thyMinDate() ? new TinyDate(transformDateValue(this.thyMinDate()).value as Date, this.thyTimeZone()) : null;
        const maxDate = this.thyMaxDate() ? new TinyDate(transformDateValue(this.thyMaxDate()).value as Date, this.thyTimeZone()) : null;
        return (
            (!minDate || date.startOfDay().nativeDate >= minDate.startOfDay().nativeDate) &&
            (!maxDate || date.startOfDay().nativeDate <= maxDate.startOfDay().nativeDate) &&
            !disable
        );
    }
}

1	import { ThyClickDispatcher, ThyPlacement } from 'ngx-tethys/core';
2	import { elementMatchClosest, FunctionProp, TinyDate } from 'ngx-tethys/util';
3	import {
4	Component,
5	ElementRef,
6	inject,
7	input,
8	Input,
9	NgZone,
10	OnChanges,
11	OnInit,
12	output,
13	PLATFORM_ID,
14	TemplateRef,
15	viewChild	1✔
16	} from '@angular/core';
17	import { coerceBooleanProperty } from '@angular/cdk/coercion';	156✔
18	import { isPlatformBrowser } from '@angular/common';	156✔
19	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';	156✔
20	import { AbstractPickerComponent } from './abstract-picker.component';	156✔
21	import { CompatibleValue, RangeAdvancedValue } from './inner-types';	156✔
22	import { ThyPicker } from './picker.component';	156✔
23	import { hasTimeInStringDate, isValidStringDate, parseStringDate, transformDateValue } from './picker.util';	156✔
24	import { ThyCompatibleDate, ThyPanelMode } from './standard-types';	156✔
25	import { QUARTER_FORMAT } from './date-picker.config';	156✔
26		156✔
27	/**	156✔
28	* @private	156✔
29	*/
30	@Component({
31	template: ``,	158✔
32	host: {	158✔
33	'[attr.tabindex]': `tabIndex`,	8✔
34	'(focus)': 'onFocus($event)',	8✔
35	'(blur)': 'onBlur($event)'
36	}
37	})
38	export class BasePicker extends AbstractPickerComponent implements OnInit, OnChanges {	1,306✔
39	protected element = inject(ElementRef);
40
41	initialized: boolean;	156✔
42		156✔
43	private innerPreviousDate: string;	156✔
44		156✔
45	private thyPicker = viewChild<ThyPicker>('thyPicker');	156!
46		156✔
47	readonly thyDateRender = input<FunctionProp<TemplateRef<Date> \| string>>();
48
49	@Input() set thyMode(value: ThyPanelMode) {
50	this._panelMode = value ?? 'date';	226✔
51	if (this.initialized) {
52	this.setPanelMode();
53	this.setFormat();
54	}
55	}	1✔
56		1✔
57	get thyMode() {	1✔
58	return this._panelMode;
59	}
60
61	/**
62	* 是否有幕布
63	*/
64	readonly thyHasBackdrop = input(true, { transform: coerceBooleanProperty });	49✔
65		49✔
66	/**	49✔
67	* 弹出位置	49✔
68	* @type top \| topLeft \| topRight \| bottom \| bottomLeft \| bottomRight \| left \| leftTop \| leftBottom \| right \| rightTop \| rightBottom	41✔
69	*/
70	readonly thyPlacement = input<ThyPlacement>('bottomLeft');	49✔
71
72	readonly thyOnPanelChange = output<ThyPanelMode \| ThyPanelMode[]>();
73		14✔
74	readonly thyOnCalendarChange = output<Date[]>();	6✔
75		6✔
76	readonly thyOnOk = output<ThyCompatibleDate \| null>();	6✔
77		6✔
78	thyClickDispatcher = inject(ThyClickDispatcher);
79		8✔
80	platformId = inject(PLATFORM_ID);	8✔
81		8!
82	ngZone = inject(NgZone);	8✔
83		5✔
84	ngOnInit(): void {
85	super.ngOnInit();
86	this.setPanelMode();	3✔
87	this.setFormat();
88	this.initialized = true;	8✔
89		5✔
90	if (isPlatformBrowser(this.platformId)) {
91	this.thyClickDispatcher
92	.clicked(0)
93	.pipe(takeUntilDestroyed(this.destroyRef))	8✔
94	.subscribe((event: Event) => {	8✔
95	if (
96	!this.element.nativeElement.contains(event.target) &&
97	!this.thyPicker()	164✔
98	?.overlayContainer()	124✔
99	?.nativeElement.contains(event.target as Node) &&
100	this.realOpenState
101	) {
102	this.ngZone.run(() => {
103	this.closeOverlay();	124✔
104	this.cdr.markForCheck();
105	});	124✔
106	}
107	});
108	}
109	}
110		14!
111	onValueChange(value: CompatibleValue \| RangeAdvancedValue): void {	21✔
112	this.thyPicker().entering = false;	14✔
113	this.restoreTimePickerState(value as CompatibleValue);
114	super.onValueChange(value);
115	if (!this.flexible()) {
116	this.closeOverlay();	46✔
117	}
118	this.innerPreviousDate = this.thyPicker().getReadableValue(this.thyValue);
119	}	5!
UNCOV 120		×
UNCOV 121	onInputValueChange(formatDate: string \| null \| Array<null>) {	×
UNCOV 122	if (!formatDate \|\| !formatDate.length) {	×
123	const compatibleValue = formatDate ? (formatDate as CompatibleValue) : null;
124	this.restoreTimePickerState(compatibleValue);
UNCOV 125	super.onValueChange(compatibleValue);	×
126	return;
127	}
128	let value = formatDate as string;
129	const valueValid = isValidStringDate(value, this.thyTimeZone());	5!
130	const valueLimitValid = valueValid ? this.isValidDateLimit(parseStringDate(value, this.thyTimeZone())) : false;	5✔
131	if (valueValid && valueLimitValid) {
132	this.innerPreviousDate = value;
UNCOV 133	} else {	×
134	value = this.innerPreviousDate;
135	}
136	const tinyDate = value	5✔
137	? this.thyShowTime()
138	? parseStringDate(value, this.thyTimeZone())
139	: parseStringDate(value, this.thyTimeZone()).startOfDay()	181✔
140	: null;	181✔
141	this.restoreTimePickerState(tinyDate);	57✔
142	super.onValueChange(tinyDate);
143	}
144
145	setFormat() {	1✔
146	if (!this.thyFormat()) {
147	const inputFormats: { [key in ThyPanelMode]?: string } = {
148	year: 'yyyy',
149	quarter: `yyyy-${QUARTER_FORMAT}`,	5✔
150	month: 'yyyy-MM',	1✔
151	week: this.locale().weekThFormat,
152	date: this.thyShowTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'	4✔
153	};
154	this.thyFormat.set(this.flexible() ? inputFormats['date'] : inputFormats[this.thyMode]);
155	}	13!
156	}	13✔
157		4✔
158	// Emit thyOnCalendarChange when select date by thy-range-picker
159	onCalendarChange(value: TinyDate[]): void {	13✔
160	if (this.isRange) {
161	const rangeValue = value.map(x => x.nativeDate);
162	this.thyOnCalendarChange.emit(rangeValue);
163	}	8✔
164	}	8!
UNCOV 165		×
166	onShowTimePickerChange(show: boolean): void {
167	this.withTime = show;	8✔
168	}	8✔
169		8✔
170	onResultOk(): void {
171	if (this.isRange) {
172	const value = this.thyValue as TinyDate[];
173	if (value.length) {	1✔
174	this.thyOnOk.emit([value[0].nativeDate, value[1].nativeDate]);
175	} else {
176	this.thyOnOk.emit([]);
177	}
178	} else {
179	if (this.thyValue) {
180	this.thyOnOk.emit((this.thyValue as TinyDate).nativeDate);
181	} else {
182	this.thyOnOk.emit(null);
183	}
184	}	1✔
185	this.closeOverlay();
186	}
187
188	onOpenChange(open: boolean): void {
189	this.thyOpenChange.emit(open);
190	if (!open) {
191	this.onTouchedFn();
192	}
193	}
194
195	onFocus(event: Event) {
196	this.picker().focus();
197	}
198
199	onBlur(event?: FocusEvent) {
200	// Tab 聚焦后自动聚焦到 input 输入框，此分支下直接返回，无需触发 onTouchedFn
201	if (elementMatchClosest(event?.relatedTarget as HTMLElement, ['date-popup', 'thy-picker'])) {
202	return;
203	}
204	this.onTouchedFn();
205	}
206
207	onInputDate(value: string) {
208	if (value && isValidStringDate(value, this.thyTimeZone())) {
209	if (this.thyShowTime()) {
210	this.withTime = hasTimeInStringDate(value, this.thyTimeZone());
211	}
212	this.thyValue = parseStringDate(value, this.thyTimeZone());
213	}
214	}
215
216	private isValidDateLimit(date: TinyDate): boolean {
217	let disable = false;
218	if (this.thyDisabledDate() !== undefined) {
219	disable = this.thyDisabledDate()(date.nativeDate);
220	}
221	const minDate = this.thyMinDate() ? new TinyDate(transformDateValue(this.thyMinDate()).value as Date, this.thyTimeZone()) : null;
222	const maxDate = this.thyMaxDate() ? new TinyDate(transformDateValue(this.thyMaxDate()).value as Date, this.thyTimeZone()) : null;
223	return (
224	(!minDate \|\| date.startOfDay().nativeDate >= minDate.startOfDay().nativeDate) &&
225	(!maxDate \|\| date.startOfDay().nativeDate <= maxDate.startOfDay().nativeDate) &&
226	!disable
227	);
228	}
229	}

atinc / ngx-tethys / #96

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous