Skip to content

Commit

Permalink
feat(calendar): fix calendar height (#1146)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadBrozzeR
MadBrozzeR committed Apr 30, 2020
1 parent dd67787 commit 9d5da61
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 22 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
View file
Expand Up @@ -5,7 +5,7 @@ charset = utf-8
trim_trailing_whitespace = true

# JavaScript
[*.{jsx,js}]
[*.{jsx,js,ts,tsx}]
indent_style = space
indent_size = 4

Expand Down
82 changes: 82 additions & 0 deletions src/calendar/__snapshots__/calendar.test.tsx.snap
View file
Expand Up @@ -623,6 +623,88 @@ exports[`calendar should render without problems 1`] = `
/>
</td>
</tr>
<tr
className="calendar__row"
key="row_7"
>
<td
key="day_1"
>
<div
className="calendar__day calendar__day_empty"
data-day={null}
onClick={[Function]}
role="gridcell"
tabIndex={0}
/>
</td>
<td
key="day_2"
>
<div
className="calendar__day calendar__day_empty"
data-day={null}
onClick={[Function]}
role="gridcell"
tabIndex={0}
/>
</td>
<td
key="day_3"
>
<div
className="calendar__day calendar__day_empty"
data-day={null}
onClick={[Function]}
role="gridcell"
tabIndex={0}
/>
</td>
<td
key="day_4"
>
<div
className="calendar__day calendar__day_empty"
data-day={null}
onClick={[Function]}
role="gridcell"
tabIndex={0}
/>
</td>
<td
key="day_5"
>
<div
className="calendar__day calendar__day_empty"
data-day={null}
onClick={[Function]}
role="gridcell"
tabIndex={0}
/>
</td>
<td
key="day_6"
>
<div
className="calendar__day calendar__day_empty"
data-day={null}
onClick={[Function]}
role="gridcell"
tabIndex={0}
/>
</td>
<td
key="day_7"
>
<div
className="calendar__day calendar__day_empty"
data-day={null}
onClick={[Function]}
role="gridcell"
tabIndex={0}
/>
</td>
</tr>
</tbody>
</table>
</div>
Expand Down
8 changes: 8 additions & 0 deletions src/calendar/calendar.test.tsx
View file
Expand Up @@ -354,4 +354,12 @@ describe('calendar', () => {

expect(calendarSelectNode.length).toBe(30);
});

it('should render 6 week lines for any month', () => {
const calendar = mount(<Calendar month={ new Date('2021-02-02').valueOf() } />);

const days = calendar.find('.calendar__day');

expect(days.length).toBe(42);
});
});
56 changes: 35 additions & 21 deletions src/calendar/calendar.tsx
View file
Expand Up @@ -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<{

Expand Down Expand Up @@ -254,12 +256,14 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
|| 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 (
<div className={ this.cn('title') }>
{
this.props.showArrows && !this.state.isMonthSelection && !this.state.isYearSelection
&& (
areArrowsVisible && (
<div
className={
this.cn('arrow', {
Expand All @@ -276,8 +280,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
)
}
{
this.props.showArrows && !this.state.isMonthSelection && !this.state.isYearSelection
&& (
areArrowsVisible && (
<div
className={
this.cn('arrow', {
Expand Down Expand Up @@ -305,7 +308,9 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
tabIndex={ 0 }
onClick={ this.handleMonthClick }
>
<div className={ this.cn('select-text') }>{ `${this.props.months[month.getMonth()]}` }</div>
<div className={ this.cn('select-text') }>
{ this.props.months[month.getMonth()] }
</div>
<div className={ this.cn('select-arrows') } />
</div>

Expand Down Expand Up @@ -362,7 +367,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
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();

Expand Down Expand Up @@ -421,7 +427,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
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,
Expand Down Expand Up @@ -563,7 +570,9 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
onClick={ this.handleDayClick }
>
{ day ? day.getDate() : '' }
{ mods.event && <span data-day={ dataDay } className={ this.cn('event') } /> }
{ mods.event && (
<span data-day={ dataDay } className={ this.cn('event') } />
) }
</div>
</td>
);
Expand Down Expand Up @@ -743,7 +752,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
* @param isTriggeredByKeyboard Флаг, что событие
* произошло из-за нажатия пользователем кнопки на клавиатуре
*/
private performChange(timestamp: number, isTriggeredByKeyboard = false) {
private performChange(timestamp: number | Date, isTriggeredByKeyboard = false) {
if (!this.props.onValueChange) {
return;
}
Expand All @@ -755,7 +764,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
}

this.props.onValueChange(
timestamp,
timestamp.valueOf(),
formatDate(date, this.props.outputFormat),
isTriggeredByKeyboard,
);
Expand Down Expand Up @@ -786,7 +795,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
this.props.onMonthChange(shiftedValue.valueOf());
}
} else {
this.performChange(this.state.month as any /** TODO: fix it */, true);
this.performChange(this.state.month, true);
}
}

Expand All @@ -798,10 +807,11 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
}

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);
Expand All @@ -810,19 +820,22 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
// соответственно пропадают 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) {
Expand Down Expand Up @@ -905,7 +918,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
}

if (isInitializing || this.props.selectedFrom !== nextProps.selectedFrom) {
this.selectedFrom = nextProps.selectedFrom ? normalizeDate(nextProps.selectedFrom) : null;
this.selectedFrom = nextProps.selectedFrom
? normalizeDate(nextProps.selectedFrom) : null;
}
}
}
Expand Down

0 comments on commit 9d5da61

Please sign in to comment.