129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { DayPicker } from "react-day-picker"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import { ChevronLeftIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./desktop.module.css"
|
|
import classNames from "react-day-picker/style.module.css"
|
|
|
|
import type { DatePickerProps } from "@/types/components/datepicker"
|
|
|
|
export default function DatePickerDesktop({
|
|
close,
|
|
handleOnSelect,
|
|
locales,
|
|
selectedDate,
|
|
}: DatePickerProps) {
|
|
const lang = useLang()
|
|
const intl = useIntl()
|
|
|
|
/** English is default language and doesn't need to be imported */
|
|
const locale = lang === Lang.en ? undefined : locales[lang]
|
|
const currentDate = dt().toDate()
|
|
const startOfMonth = dt(currentDate).set("date", 1).toDate()
|
|
const yesterday = dt(currentDate).subtract(1, "day").toDate()
|
|
return (
|
|
<DayPicker
|
|
classNames={{
|
|
...classNames,
|
|
caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
|
|
day: `${classNames.day} ${styles.day}`,
|
|
day_button: `${classNames.day_button} ${styles.dayButton}`,
|
|
footer: styles.footer,
|
|
month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
|
|
months: `${classNames.months} ${styles.months}`,
|
|
range_end: styles.rangeEnd,
|
|
range_middle: styles.rangeMiddle,
|
|
range_start: styles.rangeStart,
|
|
root: `${classNames.root} ${styles.container}`,
|
|
week: styles.week,
|
|
weekday: `${classNames.weekday} ${styles.weekDay}`,
|
|
}}
|
|
disabled={{ from: startOfMonth, to: yesterday }}
|
|
excludeDisabled
|
|
footer
|
|
formatters={{
|
|
formatWeekdayName(weekday) {
|
|
return dt(weekday).locale(lang).format("ddd")
|
|
},
|
|
}}
|
|
lang={lang}
|
|
locale={locale}
|
|
mode="range"
|
|
numberOfMonths={2}
|
|
onDayClick={handleOnSelect}
|
|
pagedNavigation
|
|
required={false}
|
|
selected={selectedDate}
|
|
startMonth={currentDate}
|
|
weekStartsOn={1}
|
|
components={{
|
|
Chevron(props) {
|
|
return <ChevronLeftIcon {...props} height={20} width={20} />
|
|
},
|
|
Footer(props) {
|
|
return (
|
|
<>
|
|
<Divider className={styles.divider} color="primaryLightSubtle" />
|
|
<footer className={props.className}>
|
|
<Button
|
|
intent="tertiary"
|
|
onPress={close}
|
|
size="small"
|
|
theme="base"
|
|
>
|
|
<Caption color="white" textTransform="bold">
|
|
{intl.formatMessage({ id: "Select dates" })}
|
|
</Caption>
|
|
</Button>
|
|
</footer>
|
|
</>
|
|
)
|
|
},
|
|
MonthCaption(props) {
|
|
return (
|
|
<div className={props.className}>
|
|
<Subtitle asChild type="two">
|
|
{props.children}
|
|
</Subtitle>
|
|
</div>
|
|
)
|
|
},
|
|
Nav(props) {
|
|
if (Array.isArray(props.children)) {
|
|
const prevButton = props.children?.[0]
|
|
const nextButton = props.children?.[1]
|
|
return (
|
|
<>
|
|
{prevButton ? (
|
|
<nav
|
|
className={`${props.className} ${styles.previousButton}`}
|
|
>
|
|
{prevButton}
|
|
</nav>
|
|
) : null}
|
|
{nextButton ? (
|
|
<nav className={`${props.className} ${styles.nextButton}`}>
|
|
{nextButton}
|
|
</nav>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|
|
return <></>
|
|
},
|
|
}}
|
|
/>
|
|
)
|
|
}
|