d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { TinyDate, valueFunctionProp } from 'ngx-tethys/util';

import { ChangeDetectionStrategy, Component, EventEmitter, OnChanges, Output } from '@angular/core';

import { DateHelperService } from '../../date-helper.service';
import { DateCell, DateBodyRow } from './types';
import { CalendarTable } from '../calendar/calendar-table.component';
import { DateTableCellComponent } from './date-table-cell.component';
import { NgIf, NgFor, NgClass } from '@angular/common';

/**
 * @private
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'date-table',
    exportAs: 'dateTable',
    templateUrl: 'date-table.component.html',
    standalone: true,
    imports: [NgIf, NgFor, NgClass, DateTableCellComponent]
})
export class DateTableComponent extends CalendarTable implements OnChanges {
    @Output() readonly dayHover = new EventEmitter<TinyDate>(); // Emitted when hover on a day by mouse enter

    constructor(private dateHelper: DateHelperService) {
        super();
    }

    private chooseDate(value: TinyDate): void {
        // Only change date not change time
        const newValue = this.activeDate.setYear(value.getYear()).setMonth(value.getMonth()).setDate(value.getDate());
        this.valueChange.emit(newValue);
    }

    makeHeadRow(): DateCell[] {
        const weekDays: DateCell[] = [];
        const start = this.activeDate.calendarStart({ weekStartsOn: this.dateHelper.getFirstDayOfWeek() });
        for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
            const day = start.addDays(colIndex);
            weekDays[colIndex] = {
                title: this.dateHelper.format(day.nativeDate, this.dateHelper.relyOnDatePipe ? 'E' : 'ddd'),
                content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()),
                isSelected: false,
                isDisabled: false,
                onClick(): void {},
                onMouseEnter(): void {}
            };
        }
        return weekDays;
    }

    private getVeryShortWeekFormat(): string {
        if (this.dateHelper.relyOnDatePipe) {
            return 'EEEEE'; // eg. 二
        }
        return 'dd';
    }

    makeBodyRows(): DateBodyRow[] {
        const dateRows: DateBodyRow[] = [];
        const firstDayOfMonth = this.activeDate.calendarStart({ weekStartsOn: this.dateHelper.getFirstDayOfWeek() });

        for (let week = 0; week < this.MAX_ROW; week++) {
            const weekStart = firstDayOfMonth.addDays(week * 7);
            const row: DateBodyRow = {
                isActive: false,
                isCurrent: false,
                dateCells: [],
                year: weekStart.getYear()
            };

            for (let day = 0; day < 7; day++) {
                const date = weekStart.addDays(day);
                const dateFormat = this.dateHelper.relyOnDatePipe ? 'longDate' : 'YYYY-MM-DD';
                const title = this.dateHelper.format(date.nativeDate, dateFormat);
                const label = this.dateHelper.format(date.nativeDate, this.dateHelper.relyOnDatePipe ? 'dd' : 'DD');

                const cell: DateCell = {
                    value: date.nativeDate,
                    label: label,
                    isSelected: false,
                    isDisabled: false,
                    isToday: false,
                    title: title,
                    dateCellRender: valueFunctionProp(this.cellRender, date),
                    content: `${date.getDate()}`,
                    onClick: () => this.chooseDate(date),
                    onMouseEnter: () => this.dayHover.emit(date)
                };
                this.addCellProperty(cell, date);

                if (this.showWeek && !row.weekNum) {
                    row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);
                }

                if (date.isToday()) {
                    cell.isToday = true;
                    row.isCurrent = true;
                }

                if (this.selectedValue?.length > 0) {
                    const [startSelected, endSelected] = this.selectedValue;
                    if (date.isSameDay(startSelected)) {
                        row.isActive = true;
                    }
                    if (date.isSameDay(endSelected)) {
                        row.isActive = true;
                    }
                } else if (date.isSameDay(this.value)) {
                    row.isActive = true;
                }

                row.dateCells.push(cell);
            }

            row.classMap = {
                [`${this.prefixCls}-current-week`]: row.isCurrent,
                [`${this.prefixCls}-active-week`]: row.isActive
            };

            dateRows.push(row);
        }

        return dateRows;
    }

    addCellProperty(cell: DateCell, date: TinyDate): void {
        if (this.selectedValue?.length > 0) {
            const [startSelected, endSelected] = this.selectedValue;
            if (startSelected?.isSameDay(date)) {
                cell.isSelected = true;
            }
            if (endSelected?.isSameDay(date)) {
                cell.isSelected = true;
            }
            cell.isStartSingle = startSelected && !endSelected;
            cell.isEndSingle = !startSelected && !!endSelected;
            cell.isInRange = startSelected?.isBeforeDay(date) && date.isBeforeDay(endSelected);
        } else {
            cell.isSelected = date.isSameDay(this.value);
        }
        cell.isLastMonthCell = date.isBeforeMonth(this.activeDate);
        cell.isNextMonthCell = date.isAfterMonth(this.activeDate);
        cell.isToday = date.isToday();
        cell.isDisabled = !!this.disabledDate?.(date.nativeDate);
        cell.classMap = this.getClassMap(cell);
    }

    getClassMap(cell: DateCell): { [key: string]: boolean } {
        return {
            [`${this.prefixCls}-cell`]: true,
            [`${this.prefixCls}-today`]: cell.isToday,
            [`${this.prefixCls}-last-month-cell`]: cell.isLastMonthCell,
            [`${this.prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
            [`${this.prefixCls}-selected-day`]: cell.isSelected,
            [`${this.prefixCls}-disabled-cell`]: cell.isDisabled,
            [`${this.prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
            [`${this.prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
        };
    }
}

1	import { TinyDate, valueFunctionProp } from 'ngx-tethys/util';
2
3	import { ChangeDetectionStrategy, Component, EventEmitter, OnChanges, Output } from '@angular/core';
4
5	import { DateHelperService } from '../../date-helper.service';
6	import { DateCell, DateBodyRow } from './types';
7	import { CalendarTable } from '../calendar/calendar-table.component';
8	import { DateTableCellComponent } from './date-table-cell.component';
9	import { NgIf, NgFor, NgClass } from '@angular/common';
10
11	/**
12	* @private	1✔
13	*/
14	@Component({	×
15	changeDetection: ChangeDetectionStrategy.OnPush,	×
16	// eslint-disable-next-line @angular-eslint/component-selector	×
17	selector: 'date-table',
18	exportAs: 'dateTable',
19	templateUrl: 'date-table.component.html',
20	standalone: true,	×
21	imports: [NgIf, NgFor, NgClass, DateTableCellComponent]	×
22	})
23	export class DateTableComponent extends CalendarTable implements OnChanges {
24	@Output() readonly dayHover = new EventEmitter<TinyDate>(); // Emitted when hover on a day by mouse enter	×
25		×
26	constructor(private dateHelper: DateHelperService) {	×
27	super();	×
28	}	×
29		×
30	private chooseDate(value: TinyDate): void {
31	// Only change date not change time
32	const newValue = this.activeDate.setYear(value.getYear()).setMonth(value.getMonth()).setDate(value.getDate());
33	this.valueChange.emit(newValue);
34	}
35
36	makeHeadRow(): DateCell[] {
37	const weekDays: DateCell[] = [];	×
38	const start = this.activeDate.calendarStart({ weekStartsOn: this.dateHelper.getFirstDayOfWeek() });
39	for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
40	const day = start.addDays(colIndex);	×
41	weekDays[colIndex] = {	×
42	title: this.dateHelper.format(day.nativeDate, this.dateHelper.relyOnDatePipe ? 'E' : 'ddd'),
43	content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()),	×
44	isSelected: false,
45	isDisabled: false,
46	onClick(): void {},	×
47	onMouseEnter(): void {}	×
48	};	×
49	}	×
50	return weekDays;	×
51	}
52
53	private getVeryShortWeekFormat(): string {
54	if (this.dateHelper.relyOnDatePipe) {
55	return 'EEEEE'; // eg. 二
56	}	×
57	return 'dd';	×
58	}	×
59		×
60	makeBodyRows(): DateBodyRow[] {	×
61	const dateRows: DateBodyRow[] = [];	×
62	const firstDayOfMonth = this.activeDate.calendarStart({ weekStartsOn: this.dateHelper.getFirstDayOfWeek() });
63
64	for (let week = 0; week < this.MAX_ROW; week++) {
65	const weekStart = firstDayOfMonth.addDays(week * 7);
66	const row: DateBodyRow = {
67	isActive: false,
68	isCurrent: false,
69	dateCells: [],
70	year: weekStart.getYear()	×
71	};	×
72
73	for (let day = 0; day < 7; day++) {	×
74	const date = weekStart.addDays(day);	×
75	const dateFormat = this.dateHelper.relyOnDatePipe ? 'longDate' : 'YYYY-MM-DD';	×
76	const title = this.dateHelper.format(date.nativeDate, dateFormat);
77	const label = this.dateHelper.format(date.nativeDate, this.dateHelper.relyOnDatePipe ? 'dd' : 'DD');	×
78		×
79	const cell: DateCell = {	×
80	value: date.nativeDate,
81	label: label,	×
82	isSelected: false,	×
83	isDisabled: false,	×
84	isToday: false,	×
85	title: title,
86	dateCellRender: valueFunctionProp(this.cellRender, date),	×
87	content: `${date.getDate()}`,	×
88	onClick: () => this.chooseDate(date),
89	onMouseEnter: () => this.dayHover.emit(date)
90	};	×
91	this.addCellProperty(cell, date);	×
92
93	if (this.showWeek && !row.weekNum) {	×
94	row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);
95	}	×
96
97	if (date.isToday()) {
98	cell.isToday = true;
99	row.isCurrent = true;	×
100	}
101		×
102	if (this.selectedValue?.length > 0) {
103	const [startSelected, endSelected] = this.selectedValue;
104	if (date.isSameDay(startSelected)) {	×
105	row.isActive = true;	×
106	}	×
107	if (date.isSameDay(endSelected)) {	×
108	row.isActive = true;
109	}	×
110	} else if (date.isSameDay(this.value)) {	×
111	row.isActive = true;
112	}	×
113		×
114	row.dateCells.push(cell);	×
115	}
116
117	row.classMap = {	×
118	[`${this.prefixCls}-current-week`]: row.isCurrent,
119	[`${this.prefixCls}-active-week`]: row.isActive	×
120	};	×
121		×
122	dateRows.push(row);	×
123	}	×
124
125	return dateRows;
126	}	×
127
128	addCellProperty(cell: DateCell, date: TinyDate): void {
129	if (this.selectedValue?.length > 0) {
130	const [startSelected, endSelected] = this.selectedValue;
131	if (startSelected?.isSameDay(date)) {
132	cell.isSelected = true;
133	}
134	if (endSelected?.isSameDay(date)) {
135	cell.isSelected = true;
136	}
137	cell.isStartSingle = startSelected && !endSelected;
138	cell.isEndSingle = !startSelected && !!endSelected;	1✔
139	cell.isInRange = startSelected?.isBeforeDay(date) && date.isBeforeDay(endSelected);
140	} else {
141	cell.isSelected = date.isSameDay(this.value);	1✔
142	}
143	cell.isLastMonthCell = date.isBeforeMonth(this.activeDate);
144	cell.isNextMonthCell = date.isAfterMonth(this.activeDate);
145	cell.isToday = date.isToday();	1✔
146	cell.isDisabled = !!this.disabledDate?.(date.nativeDate);
147	cell.classMap = this.getClassMap(cell);
148	}
149
150	getClassMap(cell: DateCell): { [key: string]: boolean } {
151	return {
152	[`${this.prefixCls}-cell`]: true,
153	[`${this.prefixCls}-today`]: cell.isToday,
154	[`${this.prefixCls}-last-month-cell`]: cell.isLastMonthCell,
155	[`${this.prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
156	[`${this.prefixCls}-selected-day`]: cell.isSelected,
157	[`${this.prefixCls}-disabled-cell`]: cell.isDisabled,
158	[`${this.prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
159	[`${this.prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
160	[`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
161	};
162	}
163	}

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