diff --git a/.editorconfig b/.editorconfig index e576051c43..485faf57bd 100644 --- a/.editorconfig +++ b/.editorconfig @@ -5,7 +5,7 @@ charset = utf-8 trim_trailing_whitespace = true # JavaScript -[*.{jsx,js}] +[*.{jsx,js,ts,tsx}] indent_style = space indent_size = 4 diff --git a/src/calendar/__snapshots__/calendar.test.tsx.snap b/src/calendar/__snapshots__/calendar.test.tsx.snap index 8c259a8938..16a91b6027 100644 --- a/src/calendar/__snapshots__/calendar.test.tsx.snap +++ b/src/calendar/__snapshots__/calendar.test.tsx.snap @@ -623,6 +623,88 @@ exports[`calendar should render without problems 1`] = ` /> + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
diff --git a/src/calendar/calendar.test.tsx b/src/calendar/calendar.test.tsx index 2099e47730..4fc1fe5dab 100644 --- a/src/calendar/calendar.test.tsx +++ b/src/calendar/calendar.test.tsx @@ -354,4 +354,12 @@ describe('calendar', () => { expect(calendarSelectNode.length).toBe(30); }); + + it('should render 6 week lines for any month', () => { + const calendar = mount(); + + const days = calendar.find('.calendar__day'); + + expect(days.length).toBe(42); + }); }); diff --git a/src/calendar/calendar.tsx b/src/calendar/calendar.tsx index a886388171..5cd6b51b49 100644 --- a/src/calendar/calendar.tsx +++ b/src/calendar/calendar.tsx @@ -33,6 +33,8 @@ import { withTheme } from '../cn'; const DAYS_IN_WEEK = 7; const EARLY_YEARS_LIMIT = 100; const LATER_YEARS_LIMIT = 1; +const TOTAL_WEEK_NUMBER = 6; +const SUNDAY_INDEX = 6; export type CalendarProps = DeepReadonly<{ @@ -254,12 +256,14 @@ export class Calendar extends React.Component { || differenceInMonths(month, startOfMonth(this.earlierLimit)) > 0; const isNextMonthEnabled = !this.laterLimit || differenceInMonths(month, this.laterLimit) < 0; + const areArrowsVisible = this.props.showArrows + && !this.state.isMonthSelection + && !this.state.isYearSelection; return (
{ - this.props.showArrows && !this.state.isMonthSelection && !this.state.isYearSelection - && ( + areArrowsVisible && (
{ ) } { - this.props.showArrows && !this.state.isMonthSelection && !this.state.isYearSelection - && ( + areArrowsVisible && (
{ tabIndex={ 0 } onClick={ this.handleMonthClick } > -
{ `${this.props.months[month.getMonth()]}` }
+
+ { this.props.months[month.getMonth()] } +
@@ -362,7 +367,8 @@ export class Calendar extends React.Component { const newMonth = setMonth(this.state.month, index); const off = !this.isValidDate(startOfMonth(newMonth)); const selectedDate = new Date(this.state.month); - const isSameMonth = selectedDate && selectedDate.getMonth() === newMonth.getMonth(); + const isSameMonth = selectedDate + && selectedDate.getMonth() === newMonth.getMonth(); const dataMonth = off ? null : newMonth.getTime(); @@ -421,7 +427,8 @@ export class Calendar extends React.Component { const newYear = setYear(this.state.month, year); const dataYear = newYear.getTime(); const selectedDate = new Date(this.state.month); - const isSameYear = selectedDate && selectedDate.getFullYear() === newYear.getFullYear(); + const isSameYear = selectedDate + && selectedDate.getFullYear() === newYear.getFullYear(); const mods = { state: isSameYear ? 'current' : null, @@ -563,7 +570,9 @@ export class Calendar extends React.Component { onClick={ this.handleDayClick } > { day ? day.getDate() : '' } - { mods.event && } + { mods.event && ( + + ) }
); @@ -743,7 +752,7 @@ export class Calendar extends React.Component { * @param isTriggeredByKeyboard Флаг, что событие * произошло из-за нажатия пользователем кнопки на клавиатуре */ - private performChange(timestamp: number, isTriggeredByKeyboard = false) { + private performChange(timestamp: number | Date, isTriggeredByKeyboard = false) { if (!this.props.onValueChange) { return; } @@ -755,7 +764,7 @@ export class Calendar extends React.Component { } this.props.onValueChange( - timestamp, + timestamp.valueOf(), formatDate(date, this.props.outputFormat), isTriggeredByKeyboard, ); @@ -786,7 +795,7 @@ export class Calendar extends React.Component { this.props.onMonthChange(shiftedValue.valueOf()); } } else { - this.performChange(this.state.month as any /** TODO: fix it */, true); + this.performChange(this.state.month, true); } } @@ -798,10 +807,11 @@ export class Calendar extends React.Component { } private calculateWeeks() { - let weekDay; + let weekDay: number; + let weekCounter = TOTAL_WEEK_NUMBER; const weeks = []; - const lastDay = 6; - const month = new Date(this.state.month); + const lastDay = SUNDAY_INDEX; + const currentMonth = new Date(this.state.month).getMonth(); const dateIterator = new Date(this.state.month); // Далее я использую map для обхода массива, но при создании через new Array(DAYS_IN_WEEK); @@ -810,19 +820,22 @@ export class Calendar extends React.Component { // соответственно пропадают undefined значения, поэтому: let week = (new Array(DAYS_IN_WEEK)).fill(null); - for ( - dateIterator.setDate(1); - dateIterator.getMonth() === month.getMonth(); - dateIterator.setDate(dateIterator.getDate() + 1) - ) { + dateIterator.setDate(1); + + while (weekCounter > 0) { weekDay = getRussianWeekDay(dateIterator); // Получаем 0 - пн, 1 - вт, и т.д. - week[weekDay] = new Date(dateIterator.getTime()); + if (dateIterator.getMonth() === currentMonth) { + week[weekDay] = new Date(dateIterator.getTime()); + } if (weekDay === lastDay) { weeks.push(week); + weekCounter -= 1; week = (new Array(DAYS_IN_WEEK)).fill(null); } + + dateIterator.setDate(dateIterator.getDate() + 1); } if (weekDay !== lastDay) { @@ -905,7 +918,8 @@ export class Calendar extends React.Component { } if (isInitializing || this.props.selectedFrom !== nextProps.selectedFrom) { - this.selectedFrom = nextProps.selectedFrom ? normalizeDate(nextProps.selectedFrom) : null; + this.selectedFrom = nextProps.selectedFrom + ? normalizeDate(nextProps.selectedFrom) : null; } } }