import { ChangeDetectionStrategy , Component , OnChanges } from '@angular/core' ; import { CalendarTable } from '../calendar/calendar-table.component' ; import { DateCell , DecadeCell , DateBodyRow } from '../date/types' ; @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : 'decade-table' , exportAs : 'decadeTable' , templateUrl : 'decade-table.component.html' } ) export class DecadeTableComponent extends CalendarTable implements OnChanges { MAX_ROW = 4 ; MAX_COL = 3 ; get startYear ( ) : number { return parseInt ( `${ this . activeDate . getYear ( ) / 100 }` , 10 ) * 100 ; } get endYear ( ) : number { return this . startYear + 99 ; } constructor ( ) { super ( ) ; } private chooseDecade ( startYear ) { this . value = this . value . setYear ( startYear ) ; this . valueChange . emit ( this . value ) ; } makeHeadRow ( ) { return [ ] ; } makeBodyRows ( ) { const decades = [ ] ; const currentYear = this . value && this . value . getYear ( ) ; const startYear = this . startYear ; const endYear = this . endYear ; const previousYear = startYear - 10 ; let index = 0 ; for ( let rowIndex = 0 ; rowIndex < this . MAX_ROW ; rowIndex ++ ) { const row = { dateCells : [ ] , trackByIndex : rowIndex } ; for ( let colIndex = 0 ; colIndex < this . MAX_COL ; colIndex ++ ) { const start = previousYear + index * 10 ; const end = previousYear + index * 10 + 9 ; const content = `${ start }-${ end }` ; const cell = { content , title : content , isSelected : currentYear >= start && currentYear <= end , isLowerThanStart : end < startYear , isBiggerThanEnd : start > endYear , classMap : null , onClick : ( ) => this . chooseDecade ( start ) , onMouseEnter ( ) { } } ; cell . classMap = this . getClassMap ( cell ) ; index ++ ; row . dateCells . push ( cell ) ; } decades . push ( row ) ; } return decades ; } getClassMap ( cell ) { return { [ `${ this . prefixCls }-decade-panel-cell` ] : true , [ `${ this . prefixCls }-decade-panel-selected-cell` ] : cell . isSelected , [ `${ this . prefixCls }-decade-panel-last-century-cell` ] : cell . isLowerThanStart , [ `${ this . prefixCls }-decade-panel-next-century-cell` ] : cell . isBiggerThanEnd } ; } }