e086eecc-3f1a-48af-96be-e245ad010747

Committed 18 Nov 2024 07:27AM UTC coverage: 90.349% (-0.004%) from 90.353%

Build # e086eecc-3f1a-48af-96be-e245ad010747

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat(time-picker): support i18n #TINFR-1001

Run Details

5522 of 6760 branches covered (81.69%)

Branch coverage included in aggregate %.

4 of 4 new or added lines in 2 files covered. (100.0%)

5 existing lines in 3 files now uncovered.

13201 of 13963 relevant lines covered (94.54%)

996.2 hits per line

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

92.96

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

import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    forwardRef,
    Input,
    NgZone,
    OnDestroy,
    OnInit,
    Output,
    ViewChild,
    inject,
    Signal
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { isValid } from 'date-fns';
import { reqAnimFrame } from 'ngx-tethys/core';
import { coerceBooleanProperty, TinyDate } from 'ngx-tethys/util';
import { ThyButton } from 'ngx-tethys/button';
import { DecimalPipe } from '@angular/common';
import { injectLocale, ThyTimePickerLocale } from 'ngx-tethys/i18n';

/**
 * 时间选择面板组件
 * @name thy-time-picker-panel
 */
@Component({
    selector: 'thy-time-picker-panel',
    templateUrl: './time-picker-panel.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            multi: true,
            useExisting: forwardRef(() => ThyTimePanel)
        }
    ],
    host: {
        class: 'thy-time-picker-panel',
        '[class.thy-time-picker-panel-has-bottom-operation]': `thyShowOperations`,
        '[class.thy-time-picker-panel-columns-2]': `showColumnCount === 2`,
        '[class.thy-time-picker-panel-columns-3]': `showColumnCount === 3`
    },
    standalone: true,
    imports: [ThyButton, DecimalPipe]
})
export class ThyTimePanel implements OnInit, OnDestroy, ControlValueAccessor {
    private cdr = inject(ChangeDetectorRef);
    private ngZone = inject(NgZone);
    locale: Signal<ThyTimePickerLocale> = injectLocale('timePicker');

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

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

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

    /**
     * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
     * @type string
     * @default HH:mm:ss
     */
    @Input() set thyFormat(value: string) {
        if (value) {
            const formatSet = new Set(value);
            this.showHourColumn = formatSet.has('H') || formatSet.has('h');
            this.showMinuteColumn = formatSet.has('m');
            this.showSecondColumn = formatSet.has('s');
        } else {
            this.showHourColumn = true;
            this.showMinuteColumn = true;
            this.showSecondColumn = true;
        }
        this.showColumnCount = [this.showHourColumn, this.showMinuteColumn, this.showSecondColumn].filter(m => m).length;
        this.cdr.markForCheck();
    }

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

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

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

    /**
     * 展示选择此刻
     * @type boolean
     */
    @Input({ transform: coerceBooleanProperty }) thyShowSelectNow = true;

    /**
     * 展示底部操作
     * @type boolean
     */
    @Input({ transform: coerceBooleanProperty }) thyShowOperations = true;

    /**
     * 选择时间触发的事件
     * @type EventEmitter<Date>
     */
    @Output() thyPickChange = new EventEmitter<Date>();

    /**
     * 关闭面板事件
     * @type EventEmitter<void>
     */
    @Output() thyClosePanel = new EventEmitter<void>();

    // margin-top + 1px border
    SCROLL_OFFSET_SPACING = 5;

    SCROLL_DEFAULT_DURATION = 120;

    prefixCls = 'thy-time-picker-panel';

    hourRange: ReadonlyArray<{ value: number; disabled: boolean }> = [];

    minuteRange: ReadonlyArray<{ value: number; disabled: boolean }> = [];

    secondRange: ReadonlyArray<{ value: number; disabled: boolean }> = [];

    showHourColumn = true;

    showMinuteColumn = true;

    showSecondColumn = true;

    showColumnCount: number = 3;

    value: Date;

    hour: number;

    minute: number;

    second: number;

    initialScrollPosition: boolean;

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

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

    ngOnInit(): void {
        this.generateTimeRange();
        this.initialValue();
        setTimeout(() => {
            this.initialScrollPosition = true;
        });
    }

    generateTimeRange() {
        this.hourRange = this.buildTimeRange(24, this.thyHourStep);
        this.minuteRange = this.buildTimeRange(60, this.thyMinuteStep);
        this.secondRange = this.buildTimeRange(60, this.thySecondStep);
    }

    pickHours(hours: { value: number; disabled: boolean }, index: number) {
        this.value.setHours(hours.value);
        this.hour = hours.value;
        this.thyPickChange.emit(this.value);
        this.scrollTo(this.hourListRef.nativeElement, index);
    }

    pickMinutes(minutes: { value: number; disabled: boolean }, index: number) {
        this.value.setMinutes(minutes.value);
        this.minute = minutes.value;
        this.thyPickChange.emit(this.value);
        this.scrollTo(this.minuteListRef.nativeElement, index);
    }

    pickSeconds(seconds: { value: number; disabled: boolean }, index: number) {
        this.value.setSeconds(seconds.value);
        this.second = seconds.value;
        this.thyPickChange.emit(this.value);
        this.scrollTo(this.secondListRef.nativeElement, index);
    }

    selectNow() {
        this.value = new Date();
        this.setHMSProperty();
        this.thyPickChange.emit(this.value);
        this.thyClosePanel.emit();
    }

    confirmPickTime() {
        this.onValueChangeFn(this.value || new Date());
        this.thyClosePanel.emit();
    }

    scrollTo(container: HTMLElement, index: number = 0, duration: number = this.SCROLL_DEFAULT_DURATION) {
        const offsetTop = (container.children[index] as HTMLElement).offsetTop - this.SCROLL_OFFSET_SPACING;
        this.runScrollAnimationFrame(container, offsetTop, duration);
    }

    writeValue(value: Date | number): void {
        if (value && isValid(value)) {
            this.value = new Date(value);
            this.setHMSProperty();
        } else {
            this.initialValue();
        }
        this.autoScroll(this.initialScrollPosition ? this.SCROLL_DEFAULT_DURATION : 0);

        this.cdr.markForCheck();
    }

    registerOnChange(fn: (value: Date) => void): void {
        this.onValueChangeFn = fn;
    }

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

    private initialValue() {
        this.hour = 0;
        this.minute = 0;
        this.second = 0;
        this.value = new TinyDate().setHms(0, 0, 0).nativeDate;
    }

    private buildTimeRange(length: number, step: number = 1, start: number = 0, disables: number[] = []) {
        return new Array(Math.ceil(length / step)).fill(0).map((_, i) => {
            const value = (i + start) * step;
            return {
                value: value,
                disabled: disables.indexOf(value) > -1
            };
        });
    }

    private setHMSProperty() {
        this.hour = this.value.getHours();
        this.minute = this.value.getMinutes();
        this.second = this.value.getSeconds();
    }

    private resetScrollPosition() {
        if (this.hourListRef) {
            this.hourListRef.nativeElement.scrollTop = 0;
        }
        if (this.minuteListRef) {
            this.minuteListRef.nativeElement.scrollTop = 0;
        }
        if (this.secondListRef) {
            this.secondListRef.nativeElement.scrollTop = 0;
        }
        this.initialScrollPosition = false;
    }

    private runScrollAnimationFrame(container: HTMLElement, to: number, duration: number = this.SCROLL_DEFAULT_DURATION) {
        if (duration <= 0) {
            container.scrollTop = to;
            return;
        }
        const offset = to - container.scrollTop;
        const frame = (offset / duration) * 10;
        this.ngZone.runOutsideAngular(() => {
            reqAnimFrame(() => {
                container.scrollTop += frame;
                if (container.scrollTop === to) {
                    return;
                }
                this.runScrollAnimationFrame(container, to, duration - 10);
            });
        });
    }

    private autoScroll(duration: number = this.SCROLL_DEFAULT_DURATION) {
        if (this.hourListRef) {
            this.scrollTo(
                this.hourListRef.nativeElement,
                this.hourRange.findIndex(m => m.value === this.hour),
                duration
            );
        }
        if (this.minuteListRef) {
            this.scrollTo(
                this.minuteListRef.nativeElement,
                this.minuteRange.findIndex(m => m.value === this.minute),
                duration
            );
        }
        if (this.secondListRef) {
            this.scrollTo(
                this.secondListRef.nativeElement,
                this.secondRange.findIndex(m => m.value === this.second),
                duration
            );
        }
    }

    ngOnDestroy(): void {
        // 关闭面板时有 0.2s 的动画，所以延迟 200ms 再重置滚动位置
        setTimeout(() => {
            this.resetScrollPosition();
        }, 200);
    }
}

1	import {
2	ChangeDetectionStrategy,
3	ChangeDetectorRef,
4	Component,
5	ElementRef,
6	EventEmitter,
7	forwardRef,
8	Input,
9	NgZone,
10	OnDestroy,
11	OnInit,
12	Output,
13	ViewChild,
14	inject,
15	Signal	1✔
16	} from '@angular/core';
17	import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';	23✔
18	import { isValid } from 'date-fns';	23✔
19	import { reqAnimFrame } from 'ngx-tethys/core';	23✔
20	import { coerceBooleanProperty, TinyDate } from 'ngx-tethys/util';	23✔
21	import { ThyButton } from 'ngx-tethys/button';	23✔
22	import { DecimalPipe } from '@angular/common';	23✔
23	import { injectLocale, ThyTimePickerLocale } from 'ngx-tethys/i18n';	23✔
24		23✔
25	/**	23✔
26	* 时间选择面板组件	23✔
27	* @name thy-time-picker-panel
28	*/	23✔
29	@Component({	23✔
30	selector: 'thy-time-picker-panel',	23✔
31	templateUrl: './time-picker-panel.component.html',	23✔
32	changeDetection: ChangeDetectionStrategy.OnPush,	23✔
33	providers: [	23✔
34	{	23✔
35	provide: NG_VALUE_ACCESSOR,	23✔
36	multi: true,	23✔
37	useExisting: forwardRef(() => ThyTimePanel)	23✔
38	}	23✔
39	],	23✔
40	host: {
41	class: 'thy-time-picker-panel',
42	'[class.thy-time-picker-panel-has-bottom-operation]': `thyShowOperations`,	25✔
43	'[class.thy-time-picker-panel-columns-2]': `showColumnCount === 2`,	24✔
44	'[class.thy-time-picker-panel-columns-3]': `showColumnCount === 3`	24!
45	},	24✔
46	standalone: true,	24✔
47	imports: [ThyButton, DecimalPipe]
48	})
49	export class ThyTimePanel implements OnInit, OnDestroy, ControlValueAccessor {	1✔
50	private cdr = inject(ChangeDetectorRef);	1✔
51	private ngZone = inject(NgZone);	1✔
52	locale: Signal<ThyTimePickerLocale> = injectLocale('timePicker');
53		75✔
54	@ViewChild('hourListElement', { static: false }) hourListRef: ElementRef<HTMLElement>;	25✔
55
56	@ViewChild('minuteListElement', { static: false }) minuteListRef: ElementRef<HTMLElement>;
57		23✔
58	@ViewChild('secondListElement', { static: false }) secondListRef: ElementRef<HTMLElement>;	23✔
59		23✔
60	/**	23✔
61	* 展示的日期格式，支持 'HH:mm:ss' \| 'HH:mm' \| 'mm:ss'
62	* @type string
63	* @default HH:mm:ss
64	*/	23✔
65	@Input() set thyFormat(value: string) {	23✔
66	if (value) {	23✔
67	const formatSet = new Set(value);
68	this.showHourColumn = formatSet.has('H') \|\| formatSet.has('h');
69	this.showMinuteColumn = formatSet.has('m');	4✔
70	this.showSecondColumn = formatSet.has('s');	4✔
71	} else {	4✔
72	this.showHourColumn = true;	4✔
73	this.showMinuteColumn = true;
74	this.showSecondColumn = true;
75	}	3✔
76	this.showColumnCount = [this.showHourColumn, this.showMinuteColumn, this.showSecondColumn].filter(m => m).length;	3✔
77	this.cdr.markForCheck();	3✔
78	}	3✔
79
80	/**
81	* 小时间隔步长	3✔
82	* @type number	3✔
83	*/	3✔
84	@Input() thyHourStep: number = 1;	3✔
85
86	/**
87	* 分钟间隔步长	1✔
88	* @type number	1✔
89	*/	1✔
90	@Input() thyMinuteStep: number = 1;	1✔
91
92	/**
93	* 秒间隔步长	2!
94	* @type number	2✔
95	*/
96	@Input() thySecondStep: number = 1;	10!
97		121✔
98	/**	121✔
99	* 展示选择此刻
100	* @type boolean
101	*/	60✔
102	@Input({ transform: coerceBooleanProperty }) thyShowSelectNow = true;	31✔
103		31✔
104	/**
105	* 展示底部操作
106	* @type boolean	29✔
107	*/
108	@Input({ transform: coerceBooleanProperty }) thyShowOperations = true;	60✔
109		60✔
110	/**
111	* 选择时间触发的事件
112	* @type EventEmitter<Date>	23✔
113	*/
114	@Output() thyPickChange = new EventEmitter<Date>();
115		23✔
116	/**
117	* 关闭面板事件
118	* @type EventEmitter<void>	52✔
119	*/	52✔
120	@Output() thyClosePanel = new EventEmitter<void>();	52✔
121		52✔
122	// margin-top + 1px border
123	SCROLL_OFFSET_SPACING = 5;	180✔
124		69✔
125	SCROLL_DEFAULT_DURATION = 120;	3,052✔
126		3,052✔
127	prefixCls = 'thy-time-picker-panel';
128
129	hourRange: ReadonlyArray<{ value: number; disabled: boolean }> = [];
130
131	minuteRange: ReadonlyArray<{ value: number; disabled: boolean }> = [];
132
133	secondRange: ReadonlyArray<{ value: number; disabled: boolean }> = [];	32✔
134		32✔
135	showHourColumn = true;	32✔
136
137	showMinuteColumn = true;
138		23!
139	showSecondColumn = true;	23✔
140
141	showColumnCount: number = 3;	23!
142		23✔
143	value: Date;
144		23!
145	hour: number;	23✔
146
147	minute: number;	23✔
148
149	second: number;	×
150		265✔
151	initialScrollPosition: boolean;	114✔
152		114✔
153	onValueChangeFn: (val: Date) => void = () => void 0;
154		151✔
155	onTouchedFn: () => void = () => void 0;	151✔
156		151✔
157	ngOnInit(): void {	151✔
158	this.generateTimeRange();	144✔
159	this.initialValue();	144!
UNCOV 160	setTimeout(() => {	×
161	this.initialScrollPosition = true;
162	});	144✔
163	}
164
165	generateTimeRange() {
166	this.hourRange = this.buildTimeRange(24, this.thyHourStep);	×
167	this.minuteRange = this.buildTimeRange(60, this.thyMinuteStep);	60✔
168	this.secondRange = this.buildTimeRange(60, this.thySecondStep);	151✔
169	}
170		60✔
171	pickHours(hours: { value: number; disabled: boolean }, index: number) {	299✔
172	this.value.setHours(hours.value);
173	this.hour = hours.value;	60✔
174	this.thyPickChange.emit(this.value);	247✔
175	this.scrollTo(this.hourListRef.nativeElement, index);
176	}
177
178	pickMinutes(minutes: { value: number; disabled: boolean }, index: number) {
179	this.value.setMinutes(minutes.value);	23✔
180	this.minute = minutes.value;	23✔
181	this.thyPickChange.emit(this.value);
182	this.scrollTo(this.minuteListRef.nativeElement, index);
183	}	1✔
184
185	pickSeconds(seconds: { value: number; disabled: boolean }, index: number) {
186	this.value.setSeconds(seconds.value);
187	this.second = seconds.value;
188	this.thyPickChange.emit(this.value);
189	this.scrollTo(this.secondListRef.nativeElement, index);
190	}
191
192	selectNow() {
193	this.value = new Date();
194	this.setHMSProperty();
195	this.thyPickChange.emit(this.value);
196	this.thyClosePanel.emit();
197	}	1✔
198
199	confirmPickTime() {
200	this.onValueChangeFn(this.value \|\| new Date());
201	this.thyClosePanel.emit();
202	}
203
204	scrollTo(container: HTMLElement, index: number = 0, duration: number = this.SCROLL_DEFAULT_DURATION) {
205	const offsetTop = (container.children[index] as HTMLElement).offsetTop - this.SCROLL_OFFSET_SPACING;
206	this.runScrollAnimationFrame(container, offsetTop, duration);	23✔
207	}
208
209	writeValue(value: Date \| number): void {
210	if (value && isValid(value)) {
211	this.value = new Date(value);
212	this.setHMSProperty();
213	} else {
214	this.initialValue();
215	}
216	this.autoScroll(this.initialScrollPosition ? this.SCROLL_DEFAULT_DURATION : 0);
217
218	this.cdr.markForCheck();
219	}
220
221	registerOnChange(fn: (value: Date) => void): void {
222	this.onValueChangeFn = fn;
223	}
224
225	registerOnTouched(fn: () => void): void {
226	this.onTouchedFn = fn;
227	}
228
229	private initialValue() {
230	this.hour = 0;
231	this.minute = 0;
232	this.second = 0;
233	this.value = new TinyDate().setHms(0, 0, 0).nativeDate;
234	}
235
236	private buildTimeRange(length: number, step: number = 1, start: number = 0, disables: number[] = []) {
237	return new Array(Math.ceil(length / step)).fill(0).map((_, i) => {
238	const value = (i + start) * step;
239	return {
240	value: value,
241	disabled: disables.indexOf(value) > -1
242	};
243	});
244	}
245
246	private setHMSProperty() {
247	this.hour = this.value.getHours();
248	this.minute = this.value.getMinutes();
249	this.second = this.value.getSeconds();
250	}
251
252	private resetScrollPosition() {
253	if (this.hourListRef) {
254	this.hourListRef.nativeElement.scrollTop = 0;
255	}
256	if (this.minuteListRef) {
257	this.minuteListRef.nativeElement.scrollTop = 0;
258	}
259	if (this.secondListRef) {
260	this.secondListRef.nativeElement.scrollTop = 0;
261	}
262	this.initialScrollPosition = false;
263	}
264
265	private runScrollAnimationFrame(container: HTMLElement, to: number, duration: number = this.SCROLL_DEFAULT_DURATION) {
266	if (duration <= 0) {
267	container.scrollTop = to;
268	return;
269	}
270	const offset = to - container.scrollTop;
271	const frame = (offset / duration) * 10;
272	this.ngZone.runOutsideAngular(() => {
273	reqAnimFrame(() => {
274	container.scrollTop += frame;
275	if (container.scrollTop === to) {
276	return;
277	}
278	this.runScrollAnimationFrame(container, to, duration - 10);
279	});
280	});
281	}
282
283	private autoScroll(duration: number = this.SCROLL_DEFAULT_DURATION) {
284	if (this.hourListRef) {
285	this.scrollTo(
286	this.hourListRef.nativeElement,
287	this.hourRange.findIndex(m => m.value === this.hour),
288	duration
289	);
290	}
291	if (this.minuteListRef) {
292	this.scrollTo(
293	this.minuteListRef.nativeElement,
294	this.minuteRange.findIndex(m => m.value === this.minute),
295	duration
296	);
297	}
298	if (this.secondListRef) {
299	this.scrollTo(
300	this.secondListRef.nativeElement,
301	this.secondRange.findIndex(m => m.value === this.second),
302	duration
303	);
304	}
305	}
306
307	ngOnDestroy(): void {
308	// 关闭面板时有 0.2s 的动画，所以延迟 200ms 再重置滚动位置
309	setTimeout(() => {
310	this.resetScrollPosition();
311	}, 200);
312	}
313	}

atinc / ngx-tethys / e086eecc-3f1a-48af-96be-e245ad010747

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