5fa9630c-19a1-4ee7-af3d-6a0c3535952a

Committed 08 Oct 2024 08:24AM UTC coverage: 90.438% (+0.007%) from 90.431%

Build # 5fa9630c-19a1-4ee7-af3d-6a0c3535952a

Build Type

push

circleci

Committed by

minlovehua

Commit Message

refactor: refactor all control-flow directives to new control-flow #TINFR-381

Run Details

5511 of 6738 branches covered (81.79%)

Branch coverage included in aggregate %.

98 of 104 new or added lines in 58 files covered. (94.23%)

113 existing lines in 17 files now uncovered.

13253 of 14010 relevant lines covered (94.6%)

991.73 hits per line

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

95.29

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

import { getFlexiblePositions, ThyPlacement } from 'ngx-tethys/core';
import { coerceBooleanProperty, TinyDate } from 'ngx-tethys/util';

import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
import {
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    Input,
    OnChanges,
    Output,
    SimpleChanges,
    ViewChild
} from '@angular/core';

import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
import { ThyIcon } from 'ngx-tethys/icon';
import { ThyInputDirective } from 'ngx-tethys/input';
import { DateHelperService } from './date-helper.service';
import { CompatibleValue, RangePartType } from './inner-types';
import { getFlexibleAdvancedReadableValue } from './picker.util';
import { ThyDateGranularity } from './standard-types';
import { ThyEnterDirective } from 'ngx-tethys/shared';
import { scaleMotion, scaleXMotion, scaleYMotion } from 'ngx-tethys/core';

/**
 * @private
 */
@Component({
    selector: 'thy-picker',
    exportAs: 'thyPicker',
    templateUrl: './picker.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [CdkOverlayOrigin, ThyInputDirective, ThyEnterDirective, AsyncPipe, NgTemplateOutlet, ThyIcon, NgClass, CdkConnectedOverlay],
    animations: [scaleXMotion, scaleYMotion, scaleMotion]
})
export class ThyPicker implements OnChanges, AfterViewInit {
    @Input() isRange = false;
    @Input() open: boolean | undefined = undefined;
    @Input() disabled: boolean;
    @Input() placeholder: string | string[];
    @Input() readonly: boolean;
    @Input() allowClear: boolean;
    @Input() autoFocus: boolean;
    @Input() className: string;
    @Input() size: 'sm' | 'xs' | 'lg' | 'md' | 'default';
    @Input() suffixIcon: string;
    @Input() placement: ThyPlacement = 'bottomLeft';
    @Input() flexible: boolean = false;
    @Input() mode: string;
    @Input({ transform: coerceBooleanProperty }) hasBackdrop: boolean;
    @Output() blur = new EventEmitter<Event>();
    @Output() readonly valueChange = new EventEmitter<TinyDate | TinyDate[] | null>();
    @Output() readonly openChange = new EventEmitter<boolean>(); // Emitted when overlay's open state change
    @Output() readonly inputChange = new EventEmitter<string>();

    @ViewChild('origin', { static: true }) origin: CdkOverlayOrigin;
    @ViewChild(CdkConnectedOverlay, { static: true }) cdkConnectedOverlay: CdkConnectedOverlay;
    @ViewChild('pickerInput', { static: true }) pickerInput: ElementRef;
    @ViewChild('overlayContainer', { static: false }) overlayContainer: ElementRef<HTMLElement>;

    @Input()
    get format() {
        return this.innerFormat;
    }

    set format(value: string) {
        this.innerFormat = value;
        this.updateReadableDate(this.innerValue);
    }

    @Input()
    get flexibleDateGranularity() {
        return this.innerflexibleDateGranularity;
    }

    set flexibleDateGranularity(granularity: ThyDateGranularity) {
        this.innerflexibleDateGranularity = granularity;
        this.updateReadableDate(this.innerValue);
    }

    @Input()
    get value() {
        return this.innerValue;
    }

    set value(value: TinyDate | TinyDate[] | null) {
        this.innerValue = value;
        if (!this.entering) {
            this.updateReadableDate(this.innerValue);
        }
    }

    private innerflexibleDateGranularity: ThyDateGranularity;

    private innerFormat: string;

    private innerValue: TinyDate | TinyDate[] | null;

    entering = false;

    prefixCls = 'thy-calendar';

    isShowDatePopup = false;

    overlayOpen = false; // Available when "open"=undefined

    overlayPositions = getFlexiblePositions(this.placement, 4);

    get realOpenState(): boolean {
        // The value that really decide the open state of overlay
        return this.isOpenHandledByUser() ? !!this.open : this.overlayOpen;
    }

    get readonlyState(): boolean {
        return this.isRange || this.readonly || this.mode !== 'date';
    }

    constructor(
        private changeDetector: ChangeDetectorRef,
        private dateHelper: DateHelperService
    ) {}

    ngOnChanges(changes: SimpleChanges): void {
        // open by user
        if (changes.open && changes.open.currentValue !== undefined) {
            if (changes.open.currentValue) {
                this.showDatePopup();
            } else {
                this.closeDatePopup();
            }
        }
    }

    ngAfterViewInit(): void {
        this.overlayPositions = getFlexiblePositions(this.placement, 4);
        if (this.autoFocus) {
            this.focus();
        }
    }

    focus(): void {
        this.pickerInput.nativeElement.focus();
    }

    onBlur(event: FocusEvent) {
        this.blur.emit(event);
        if (this.entering) {
            this.valueChange.emit(this.pickerInput.nativeElement.value);
        }
        this.entering = false;
    }

    onInput(event: InputEvent) {
        this.entering = true;
        const inputValue = (event.target as HTMLElement)['value'];
        this.inputChange.emit(inputValue);
    }

    onEnter() {
        if (this.readonlyState) {
            return;
        }
        this.valueChange.emit(this.pickerInput.nativeElement.value || this.getReadableValue(new TinyDate(new Date())));
        this.entering = false;
    }

    showOverlay(): void {
        if (!this.realOpenState) {
            this.overlayOpen = true;
            this.showDatePopup();

            this.openChange.emit(this.overlayOpen);
            setTimeout(() => {
                if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
                    this.cdkConnectedOverlay.overlayRef.updatePosition();
                }
            });
        }
    }

    hideOverlay(): void {
        if (this.realOpenState) {
            this.overlayOpen = false;
            this.closeDatePopup();

            this.openChange.emit(this.overlayOpen);
            this.focus();
        }
    }

    showDatePopup() {
        this.isShowDatePopup = true;
        this.changeDetector.markForCheck();
    }

    closeDatePopup() {
        // Delay 200ms before destroying the date-popup, otherwise you will not see the closing animation.
        setTimeout(() => {
            this.isShowDatePopup = false;
            this.changeDetector.markForCheck();
        }, 200);
    }

    onClickInputBox(): void {
        if (!this.disabled && !this.readonly && !this.isOpenHandledByUser()) {
            this.showOverlay();
        }
    }

    onClickBackdrop(): void {
        this.hideOverlay();
    }

    onOverlayDetach(): void {
        this.hideOverlay();
    }

    onPositionChange(position: ConnectedOverlayPositionChange): void {
        this.changeDetector.detectChanges();
    }

    onClickClear(event: MouseEvent): void {
        event.preventDefault();
        event.stopPropagation();

        this.innerValue = this.isRange ? [] : null;
        this.valueChange.emit(this.innerValue);
    }

    getPartTypeIndex(partType: RangePartType): number {
        return { left: 0, right: 1 }[partType];
    }

    isEmptyValue(value: CompatibleValue | null): boolean {
        if (value === null) {
            return true;
        } else if (this.isRange) {
            return !value || !Array.isArray(value) || value.every(val => !val);
        } else {
            return !value;
        }
    }

    // Whether open state is permanently controlled by user himself
    isOpenHandledByUser(): boolean {
        return this.open !== undefined;
    }

    getReadableValue(tinyDate: TinyDate | TinyDate[]): string | null {
        let value: TinyDate;
        if (this.isRange) {
            if (this.flexible && this.innerflexibleDateGranularity !== 'day') {
                return getFlexibleAdvancedReadableValue(tinyDate as TinyDate[], this.innerflexibleDateGranularity);
            } else {
                const start = tinyDate[0] ? this.formatDate(tinyDate[0]) : '';
                const end = tinyDate[1] ? this.formatDate(tinyDate[1]) : '';
                return start && end ? `${start} ~ ${end}` : null;
            }
        } else {
            value = tinyDate as TinyDate;
            return value ? this.formatDate(value) : null;
        }
    }

    formatDate(value: TinyDate) {
        // dateHelper.format() 使用的是 angular 的 format，不支持季度，修改的话，改动比较大。
        // 此处通过对 innerFormat 做下判断，如果是季度的 format，使用 date-fns 的 format()
        if (this.innerFormat && (this.innerFormat.includes('q') || this.innerFormat.includes('Q'))) {
            return value.format(this.innerFormat);
        } else {
            return this.dateHelper.format(value.nativeDate, this.innerFormat);
        }
    }

    getPlaceholder(): string {
        return this.isRange && this.placeholder && Array.isArray(this.placeholder)
            ? (this.placeholder as string[]).join(' ~ ')
            : (this.placeholder as string);
    }

    private updateReadableDate(setValue: TinyDate | TinyDate[] | null) {
        const readableValue = this.getReadableValue(setValue);
        if (readableValue === this.pickerInput.nativeElement['value']) {
            return;
        }

        this.pickerInput.nativeElement.value = readableValue;
    }
}

1	import { getFlexiblePositions, ThyPlacement } from 'ngx-tethys/core';
2	import { coerceBooleanProperty, TinyDate } from 'ngx-tethys/util';
3
4	import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
5	import {
6	AfterViewInit,
7	ChangeDetectionStrategy,
8	ChangeDetectorRef,
9	Component,
10	ElementRef,
11	EventEmitter,
12	Input,
13	OnChanges,
14	Output,
15	SimpleChanges,
16	ViewChild
17	} from '@angular/core';	1✔
18
NEW 19	import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';	×
20	import { ThyIcon } from 'ngx-tethys/icon';
21	import { ThyInputDirective } from 'ngx-tethys/input';
22	import { DateHelperService } from './date-helper.service';	159✔
23	import { CompatibleValue, RangePartType } from './inner-types';	159✔
24	import { getFlexibleAdvancedReadableValue } from './picker.util';
25	import { ThyDateGranularity } from './standard-types';
26	import { ThyEnterDirective } from 'ngx-tethys/shared';	×
27	import { scaleMotion, scaleXMotion, scaleYMotion } from 'ngx-tethys/core';
28
29	/**	163✔
30	* @private	163✔
31	*/
32	@Component({
33	selector: 'thy-picker',	642✔
34	exportAs: 'thyPicker',
35	templateUrl: './picker.component.html',
36	changeDetection: ChangeDetectionStrategy.OnPush,	314✔
37	standalone: true,	314✔
38	imports: [CdkOverlayOrigin, ThyInputDirective, ThyEnterDirective, AsyncPipe, NgTemplateOutlet, ThyIcon, NgClass, CdkConnectedOverlay],	306✔
39	animations: [scaleXMotion, scaleYMotion, scaleMotion]
40	})
41	export class ThyPicker implements OnChanges, AfterViewInit {
42	@Input() isRange = false;
43	@Input() open: boolean \| undefined = undefined;	1,527✔
44	@Input() disabled: boolean;
45	@Input() placeholder: string \| string[];
46	@Input() readonly: boolean;	651✔
47	@Input() allowClear: boolean;
48	@Input() autoFocus: boolean;
49	@Input() className: string;	157✔
50	@Input() size: 'sm' \| 'xs' \| 'lg' \| 'md' \| 'default';	157✔
51	@Input() suffixIcon: string;	157✔
52	@Input() placement: ThyPlacement = 'bottomLeft';	157✔
53	@Input() flexible: boolean = false;	157✔
54	@Input() mode: string;	157✔
55	@Input({ transform: coerceBooleanProperty }) hasBackdrop: boolean;	157✔
56	@Output() blur = new EventEmitter<Event>();	157✔
57	@Output() readonly valueChange = new EventEmitter<TinyDate \| TinyDate[] \| null>();	157✔
58	@Output() readonly openChange = new EventEmitter<boolean>(); // Emitted when overlay's open state change	157✔
59	@Output() readonly inputChange = new EventEmitter<string>();	157✔
60		157✔
61	@ViewChild('origin', { static: true }) origin: CdkOverlayOrigin;	157✔
62	@ViewChild(CdkConnectedOverlay, { static: true }) cdkConnectedOverlay: CdkConnectedOverlay;	157✔
63	@ViewChild('pickerInput', { static: true }) pickerInput: ElementRef;	157✔
64	@ViewChild('overlayContainer', { static: false }) overlayContainer: ElementRef<HTMLElement>;
65
66	@Input()
67	get format() {	329✔
68	return this.innerFormat;	8✔
69	}	5✔
70
71	set format(value: string) {
72	this.innerFormat = value;	3✔
73	this.updateReadableDate(this.innerValue);
74	}
75
76	@Input()
77	get flexibleDateGranularity() {	157✔
78	return this.innerflexibleDateGranularity;	157✔
79	}	1✔
80
81	set flexibleDateGranularity(granularity: ThyDateGranularity) {
82	this.innerflexibleDateGranularity = granularity;
83	this.updateReadableDate(this.innerValue);	57✔
84	}
85
86	@Input()	5✔
87	get value() {	5!
88	return this.innerValue;	5✔
89	}
90		5✔
91	set value(value: TinyDate \| TinyDate[] \| null) {
92	this.innerValue = value;
93	if (!this.entering) {	17✔
94	this.updateReadableDate(this.innerValue);	17✔
95	}	17✔
96	}
97
98	private innerflexibleDateGranularity: ThyDateGranularity;	8!
UNCOV 99		×
100	private innerFormat: string;
101		8!
102	private innerValue: TinyDate \| TinyDate[] \| null;	8✔
103
104	entering = false;
105		123✔
106	prefixCls = 'thy-calendar';	122✔
107		122✔
108	isShowDatePopup = false;	122✔
109		122✔
110	overlayOpen = false; // Available when "open"=undefined	122!
111		122✔
112	overlayPositions = getFlexiblePositions(this.placement, 4);
113
114	get realOpenState(): boolean {
115	// The value that really decide the open state of overlay
116	return this.isOpenHandledByUser() ? !!this.open : this.overlayOpen;
117	}	107✔
118		55✔
119	get readonlyState(): boolean {	55✔
120	return this.isRange \|\| this.readonly \|\| this.mode !== 'date';	55✔
121	}	55✔
122
123	constructor(
124	private changeDetector: ChangeDetectorRef,
125	private dateHelper: DateHelperService	127✔
126	) {}	127✔
127
128	ngOnChanges(changes: SimpleChanges): void {
129	// open by user
130	if (changes.open && changes.open.currentValue !== undefined) {	58✔
131	if (changes.open.currentValue) {	58✔
132	this.showDatePopup();	58✔
133	} else {
134	this.closeDatePopup();
135	}
136	}	126✔
137	}	123✔
138
139	ngAfterViewInit(): void {
140	this.overlayPositions = getFlexiblePositions(this.placement, 4);
141	if (this.autoFocus) {	12✔
142	this.focus();
143	}
144	}	50✔
145
146	focus(): void {
147	this.pickerInput.nativeElement.focus();	126✔
148	}
149
150	onBlur(event: FocusEvent) {	6✔
151	this.blur.emit(event);	6✔
152	if (this.entering) {	6✔
153	this.valueChange.emit(this.pickerInput.nativeElement.value);	6✔
154	}
155	this.entering = false;
UNCOV 156	}	×
157
158	onInput(event: InputEvent) {
159	this.entering = true;	642✔
160	const inputValue = (event.target as HTMLElement)['value'];	259✔
161	this.inputChange.emit(inputValue);
162	}	383✔
163		235✔
164	onEnter() {
165	if (this.readonlyState) {
166	return;	148✔
167	}
168	this.valueChange.emit(this.pickerInput.nativeElement.value \|\| this.getReadableValue(new TinyDate(new Date())));
169	this.entering = false;
170	}
171		1,653✔
172	showOverlay(): void {
173	if (!this.realOpenState) {
174	this.overlayOpen = true;
175	this.showDatePopup();	675✔
176		252✔
177	this.openChange.emit(this.overlayOpen);	46✔
178	setTimeout(() => {
179	if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
180	this.cdkConnectedOverlay.overlayRef.updatePosition();	206✔
181	}	206✔
182	});	206✔
183	}
184	}
185
186	hideOverlay(): void {	423✔
187	if (this.realOpenState) {	423✔
188	this.overlayOpen = false;
189	this.closeDatePopup();
190
191	this.openChange.emit(this.overlayOpen);
192	this.focus();
193	}	197✔
194	}	13✔
195
196	showDatePopup() {
197	this.isShowDatePopup = true;	184✔
198	this.changeDetector.markForCheck();
199	}
200
201	closeDatePopup() {	642✔
202	// Delay 200ms before destroying the date-popup, otherwise you will not see the closing animation.
203	setTimeout(() => {
204	this.isShowDatePopup = false;
205	this.changeDetector.markForCheck();
206	}, 200);	628✔
207	}	628✔
208		40✔
209	onClickInputBox(): void {
210	if (!this.disabled && !this.readonly && !this.isOpenHandledByUser()) {	588✔
211	this.showOverlay();
212	}	1✔
213	}
214
215	onClickBackdrop(): void {
216	this.hideOverlay();	1✔
217	}
218
219	onOverlayDetach(): void {
220	this.hideOverlay();
221	}
222
223	onPositionChange(position: ConnectedOverlayPositionChange): void {
224	this.changeDetector.detectChanges();
225	}
226
227	onClickClear(event: MouseEvent): void {
228	event.preventDefault();
229	event.stopPropagation();
230
231	this.innerValue = this.isRange ? [] : null;
232	this.valueChange.emit(this.innerValue);
233	}
234
235	getPartTypeIndex(partType: RangePartType): number {
236	return { left: 0, right: 1 }[partType];
237	}
238
239	isEmptyValue(value: CompatibleValue \| null): boolean {
240	if (value === null) {
241	return true;
242	} else if (this.isRange) {
243	return !value \|\| !Array.isArray(value) \|\| value.every(val => !val);
244	} else {	1✔
245	return !value;
246	}
247	}
248
249	// Whether open state is permanently controlled by user himself
250	isOpenHandledByUser(): boolean {
251	return this.open !== undefined;
252	}
253
254	getReadableValue(tinyDate: TinyDate \| TinyDate[]): string \| null {
255	let value: TinyDate;
256	if (this.isRange) {
257	if (this.flexible && this.innerflexibleDateGranularity !== 'day') {
258	return getFlexibleAdvancedReadableValue(tinyDate as TinyDate[], this.innerflexibleDateGranularity);
259	} else {
260	const start = tinyDate[0] ? this.formatDate(tinyDate[0]) : '';
261	const end = tinyDate[1] ? this.formatDate(tinyDate[1]) : '';
262	return start && end ? `${start} ~ ${end}` : null;
263	}
264	} else {
265	value = tinyDate as TinyDate;
266	return value ? this.formatDate(value) : null;
267	}
268	}
269
270	formatDate(value: TinyDate) {
271	// dateHelper.format() 使用的是 angular 的 format，不支持季度，修改的话，改动比较大。
272	// 此处通过对 innerFormat 做下判断，如果是季度的 format，使用 date-fns 的 format()
273	if (this.innerFormat && (this.innerFormat.includes('q') \|\| this.innerFormat.includes('Q'))) {
274	return value.format(this.innerFormat);
275	} else {
276	return this.dateHelper.format(value.nativeDate, this.innerFormat);
277	}
278	}
279
280	getPlaceholder(): string {
281	return this.isRange && this.placeholder && Array.isArray(this.placeholder)
282	? (this.placeholder as string[]).join(' ~ ')
283	: (this.placeholder as string);
284	}
285
286	private updateReadableDate(setValue: TinyDate \| TinyDate[] \| null) {
287	const readableValue = this.getReadableValue(setValue);
288	if (readableValue === this.pickerInput.nativeElement['value']) {
289	return;
290	}
291
292	this.pickerInput.nativeElement.value = readableValue;
293	}
294	}

atinc / ngx-tethys / 5fa9630c-19a1-4ee7-af3d-6a0c3535952a

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