5d34e057-cdec-4a21-acee-14fa57d080a2

Committed 24 Nov 2023 02:50AM UTC coverage: 90.29% (+0.003%) from 90.287%

Build # 5d34e057-cdec-4a21-acee-14fa57d080a2

Build Type

push

circleci

Committed by

web-flow

Commit Message

fix(time-picker): the time-picker thyDisabled does not take effect when using ngModel #INFR-7476 (#2911)

* fix(time-picker): the switch thyDisabled does not take effect when using ngModel #INFR-10583

* test(time-picker): the time-picker thyDisabled does not take effect when using ngModel #INFR-10583

* feat(time-picker): get thyDisabled

Run Details

5307 of 6537 branches covered (0.0%)

Branch coverage included in aggregate %.

7 of 7 new or added lines in 1 file covered. (100.0%)

3 existing lines in 1 file now uncovered.

13216 of 13978 relevant lines covered (94.55%)

977.96 hits per line

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

92.2

/src/time-picker/time-picker.component.ts

import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
import {
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    forwardRef,
    Input,
    OnInit,
    Output,
    ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { isValid } from 'date-fns';
import { getFlexiblePositions, InputBoolean, ThyPlacement } from 'ngx-tethys/core';
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';
import { ThyInputDirective } from 'ngx-tethys/input';

export type TimePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'default';

/**
 * 时间选择组件
 * @name thy-time-picker
 */
@Component({
    selector: 'thy-time-picker',
    templateUrl: './time-picker.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            multi: true,
            useExisting: forwardRef(() => ThyTimePickerComponent)
        }
    ],
    host: {
        class: 'thy-time-picker',
        '[class.thy-time-picker-disabled]': `disabled`,
        '[class.thy-time-picker-readonly]': `readonly`
    },
    standalone: true,
    imports: [
        CdkOverlayOrigin,
        ThyInputDirective,
        FormsModule,
        NgTemplateOutlet,
        NgIf,
        ThyIconComponent,
        NgClass,
        CdkConnectedOverlay,
        ThyTimePanelComponent
    ]
})
export class ThyTimePickerComponent implements OnInit, AfterViewInit, ControlValueAccessor {
    @ViewChild(CdkConnectedOverlay, { static: true }) cdkConnectedOverlay: CdkConnectedOverlay;

    @ViewChild('origin', { static: true }) origin: CdkOverlayOrigin;

    @ViewChild('pickerInput', { static: true }) inputRef: ElementRef<HTMLInputElement>;

    @ViewChild('overlayContainer', { static: false }) overlayContainer: ElementRef<HTMLElement>;

    /**
     * 输入框大小
     * @type 'xs' | 'sm' | 'md' | 'lg' | 'default'
     */
    @Input() thySize: TimePickerSize = 'default';

    /**
     * 输入框提示文字
     * @type string
     */
    @Input() thyPlaceholder: string = '选择时间';

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

    /**
     * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
     * @type string
     * @default HH:mm:ss
     */
    @Input() set thyFormat(value: string) {
        this.format = value || 'HH:mm:ss';
        if (this.value && isValid(this.value)) {
            this.showText = new TinyDate(this.value).format(this.format);
        }
    }

    /**
     * 小时间隔步长
     * @type number
     */
    @Input() thyHourStep: number = 1;

    /**
     * 分钟间隔步长
     * @type number
     */
    @Input() thyMinuteStep: number = 1;

    /**
     * 秒间隔步长
     * @type number
     */
    @Input() thySecondStep: number = 1;

    /**
     * 弹出层组件 class
     * @type string
     */
    @Input() thyPopupClass: string;

    /**
     * 是否显示弹出层遮罩
     * @type boolean
     * @default false
     */
    @Input() @InputBoolean() thyBackdrop: boolean;

    /**
     * 禁用
     * @type boolean
     * @default false
     */
    @Input() @InputBoolean() set thyDisabled(value: boolean) {
        this.disabled = coerceBooleanProperty(value);
    }

    get thyDisabled(): boolean {
        return this.disabled;
    }

    /**
     * 只读
     * @type boolean
     * @default false
     */
    @Input() @InputBoolean() set thyReadonly(value: boolean) {
        this.readonly = value;
    }

    /**
     * 展示选择此刻
     * @type boolean
     */
    @Input() @InputBoolean() thyShowSelectNow = true;

    /**
     * 可清空值
     * @type boolean
     */
    @Input() @InputBoolean() thyAllowClear = true;

    /**
     * 打开/关闭弹窗事件
     * @type EventEmitter<boolean>
     */
    @Output() thyOpenChange = new EventEmitter<boolean>();

    prefixCls = 'thy-time-picker';

    overlayPositions = getFlexiblePositions(this.thyPlacement, 4);

    format: string = 'HH:mm:ss';

    disabled: boolean;

    readonly: boolean;

    showText: string = '';

    openState: boolean;

    value: Date = new TinyDate().setHms(0, 0, 0).nativeDate;

    originValue: Date;

    keepFocus: boolean;

    private isDisabledFirstChange = true;

    onValueChangeFn: (val: number | Date) => void = () => void 0;

    onTouchedFn: () => void = () => void 0;

    constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) {}

    ngOnInit() {}

    ngAfterViewInit() {
        this.overlayPositions = getFlexiblePositions(this.thyPlacement, 4);
    }

    onInputPickerClick() {
        if (this.disabledUserOperation()) {
            return;
        }
        this.openOverlay();
    }

    onInputPickerBlur() {
        if (this.keepFocus) {
            this.focus();
        } else {
            if (this.openState) {
                this.closeOverlay();
            }
        }
    }

    onPickTime(value: Date) {
        this.originValue = new Date(value);
        this.setValue(value);
        this.emitValue();
    }

    onPickTimeConfirm(value: Date) {
        this.originValue = new Date(value);
        this.confirmValue(value);
    }

    onClearTime(e: Event) {
        e.stopPropagation();
        this.originValue = null;
        this.setValue(null);
        this.emitValue();
    }

    onCustomizeInput(value: string) {
        this.formatInputValue(value);
        this.cdr.detectChanges();
    }

    onKeyupEnter() {
        this.confirmValue(this.value);
        this.closeOverlay();
    }

    onKeyupEsc() {
        this.closeOverlay();
    }

    onPositionChange(e: Event) {
        this.cdr.detectChanges();
    }

    onClickBackdrop() {
        this.closeOverlay();
    }

    onOverlayDetach() {
        this.closeOverlay();
    }

    onOutsideClick(event: Event) {
        if (
            this.openState &&
            !this.elementRef.nativeElement.contains(event.target) &&
            !this.overlayContainer.nativeElement.contains(event.target as Node)
        ) {
            this.closeOverlay();
            this.cdr.detectChanges();
        }
    }

    onOverlayAttach() {
        if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
            this.cdkConnectedOverlay.overlayRef.updatePosition();
        }
    }

    openOverlay() {
        if (this.disabledUserOperation()) {
            return;
        }
        this.keepFocus = true;
        this.openState = true;
        this.thyOpenChange.emit(this.openState);
    }

    closeOverlay() {
        if (this.openState) {
            this.keepFocus = false;
            this.openState = false;
            this.blur();
            if (this.showText?.length) {
                if (!this.validateCustomizeInput(this.showText)) {
                    this.setValue(this.originValue);
                } else {
                    this.showText = new TinyDate(this.value).format(this.format);
                }
            } else {
                if (!this.thyAllowClear) {
                    this.setValue(this.originValue);
                }
            }
            this.thyOpenChange.emit(this.openState);
        }
    }

    focus() {
        if (this.inputRef) {
            this.inputRef.nativeElement.focus();
        }
    }

    blur() {
        if (this.inputRef) {
            this.inputRef.nativeElement.blur();
        }
    }

    writeValue(value: Date | number): void {
        if (value && isValid(value)) {
            this.originValue = new Date(value);
            this.setValue(new TinyDate(value).nativeDate);
        } else {
            this.value = new TinyDate().setHms(0, 0, 0).nativeDate;
        }
    }

    registerOnChange(fn: any): void {
        this.onValueChangeFn = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouchedFn = fn;
    }

    setDisabledState?(isDisabled: boolean): void {
        this.disabled = (this.isDisabledFirstChange && this.thyDisabled) || isDisabled;
        this.isDisabledFirstChange = false;
    }

    private setValue(value: Date, formatText: boolean = true) {
        if (value && isValid(value)) {
            this.value = new Date(value);
            if (formatText) {
                this.showText = new TinyDate(this.value).format(this.format);
            }
        } else {
            this.value = null;
            this.showText = '';
        }
        this.cdr.markForCheck();
    }

    private confirmValue(value: Date) {
        this.setValue(value);
        this.emitValue();
        this.cdr.markForCheck();
    }

    private emitValue() {
        if (this.onValueChangeFn) {
            this.onValueChangeFn(this.value);
        }
        if (this.onTouchedFn) {
            this.onTouchedFn();
        }
    }

    private formatInputValue(value: string) {
        if (!this.openState) {
            this.openOverlay();
        }
        if (value?.length) {
            if (this.validateCustomizeInput(value)) {
                const formatter = value.split(':');
                const hour = formatter[0] || 0;
                const minute = formatter[1] || 0;
                const second = formatter[2] || 0;
                this.setValue(new TinyDate().setHms(+hour, +minute, +second).nativeDate, false);
                this.originValue = new Date(this.value);
                this.emitValue();
            }
        } else {
            if (this.thyAllowClear) {
                this.originValue = null;
                this.setValue(null);
                this.emitValue();
            } else {
                this.value = new Date(this.originValue);
                this.showText = ``;
                this.cdr.markForCheck();
            }
        }
    }

    private validateCustomizeInput(value: string): boolean {
        let valid: boolean = false;
        if (value.length > this.format.length) {
            return valid;
        }
        const formatRule = this.format.split(':');
        const formatter = value.split(':');
        valid = !formatRule
            .map((m, i) => {
                return !!formatter[i];
            })
            .includes(false);
        return valid;
    }

    private disabledUserOperation() {
        return this.disabled || this.readonly;
    }
}

1	import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
2	import {
3	AfterViewInit,
4	ChangeDetectionStrategy,
5	ChangeDetectorRef,
6	Component,
7	ElementRef,
8	EventEmitter,
9	forwardRef,
10	Input,
11	OnInit,
12	Output,
13	ViewChild
14	} from '@angular/core';
15	import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
16	import { isValid } from 'date-fns';
17	import { getFlexiblePositions, InputBoolean, ThyPlacement } from 'ngx-tethys/core';
18	import { TinyDate, coerceBooleanProperty } from 'ngx-tethys/util';	1✔
19	import { ThyTimePanelComponent } from './time-picker-panel.component';
20	import { ThyIconComponent } from 'ngx-tethys/icon';	22✔
21	import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common';	22!
22	import { ThyInputDirective } from 'ngx-tethys/input';	22✔
23
24	export type TimePickerSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'default';
25
26	/**	19✔
27	* 时间选择组件
28	* @name thy-time-picker
29	*/	18✔
30	@Component({
31	selector: 'thy-time-picker',
32	templateUrl: './time-picker.component.html',	19✔
33	changeDetection: ChangeDetectionStrategy.OnPush,
34	providers: [
35	{	18✔
36	provide: NG_VALUE_ACCESSOR,	18✔
37	multi: true,	18✔
38	useExisting: forwardRef(() => ThyTimePickerComponent)	18✔
39	}	18✔
40	],	18✔
41	host: {	18✔
42	class: 'thy-time-picker',	18✔
43	'[class.thy-time-picker-disabled]': `disabled`,	18✔
44	'[class.thy-time-picker-readonly]': `readonly`	18✔
45	},	18✔
46	standalone: true,	18✔
47	imports: [	18✔
48	CdkOverlayOrigin,	18✔
49	ThyInputDirective,	18✔
50	FormsModule,	18✔
51	NgTemplateOutlet,	18✔
52	NgIf,	18✔
53	ThyIconComponent,	18✔
54	NgClass,
55	CdkConnectedOverlay,
56	ThyTimePanelComponent
57	]	18✔
58	})
59	export class ThyTimePickerComponent implements OnInit, AfterViewInit, ControlValueAccessor {
60	@ViewChild(CdkConnectedOverlay, { static: true }) cdkConnectedOverlay: CdkConnectedOverlay;	16✔
61		2✔
62	@ViewChild('origin', { static: true }) origin: CdkOverlayOrigin;
63		14✔
64	@ViewChild('pickerInput', { static: true }) inputRef: ElementRef<HTMLInputElement>;
65
66	@ViewChild('overlayContainer', { static: false }) overlayContainer: ElementRef<HTMLElement>;	3✔
67		1✔
68	/**
69	* 输入框大小
70	* @type 'xs' \| 'sm' \| 'md' \| 'lg' \| 'default'	2!
UNCOV 71	*/	×
72	@Input() thySize: TimePickerSize = 'default';
73
74	/**
75	* 输入框提示文字
76	* @type string	3✔
77	*/	3✔
78	@Input() thyPlaceholder: string = '选择时间';	3✔
79
80	/**
81	* 弹出位置	1✔
82	* @type 'top' \| 'topLeft'\| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom'	1✔
83	*/
84	@Input() thyPlacement: ThyPlacement = 'bottomLeft';
85		1✔
86	/**	1✔
87	* 展示的日期格式，支持 'HH:mm:ss' \| 'HH:mm' \| 'mm:ss'	1✔
88	* @type string	1✔
89	* @default HH:mm:ss
90	*/
91	@Input() set thyFormat(value: string) {	4✔
92	this.format = value \|\| 'HH:mm:ss';	4✔
93	if (this.value && isValid(this.value)) {
94	this.showText = new TinyDate(this.value).format(this.format);
95	}	1✔
96	}	1✔
97
98	/**
99	* 小时间隔步长	1✔
100	* @type number
101	*/
102	@Input() thyHourStep: number = 1;	15✔
103
104	/**
UNCOV 105	* 分钟间隔步长	×
106	* @type number
107	*/
108	@Input() thyMinuteStep: number = 1;	7✔
109
110	/**
111	* 秒间隔步长	6!
112	* @type number
113	*/
114	@Input() thySecondStep: number = 1;	6✔
115		6✔
116	/**
117	* 弹出层组件 class
118	* @type string
119	*/	15!
120	@Input() thyPopupClass: string;	15✔
121
122	/**
123	* 是否显示弹出层遮罩
124	* @type boolean	15!
UNCOV 125	* @default false	×
126	*/
127	@Input() @InputBoolean() thyBackdrop: boolean;	15✔
128		15✔
129	/**	15✔
130	* 禁用
131	* @type boolean
132	* @default false	16✔
133	*/	8✔
134	@Input() @InputBoolean() set thyDisabled(value: boolean) {	8✔
135	this.disabled = coerceBooleanProperty(value);	8✔
136	}	8✔
137		7✔
138	get thyDisabled(): boolean {	1✔
139	return this.disabled;
140	}
141		6✔
142	/**
143	* 只读
144	* @type boolean
145	* @default false	1!
146	*/	1✔
147	@Input() @InputBoolean() set thyReadonly(value: boolean) {
148	this.readonly = value;
149	}	8✔
150
151	/**
152	* 展示选择此刻
153	* @type boolean	1!
154	*/	1✔
155	@Input() @InputBoolean() thyShowSelectNow = true;
156
157	/**
158	* 可清空值	8!
159	* @type boolean	8✔
160	*/
161	@Input() @InputBoolean() thyAllowClear = true;
162
163	/**	37✔
164	* 打开/关闭弹窗事件	9✔
165	* @type EventEmitter<boolean>	9✔
166	*/
167	@Output() thyOpenChange = new EventEmitter<boolean>();
168		28✔
169	prefixCls = 'thy-time-picker';
170
171	overlayPositions = getFlexiblePositions(this.thyPlacement, 4);
172		18✔
173	format: string = 'HH:mm:ss';
174
175	disabled: boolean;	18✔
176
177	readonly: boolean;
178		18✔
179	showText: string = '';	18✔
180
181	openState: boolean;	18✔
182		19✔
183	value: Date = new TinyDate().setHms(0, 0, 0).nativeDate;	17✔
184		17✔
185	originValue: Date;	16✔
186
187	keepFocus: boolean;
188
189	private isDisabledFirstChange = true;	2✔
190		2✔
191	onValueChangeFn: (val: number \| Date) => void = () => void 0;
192		19✔
193	onTouchedFn: () => void = () => void 0;
194
195	constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) {}	2✔
196		2✔
197	ngOnInit() {}	2✔
198
199	ngAfterViewInit() {
200	this.overlayPositions = getFlexiblePositions(this.thyPlacement, 4);	8!
201	}	8✔
202
203	onInputPickerClick() {	8!
204	if (this.disabledUserOperation()) {	8✔
205	return;
206	}
207	this.openOverlay();
208	}	4✔
209		1✔
210	onInputPickerBlur() {
211	if (this.keepFocus) {	4✔
212	this.focus();	2✔
213	} else {	1✔
214	if (this.openState) {	1!
215	this.closeOverlay();	1!
216	}	1!
217	}	1✔
218	}	1✔
219		1✔
220	onPickTime(value: Date) {
221	this.originValue = new Date(value);
222	this.setValue(value);
223	this.emitValue();	2✔
224	}	1✔
225		1✔
226	onPickTimeConfirm(value: Date) {	1✔
227	this.originValue = new Date(value);
228	this.confirmValue(value);
229	}	1✔
230		1✔
231	onClearTime(e: Event) {	1✔
232	e.stopPropagation();
233	this.originValue = null;
234	this.setValue(null);
235	this.emitValue();
236	}	9✔
237		9✔
238	onCustomizeInput(value: string) {	2✔
239	this.formatInputValue(value);
240	this.cdr.detectChanges();	7✔
241	}	7✔
242		7✔
243	onKeyupEnter() {
244	this.confirmValue(this.value);	21✔
245	this.closeOverlay();
246	}
247		7✔
248	onKeyupEsc() {
249	this.closeOverlay();
250	}	31✔
251
252	onPositionChange(e: Event) {	1✔
253	this.cdr.detectChanges();
254	}
255
256	onClickBackdrop() {	1✔
257	this.closeOverlay();
258	}
259
260	onOverlayDetach() {
261	this.closeOverlay();
262	}
263
264	onOutsideClick(event: Event) {
265	if (
266	this.openState &&
267	!this.elementRef.nativeElement.contains(event.target) &&
268	!this.overlayContainer.nativeElement.contains(event.target as Node)
269	) {
270	this.closeOverlay();
271	this.cdr.detectChanges();
272	}
273	}
274
275	onOverlayAttach() {
276	if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
277	this.cdkConnectedOverlay.overlayRef.updatePosition();	1✔
278	}
279	}
280
281	openOverlay() {	1✔
282	if (this.disabledUserOperation()) {
283	return;
284	}
285	this.keepFocus = true;
286	this.openState = true;	1✔
287	this.thyOpenChange.emit(this.openState);
288	}
289
290	closeOverlay() {
291	if (this.openState) {	1✔
292	this.keepFocus = false;
293	this.openState = false;
294	this.blur();
295	if (this.showText?.length) {	1✔
296	if (!this.validateCustomizeInput(this.showText)) {
297	this.setValue(this.originValue);
298	} else {
299	this.showText = new TinyDate(this.value).format(this.format);	1✔
300	}
301	} else {
302	if (!this.thyAllowClear) {
303	this.setValue(this.originValue);
304	}
305	}
306	this.thyOpenChange.emit(this.openState);
307	}
308	}	18✔
309
310	focus() {
311	if (this.inputRef) {
312	this.inputRef.nativeElement.focus();
313	}
314	}
315
316	blur() {
317	if (this.inputRef) {
318	this.inputRef.nativeElement.blur();
319	}
320	}
321
322	writeValue(value: Date \| number): void {
323	if (value && isValid(value)) {
324	this.originValue = new Date(value);
325	this.setValue(new TinyDate(value).nativeDate);
326	} else {
327	this.value = new TinyDate().setHms(0, 0, 0).nativeDate;
328	}
329	}
330
331	registerOnChange(fn: any): void {
332	this.onValueChangeFn = fn;
333	}
334
335	registerOnTouched(fn: any): void {
336	this.onTouchedFn = fn;
337	}
338
339	setDisabledState?(isDisabled: boolean): void {
340	this.disabled = (this.isDisabledFirstChange && this.thyDisabled) \|\| isDisabled;
341	this.isDisabledFirstChange = false;
342	}
343
344	private setValue(value: Date, formatText: boolean = true) {
345	if (value && isValid(value)) {
346	this.value = new Date(value);
347	if (formatText) {
348	this.showText = new TinyDate(this.value).format(this.format);
349	}
350	} else {
351	this.value = null;
352	this.showText = '';
353	}
354	this.cdr.markForCheck();
355	}
356
357	private confirmValue(value: Date) {
358	this.setValue(value);
359	this.emitValue();
360	this.cdr.markForCheck();
361	}
362
363	private emitValue() {
364	if (this.onValueChangeFn) {
365	this.onValueChangeFn(this.value);
366	}
367	if (this.onTouchedFn) {
368	this.onTouchedFn();
369	}
370	}
371
372	private formatInputValue(value: string) {
373	if (!this.openState) {
374	this.openOverlay();
375	}
376	if (value?.length) {
377	if (this.validateCustomizeInput(value)) {
378	const formatter = value.split(':');
379	const hour = formatter[0] \|\| 0;
380	const minute = formatter[1] \|\| 0;
381	const second = formatter[2] \|\| 0;
382	this.setValue(new TinyDate().setHms(+hour, +minute, +second).nativeDate, false);
383	this.originValue = new Date(this.value);
384	this.emitValue();
385	}
386	} else {
387	if (this.thyAllowClear) {
388	this.originValue = null;
389	this.setValue(null);
390	this.emitValue();
391	} else {
392	this.value = new Date(this.originValue);
393	this.showText = ``;
394	this.cdr.markForCheck();
395	}
396	}
397	}
398
399	private validateCustomizeInput(value: string): boolean {
400	let valid: boolean = false;
401	if (value.length > this.format.length) {
402	return valid;
403	}
404	const formatRule = this.format.split(':');
405	const formatter = value.split(':');
406	valid = !formatRule
407	.map((m, i) => {
408	return !!formatter[i];
409	})
410	.includes(false);
411	return valid;
412	}
413
414	private disabledUserOperation() {
415	return this.disabled \|\| this.readonly;
416	}
417	}

atinc / ngx-tethys / 5d34e057-cdec-4a21-acee-14fa57d080a2

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