82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { IconButton } from '@components/ui/icon-button';
|
|
import { RawButton } from '@components/ui/raw';
|
|
import { Span } from '@components/ui/span';
|
|
import ArrowDownIcon from '@public/images/svg/arrow-down.svg';
|
|
import ArrowUpIcon from '@public/images/svg/arrow-up.svg';
|
|
import clsx from 'clsx';
|
|
import React, { useMemo } from 'react';
|
|
|
|
import { DAYS_OF_THE_WEEK, MONTHS } from './constants';
|
|
import styles from './styles.module.scss';
|
|
import { CalendarDaysProps } from './types';
|
|
import { getCalendarDays } from './utils';
|
|
|
|
export function CalendarDays({
|
|
value,
|
|
onChange,
|
|
min,
|
|
max,
|
|
date,
|
|
onMonthChange,
|
|
}: CalendarDaysProps) {
|
|
const today = useMemo(() => new Date(), []);
|
|
|
|
const days = useMemo(() => {
|
|
return getCalendarDays({
|
|
year: date.getFullYear(),
|
|
monthIndex: date.getMonth(),
|
|
today,
|
|
selectedDateStr: value,
|
|
min,
|
|
max,
|
|
});
|
|
}, [date, min, max]);
|
|
|
|
const handleChange = (newValue: string) => {
|
|
onChange?.(newValue);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<header className={styles.header}>
|
|
<Span color="t300" className={styles.title}>
|
|
{MONTHS[date.getMonth()]} {date.getFullYear()}
|
|
</Span>
|
|
<IconButton
|
|
className={styles.turnButton}
|
|
onClick={() => onMonthChange(-1)}
|
|
>
|
|
<ArrowUpIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
className={styles.turnButton}
|
|
onClick={() => onMonthChange(1)}
|
|
>
|
|
<ArrowDownIcon />
|
|
</IconButton>
|
|
</header>
|
|
<div className={styles.daysGrid}>
|
|
{DAYS_OF_THE_WEEK.map((day) => (
|
|
<Span className={styles.dayOfTheWeek} scale="none" key={day}>
|
|
{day}
|
|
</Span>
|
|
))}
|
|
{days.map((day, index) => (
|
|
<RawButton
|
|
key={index}
|
|
disabled={day.isDisabled}
|
|
className={clsx(styles.day, {
|
|
[styles.selectedDay]: day.isSelected,
|
|
[styles.currentMonthDay]: day.isCurrentMonth,
|
|
})}
|
|
onClick={() => handleChange(day.string)}
|
|
>
|
|
{day.number}
|
|
{day.isToday && <div className={styles.todayIndicator} />}
|
|
</RawButton>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|