feat: add mobile ui to calendar

2024-09-27 17:44:36 +02:00
parent 73eddcf4b7
commit 1380dec6e3
32 changed files with 1005 additions and 296 deletions
--- a/components/DatePicker/Screen/Desktop.tsx
+++ b/components/DatePicker/Screen/Desktop.tsx
@@ -0,0 +1,127 @@
+"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}
+      onSelect={handleOnSelect}
+      pagedNavigation
+      required
+      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 <></>
+        },
+      }}
+    />
+  )
+}