update style for calendar

reaviz · May 28, 2024 · 054e503 · 054e503
1 parent 1bee9b0
commit 054e503
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 47 deletions.
diff --git a/src/form/Calendar/Calendar.story.tsx b/src/form/Calendar/Calendar.story.tsx
@@ -25,6 +25,25 @@ export const Simple = () => {
   );
 };
 
+export const Today = () => {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <Card>
+      <Calendar
+        showToday
+        showDayOfWeek
+        value={date}
+        onChange={(date: Date) => setDate(date)}
+      />
+      <Divider />
+      <Stack inline={false} justifyContent="center">
+        {date?.toLocaleDateString() ?? 'No date selected'}
+      </Stack>
+    </Card>
+  );
+};
+
 export const Disabled = () => {
   const [date, setDate] = useState<Date>();
 
@@ -121,6 +140,7 @@ export const Range = () => {
         onChange={val => setRange(val as [Date, Date | undefined])}
         isRange
         showDayOfWeek
+        showToday
       />
       <Divider />
       <Stack justifyContent="center">

diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
@@ -74,6 +74,11 @@ export interface CalendarProps {
    */
   showDayOfWeek?: boolean;
 
+  /**
+   * Whether to highlight the today.
+   */
+  showToday?: boolean;
+
   /**
    * Whether to animate the calendar.
    */
@@ -101,9 +106,10 @@ export const Calendar: FC<CalendarProps> = ({
   value,
   disabled,
   isRange,
-  previousArrow = '←',
-  nextArrow = '→',
+  previousArrow = '‹',
+  nextArrow = '›',
   showDayOfWeek,
+  showToday,
   animated = true,
   onChange,
   onViewChange,
@@ -221,7 +227,7 @@ export const Calendar: FC<CalendarProps> = ({
           variant="text"
           disabled={disabled}
           onClick={previousClickHandler}
-          className={twMerge(theme.header.prev)}
+          className={theme.header.prev}
           disablePadding
         >
           {previousArrow}
@@ -230,11 +236,11 @@ export const Calendar: FC<CalendarProps> = ({
           disabled={disabled}
           variant="text"
           onClick={headerClickHandler}
-          className={twMerge(theme.header.mid)}
+          className={theme.header.mid}
           disablePadding
           fullWidth
         >
-          <SmallHeading disableMargins className={twMerge(theme.title)}>
+          <SmallHeading disableMargins className={theme.title}>
             {view === 'days' && format(viewValue, 'MMMM')}
             {view === 'months' && <>{yearValue}</>}
             {view === 'years' && (
@@ -248,7 +254,7 @@ export const Calendar: FC<CalendarProps> = ({
           variant="text"
           disabled={disabled}
           onClick={nextClickHandler}
-          className={twMerge(theme.header.next)}
+          className={theme.header.next}
           disablePadding
         >
           {nextArrow}
@@ -277,6 +283,7 @@ export const Calendar: FC<CalendarProps> = ({
               isRange={isRange}
               current={isRange ? [rangeStart, rangeEnd] : value}
               showDayOfWeek={showDayOfWeek}
+              showToday={showToday}
               xAnimation={xAnimation}
               animated={animated}
               onChange={dateChangeHandler}

diff --git a/src/form/Calendar/CalendarDays/CalendarDays.tsx b/src/form/Calendar/CalendarDays/CalendarDays.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
-import { isAfter, isBefore } from 'date-fns';
+import { isAfter, isBefore, isToday } from 'date-fns';
 import { Button } from '@/elements';
 import {
   daysOfWeek,
@@ -9,7 +9,7 @@ import {
   isPreviousWeekEmpty
 } from '@/form/Calendar/utils';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
@@ -64,6 +64,11 @@ export interface CalendarDaysProps {
    */
   showDayOfWeek?: boolean;
 
+  /**
+   * Whether to highlight the today.
+   */
+  showToday?: boolean;
+
   /**
    * Customize the labels for the days of the week.
    */
@@ -116,6 +121,7 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
   animated,
   xAnimation = 0,
   showDayOfWeek,
+  showToday,
   dayOfWeekLabels = daysOfWeek,
   hidePrevMonthDays,
   hideNextMonthDays,
@@ -187,17 +193,19 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
       return (
         <Button
           key={day.formattedDate}
-          className={twMerge(
-            days.day,
-            !isActive &&
-              (day.isNextMonth || day.isPreviousMonth) &&
-              days.outside,
-            isRangeMiddle && days.range,
-            isRange && isRangeStart && !isRangeEnd && days.startRangeDate,
-            isRange && !rangeConnectsBottom && days.cornerStartDateBottom,
-            isRange && isRangeEnd && !isRangeStart && days.endRangeDate,
-            isRange && !rangeConnectsTop && days.cornerEndDateTop
-          )}
+          className={cn(days.day, {
+            [days.outside]:
+              !isActive && (day.isNextMonth || day.isPreviousMonth),
+            [days.today]: showToday && isToday(day.date),
+            [days.selected]: isActive,
+            [days.hover]: day.date === currentHover,
+            [days.range]: isRangeMiddle,
+            [days.startRangeDate]: isRange && isRangeStart && !isRangeEnd,
+            [days.cornerStartDateBottom]:
+              isRange && isActive && !rangeConnectsBottom,
+            [days.endRangeDate]: isRange && isRangeEnd && !isRangeStart,
+            [days.cornerEndDateTop]: isRange && isActive && !rangeConnectsTop
+          })}
           onMouseEnter={() => handleHover(day.date)}
           onMouseLeave={() => handleHover(null)}
           variant={buttonVariant}
@@ -223,7 +231,8 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
       hoveringDate,
       days,
       hideNextMonthDays,
-      hidePrevMonthDays
+      hidePrevMonthDays,
+      showToday
     ]
   );
 
@@ -239,16 +248,16 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
         }}
       >
         {showDayOfWeek && (
-          <div className={twMerge(days.header)}>
+          <div className={days.header}>
             {dayOfWeekLabels.map(day => (
-              <div key={`day-${day}`} className={twMerge(days.dayOfWeek)}>
+              <div key={`day-${day}`} className={days.dayOfWeek}>
                 {day.substring(0, 2)}
               </div>
             ))}
           </div>
         )}
         {weeks.map((week, i) => (
-          <div key={`week-${i}`} className={twMerge(days.week)}>
+          <div key={`week-${i}`} className={days.week}>
             {week.map(renderDay)}
           </div>
         ))}

diff --git a/src/form/Calendar/CalendarMonths/CalendarMonths.tsx b/src/form/Calendar/CalendarMonths/CalendarMonths.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Button } from '@/elements';
 import { monthNames } from '@/form/Calendar/utils';
-import { useComponentTheme } from '@/utils';
+import { cn, theme, useComponentTheme } from '@/utils';
 import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
@@ -30,11 +30,11 @@ export const CalendarMonths: FC<CalendarMonthsProps> = ({
   const { months }: CalendarTheme = useComponentTheme('calendar', customTheme);
 
   return (
-    <div className={twMerge(months.root)}>
+    <div className={months.root}>
       {monthNames.map((month, i) => (
         <Button
           key={month}
-          className={twMerge(months.month)}
+          className={cn(months.month, { [months.selected]: value === i })}
           color={value === i ? 'primary' : 'default'}
           variant={value === i ? 'filled' : 'text'}
           disableMargins

diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx
@@ -13,7 +13,6 @@ import { CalendarProps } from './Calendar';
 import { CalendarDays } from './CalendarDays';
 import { SmallHeading } from '@/typography';
 import { Divider, Stack } from '@/layout';
-import { twMerge } from 'tailwind-merge';
 import { useComponentTheme } from '@/utils';
 import { CalendarRangeTheme } from './CalendarRangeTheme';
 
@@ -140,14 +139,14 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
   }, [scrollDirection]);
 
   return (
-    <div className={twMerge(theme.base)}>
-      <header className={twMerge(theme.header.base)}>
+    <div className={theme.base}>
+      <header className={theme.header.base}>
         <Stack>
           <Button
             variant="text"
             disabled={disabled}
             onClick={previousYearClickHandler}
-            className={twMerge(theme.header.prev)}
+            className={theme.header.prev}
             disablePadding
           >
             {previousYearArrow}
@@ -156,13 +155,13 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
             variant="text"
             disabled={disabled}
             onClick={previousClickHandler}
-            className={twMerge(theme.header.mid)}
+            className={theme.header.mid}
             disablePadding
           >
             {previousArrow}
           </Button>
         </Stack>
-        <SmallHeading className={twMerge(theme.title)} disableMargins>
+        <SmallHeading className={theme.title} disableMargins>
           {displayMonths.map(i => (
             <span key={addMonths(viewValue, showPast ? -i : i).toDateString()}>
               {format(addMonths(viewValue, showPast ? -i : i), 'MMMM')}
@@ -174,7 +173,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
             variant="text"
             disabled={disabled}
             onClick={nextClickHandler}
-            className={twMerge(theme.header.next)}
+            className={theme.header.next}
             disablePadding
           >
             {nextArrow}
@@ -201,7 +200,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
             scale: { type: animated ? 'tween' : false }
           }}
         >
-          <div className={twMerge(theme.content)}>
+          <div className={theme.content}>
             {displayMonths.map((offset, idx) => (
               <Fragment key={`calendar-${offset}`}>
                 <CalendarDays