d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { ChangeDetectionStrategy, Component, OnChanges } from '@angular/core';
import { TinyDate } from 'ngx-tethys/util';
import { DateHelperService } from '../../date-helper.service';
import { CalendarTable } from '../calendar/calendar-table.component';
import { DateCell, DateBodyRow } from '../date/types';
import { NgFor, NgClass, NgSwitch, NgSwitchCase } from '@angular/common';

/**
 * @private
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'month-table',
    exportAs: 'monthTable',
    templateUrl: 'month-table.component.html',
    standalone: true,
    imports: [NgFor, NgClass, NgSwitch, NgSwitchCase]
})
export class MonthTableComponent extends CalendarTable implements OnChanges {
    MAX_ROW = 4;

    MAX_COL = 3;

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

    private chooseMonth(month: number): void {
        this.value = this.activeDate.setMonth(month);
        this.valueChange.emit(this.value);
        this.render();
    }

    makeHeadRow(): DateCell[] {
        return [];
    }

    makeBodyRows(): DateBodyRow[] {
        const months: DateBodyRow[] = [];
        let monthValue = 0;
        for (let rowIndex = 0; rowIndex < this.MAX_ROW; rowIndex++) {
            const row: DateBodyRow = {
                dateCells: [],
                trackByIndex: rowIndex
            };
            for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
                const month = this.activeDate.setMonth(monthValue);
                const isDisabled = this.disabledDate ? this.disabledDate(this.activeDate.setMonth(monthValue).nativeDate) : false;
                const content = this.dateHelper.format(month.nativeDate, 'MMMM');
                const cell: DateCell = {
                    trackByIndex: colIndex,
                    value: month.nativeDate,
                    isDisabled,
                    content,
                    title: content,
                    classMap: null,
                    isSelected: month.isSameMonth(this.value),
                    onClick: () => this.chooseMonth(cell.value.getMonth()),
                    onMouseEnter: () => {}
                };
                this.addCellProperty(cell, month);
                row.dateCells.push(cell);
                monthValue++;
            }
            months.push(row);
        }
        return months;
    }

    private addCellProperty(cell: DateCell, month: TinyDate): void {
        if (this.selectedValue?.length > 0) {
            const [startSelected, endSelected] = this.selectedValue;
            if (startSelected?.isSameMonth(month)) {
                cell.isSelectedStartDate = true;
                cell.isSelected = true;
            }

            if (endSelected?.isSameMonth(month)) {
                cell.isSelectedEndDate = true;
                cell.isSelected = true;
            }

            cell.isStartSingle = startSelected && !endSelected;
            cell.isEndSingle = !startSelected && !!endSelected;
            cell.isInRange = startSelected?.isBeforeMonth(month) && month?.isBeforeMonth(endSelected);
        } else if (month.isSameMonth(this.value)) {
            cell.isSelected = true;
        }
        cell.classMap = this.getClassMap(cell);
    }

    monthCellClick(event: Event, monthCell: DateCell) {
        event.stopPropagation();
        return monthCell.isDisabled ? null : monthCell.onClick();
    }

    getClassMap(cell: DateCell): { [key: string]: boolean } {
        return {
            [`${this.prefixCls}-month-panel-cell`]: true,
            [`${this.prefixCls}-month-panel-cell-disabled`]: cell.isDisabled,
            [`${this.prefixCls}-month-panel-selected-cell`]: cell.isSelected,
            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange,
            [`${this.prefixCls}-month-panel-current-cell`]:
                new TinyDate().getYear() === this.activeDate.getYear() && cell.value.getMonth() === new TinyDate().getMonth()
        };
    }
}

1	import { ChangeDetectionStrategy, Component, OnChanges } from '@angular/core';
2	import { TinyDate } from 'ngx-tethys/util';
3	import { DateHelperService } from '../../date-helper.service';
4	import { CalendarTable } from '../calendar/calendar-table.component';
5	import { DateCell, DateBodyRow } from '../date/types';
6	import { NgFor, NgClass, NgSwitch, NgSwitchCase } from '@angular/common';
7
8	/**
9	* @private
10	*/
11	@Component({	1✔
12	changeDetection: ChangeDetectionStrategy.OnPush,
13	// eslint-disable-next-line @angular-eslint/component-selector	×
14	selector: 'month-table',	×
15	exportAs: 'monthTable',	×
16	templateUrl: 'month-table.component.html',	×
17	standalone: true,
18	imports: [NgFor, NgClass, NgSwitch, NgSwitchCase]
19	})	×
20	export class MonthTableComponent extends CalendarTable implements OnChanges {	×
21	MAX_ROW = 4;	×
22
23	MAX_COL = 3;
24		×
25	constructor(private dateHelper: DateHelperService) {
26	super();
27	}	×
28		×
29	private chooseMonth(month: number): void {	×
30	this.value = this.activeDate.setMonth(month);	×
31	this.valueChange.emit(this.value);
32	this.render();
33	}
34		×
35	makeHeadRow(): DateCell[] {	×
36	return [];	×
37	}	×
38		×
39	makeBodyRows(): DateBodyRow[] {
40	const months: DateBodyRow[] = [];
41	let monthValue = 0;
42	for (let rowIndex = 0; rowIndex < this.MAX_ROW; rowIndex++) {
43	const row: DateBodyRow = {
44	dateCells: [],
45	trackByIndex: rowIndex
46	};	×
47	for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
48	const month = this.activeDate.setMonth(monthValue);
49	const isDisabled = this.disabledDate ? this.disabledDate(this.activeDate.setMonth(monthValue).nativeDate) : false;	×
50	const content = this.dateHelper.format(month.nativeDate, 'MMMM');	×
51	const cell: DateCell = {	×
52	trackByIndex: colIndex,
53	value: month.nativeDate,	×
54	isDisabled,
55	content,	×
56	title: content,
57	classMap: null,
58	isSelected: month.isSameMonth(this.value),	×
59	onClick: () => this.chooseMonth(cell.value.getMonth()),	×
60	onMouseEnter: () => {}	×
61	};	×
62	this.addCellProperty(cell, month);	×
63	row.dateCells.push(cell);
64	monthValue++;	×
65	}	×
66	months.push(row);	×
67	}
68	return months;	×
69	}	×
70		×
71	private addCellProperty(cell: DateCell, month: TinyDate): void {
72	if (this.selectedValue?.length > 0) {	×
73	const [startSelected, endSelected] = this.selectedValue;	×
74	if (startSelected?.isSameMonth(month)) {
75	cell.isSelectedStartDate = true;	×
76	cell.isSelected = true;
77	}
78		×
79	if (endSelected?.isSameMonth(month)) {	×
80	cell.isSelectedEndDate = true;
81	cell.isSelected = true;
82	}	×
83
84	cell.isStartSingle = startSelected && !endSelected;
85	cell.isEndSingle = !startSelected && !!endSelected;
86	cell.isInRange = startSelected?.isBeforeMonth(month) && month?.isBeforeMonth(endSelected);
87	} else if (month.isSameMonth(this.value)) {	×
88	cell.isSelected = true;
89	}
90	cell.classMap = this.getClassMap(cell);	1✔
91	}
92
93	monthCellClick(event: Event, monthCell: DateCell) {
94	event.stopPropagation();	1✔
95	return monthCell.isDisabled ? null : monthCell.onClick();
96	}
97
98	getClassMap(cell: DateCell): { [key: string]: boolean } {
99	return {
100	[`${this.prefixCls}-month-panel-cell`]: true,
101	[`${this.prefixCls}-month-panel-cell-disabled`]: cell.isDisabled,
102	[`${this.prefixCls}-month-panel-selected-cell`]: cell.isSelected,
103	[`${this.prefixCls}-in-range-cell`]: !!cell.isInRange,
104	[`${this.prefixCls}-month-panel-current-cell`]:
105	new TinyDate().getYear() === this.activeDate.getYear() && cell.value.getMonth() === new TinyDate().getMonth()
106	};
107	}
108	}

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