d9ae709b-3c27-4b69-b125-b8b80b54f90b

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

import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, TemplateRef } from '@angular/core';

import { AbstractPickerComponent } from './abstract-picker.component';
import { CompatibleValue, RangeAdvancedValue } from './inner-types';
import { CompatibleDate, ThyPanelMode } from './standard-types';

/**
 * @private
 */
@Component({
    template: ``,
    standalone: true,
    host: {
        '[attr.tabindex]': `tabIndex`,
        '(focus)': 'onFocus($event)',
        '(blur)': 'onBlur($event)'
    }
})
export class BasePickerComponent extends AbstractPickerComponent implements OnInit, OnChanges {
    showWeek = false;

    panelMode: ThyPanelMode | ThyPanelMode[];

    @Input() thyDateRender: FunctionProp<TemplateRef<Date> | string>;

    /**
     * @type EventEmitter<ThyPanelMode | ThyPanelMode[]>
     */
    @Output() readonly thyOnPanelChange = new EventEmitter<ThyPanelMode | ThyPanelMode[]>();

    /**
     * @type EventEmitter<Date[]>
     */
    @Output() readonly thyOnCalendarChange = new EventEmitter<Date[]>();

    private _showTime: object | boolean;

    /**
     * 增加时间选择功能
     * @default false
     */
    @Input() get thyShowTime(): object | boolean {
        return this._showTime;
    }
    set thyShowTime(value: object | boolean) {
        this._showTime = typeof value === 'object' ? value : coerceBooleanProperty(value);
    }

    /**
     * 是否展示时间(时、分)
     * @default false
     */
    @Input() @InputBoolean() thyMustShowTime = false;

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

    /**
     * @type EventEmitter<CompatibleDate | null>
     */
    @Output() readonly thyOnOk = new EventEmitter<CompatibleDate | null>();

    constructor(cdr: ChangeDetectorRef, protected element: ElementRef) {
        super(cdr);
    }

    ngOnInit(): void {
        super.ngOnInit();
        this.setDefaultTimePickerState();
    }

    onValueChange(value: CompatibleValue | RangeAdvancedValue): void {
        this.restoreTimePickerState(value as CompatibleValue);
        super.onValueChange(value);
        if (!this.flexible) {
            this.closeOverlay();
        }
    }

    // Displays the time directly when the time must be displayed by default
    setDefaultTimePickerState() {
        this.thyMode = this.thyMode || 'date';
        this.withTime = this.thyMustShowTime;
        if (this.isRange) {
            this.panelMode = this.flexible ? ['date', 'date'] : [this.thyMode, this.thyMode];
        } else {
            this.panelMode = this.thyMode;
        }
        this.showWeek = this.thyMode === 'week';
        if (!this.thyFormat) {
            const inputFormats: { [key in ThyPanelMode]?: string } = {
                year: 'yyyy',
                month: 'yyyy-MM',
                week: 'yyyy-ww周',
                date: this.thyShowTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'
            };
            this.thyFormat = this.flexible ? inputFormats['date'] : inputFormats[this.thyMode];
        }
    }

    // Restore after clearing time to select whether the original picker time is displayed or not
    restoreTimePickerState(value: CompatibleValue | null) {
        if (!value) {
            this.withTime = this.thyMustShowTime || this.originWithTime;
        }
    }

    // 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();
    }
}

1	import { InputBoolean, ThyPlacement } from 'ngx-tethys/core';
2	import { coerceBooleanProperty, elementMatchClosest, FunctionProp, TinyDate } from 'ngx-tethys/util';
3
4	import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, TemplateRef } from '@angular/core';
5
6	import { AbstractPickerComponent } from './abstract-picker.component';
7	import { CompatibleValue, RangeAdvancedValue } from './inner-types';
8	import { CompatibleDate, ThyPanelMode } from './standard-types';
9		1✔
10	/**
11	* @private	×
12	*/
13	@Component({
14	template: ``,	×
15	standalone: true,
16	host: {
17	'[attr.tabindex]': `tabIndex`,	×
18	'(focus)': 'onFocus($event)',	×
19	'(blur)': 'onBlur($event)'	×
20	}	×
21	})	×
22	export class BasePickerComponent extends AbstractPickerComponent implements OnInit, OnChanges {	×
23	showWeek = false;	×
24		×
25	panelMode: ThyPanelMode \| ThyPanelMode[];
26
27	@Input() thyDateRender: FunctionProp<TemplateRef<Date> \| string>;	×
28		×
29	/**
30	* @type EventEmitter<ThyPanelMode \| ThyPanelMode[]>
31	*/	×
32	@Output() readonly thyOnPanelChange = new EventEmitter<ThyPanelMode \| ThyPanelMode[]>();	×
33		×
34	/**	×
35	* @type EventEmitter<Date[]>
36	*/
37	@Output() readonly thyOnCalendarChange = new EventEmitter<Date[]>();
38
39	private _showTime: object \| boolean;	×
40		×
41	/**	×
42	* 增加时间选择功能	×
43	* @default false
44	*/
45	@Input() get thyShowTime(): object \| boolean {	×
46	return this._showTime;
47	}	×
48	set thyShowTime(value: object \| boolean) {	×
49	this._showTime = typeof value === 'object' ? value : coerceBooleanProperty(value);	×
50	}
51
52	/**
53	* 是否展示时间(时、分)	×
54	* @default false
55	*/	×
56	@Input() @InputBoolean() thyMustShowTime = false;
57
58	/**
59	* 弹出位置
60	* @type top \| topLeft \| topRight \| bottom \| bottomLeft \| bottomRight \| left \| leftTop \| leftBottom \| right \| rightTop \| rightBottom	×
61	*/	×
62	@Input() thyPlacement: ThyPlacement = 'bottomLeft';
63
64	/**
65	* @type EventEmitter<CompatibleDate \| null>
66	*/	×
67	@Output() readonly thyOnOk = new EventEmitter<CompatibleDate \| null>();	×
68		×
69	constructor(cdr: ChangeDetectorRef, protected element: ElementRef) {
70	super(cdr);
71	}
72		×
73	ngOnInit(): void {
74	super.ngOnInit();
75	this.setDefaultTimePickerState();	×
76	}	×
77		×
78	onValueChange(value: CompatibleValue \| RangeAdvancedValue): void {	×
79	this.restoreTimePickerState(value as CompatibleValue);
80	super.onValueChange(value);
81	if (!this.flexible) {	×
82	this.closeOverlay();
83	}
84	}
85		×
86	// Displays the time directly when the time must be displayed by default	×
87	setDefaultTimePickerState() {
88	this.thyMode = this.thyMode \|\| 'date';
89	this.withTime = this.thyMustShowTime;	×
90	if (this.isRange) {
91	this.panelMode = this.flexible ? ['date', 'date'] : [this.thyMode, this.thyMode];
92	} else {	×
93	this.panelMode = this.thyMode;
94	}
95	this.showWeek = this.thyMode === 'week';	×
96	if (!this.thyFormat) {	×
97	const inputFormats: { [key in ThyPanelMode]?: string } = {	×
98	year: 'yyyy',
99	month: 'yyyy-MM',
100	week: 'yyyy-ww周',
101	date: this.thyShowTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'	×
102	};
103	this.thyFormat = this.flexible ? inputFormats['date'] : inputFormats[this.thyMode];
104	}
105	}	×
106		×
107	// Restore after clearing time to select whether the original picker time is displayed or not
108	restoreTimePickerState(value: CompatibleValue \| null) {	×
109	if (!value) {
110	this.withTime = this.thyMustShowTime \|\| this.originWithTime;	1✔
111	}
112	}
113
114	// Emit thyOnCalendarChange when select date by thy-range-picker	1✔
115	onCalendarChange(value: TinyDate[]): void {
116	if (this.isRange) {
117	const rangeValue = value.map(x => x.nativeDate);
118	this.thyOnCalendarChange.emit(rangeValue);
119	}
120	}
121
122	onShowTimePickerChange(show: boolean): void {
123	this.withTime = show;
124	}	1✔
125
126	onResultOk(): void {
127	if (this.isRange) {
128	const value = this.thyValue as TinyDate[];	1✔
129	if (value.length) {
130	this.thyOnOk.emit([value[0].nativeDate, value[1].nativeDate]);
131	} else {
132	this.thyOnOk.emit([]);
133	}
134	} else {
135	if (this.thyValue) {
136	this.thyOnOk.emit((this.thyValue as TinyDate).nativeDate);
137	} else {
138	this.thyOnOk.emit(null);
139	}
140	}
141	this.closeOverlay();
142	}
143
144	onOpenChange(open: boolean): void {
145	this.thyOpenChange.emit(open);
146	if (!open) {
147	this.onTouchedFn();
148	}
149	}
150
151	onFocus(event: Event) {
152	this.picker.focus();
153	}
154
155	onBlur(event?: FocusEvent) {
156	// Tab 聚焦后自动聚焦到 input 输入框，此分支下直接返回，无需触发 onTouchedFn
157	if (elementMatchClosest(event?.relatedTarget as HTMLElement, ['date-popup', 'thy-picker'])) {
158	return;
159	}
160	this.onTouchedFn();
161	}
162	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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