d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { ChangeDetectionStrategy, Component, EventEmitter, OnChanges, Output } from '@angular/core';
import { TinyDate } from 'ngx-tethys/util';
import { CalendarTable } from '../calendar/calendar-table.component';
import { DateCell, DateBodyRow, YearCell } from '../date/types';
import { NgFor, NgClass } from '@angular/common';

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

    MAX_COL = 3;

    @Output() readonly decadePanelShow = new EventEmitter<void>();

    constructor() {
        super();
    }
    private chooseYear(year: number): void {
        this.value = this.activeDate.setYear(year);
        this.valueChange.emit(this.value);
        this.render();
    }

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

    makeBodyRows(): DateBodyRow[] {
        const years: DateBodyRow[] = [];
        const currentYear = this.activeDate && this.activeDate.getYear();
        const startYear = parseInt(`${currentYear / 10}`, 10) * 10;
        const endYear = startYear + 9;
        const previousYear = startYear - 1;
        let yearValue = 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 yearNum = previousYear + yearValue;
                const year = this.activeDate.setYear(yearNum);
                const content = String(yearNum);
                const isDisabled = this.disabledDate ? this.disabledDate(year.nativeDate) : false;

                const cell: YearCell = {
                    trackByIndex: colIndex,
                    isDisabled,
                    content,
                    value: year.nativeDate,
                    title: content,
                    isSelected: yearNum === (this.value && this.value.getYear()),
                    isSameDecade: yearNum >= startYear && yearNum <= endYear,
                    classMap: {},
                    onClick: () => this.chooseYear(cell.value?.getFullYear()),
                    onMouseEnter: () => {}
                };
                this.addCellProperty(cell, year);
                row.dateCells.push(cell);
                yearValue++;
            }
            years.push(row);
        }
        return years;
    }

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

            if (endSelected?.isSameYear(year)) {
                cell.isSelected = true;
            }

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

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

    getClassMap(cell: YearCell): { [key: string]: boolean } {
        return {
            [`${this.prefixCls}-year-panel-cell`]: true,
            [`${this.prefixCls}-year-panel-selected-cell`]: cell.isSelected,
            [`${this.prefixCls}-year-panel-cell-disabled`]: cell.isDisabled,
            [`${this.prefixCls}-year-panel-cell-in-view`]: cell.isSameDecade,
            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
        };
    }
}

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

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