Add active / current selected month and year

Author: poshiemaaat

src/components/Calendar/Months.tsx

@@ -7,10 +7,11 @@ import { loadLanguageModule } from "../../helpers";
 import { RoundedButton } from "../utils";
 
 interface Props {
+    currentMonth: number;
     clickMonth: (month: number) => void;
 }
 
-const Months: React.FC<Props> = ({ clickMonth }) => {
+const Months: React.FC<Props> = ({ currentMonth, clickMonth }) => {
     const { i18n } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
     return (
@@ -22,6 +23,7 @@ const Months: React.FC<Props> = ({ clickMonth }) => {
                     onClick={() => {
                         clickMonth(item);
                     }}
+                    active={currentMonth === item}
                 >
                     <>{dayjs(`2022-${item}-01`).locale(i18n).format("MMM")}</>
                 </RoundedButton>

src/components/Calendar/Years.tsx

@@ -7,12 +7,13 @@ import DatepickerContext from "contexts/DatepickerContext";
 
 interface Props {
     year: number;
+    currentYear: number;
     minYear: number | null;
     maxYear: number | null;
     clickYear: (data: number) => void;
 }
 
-const Years: React.FC<Props> = ({ year, minYear, maxYear, clickYear }) => {
+const Years: React.FC<Props> = ({ year, currentYear, minYear, maxYear, clickYear }) => {
     const { dateLooking } = useContext(DatepickerContext);
 
     let startDate = 0;
@@ -43,6 +44,7 @@ const Years: React.FC<Props> = ({ year, minYear, maxYear, clickYear }) => {
                     onClick={() => {
                         clickYear(item);
                     }}
+                    active={currentYear === item}
                     disabled={
                         (maxYear !== null && item > maxYear) || (minYear !== null && item < minYear)
                     }

src/components/Calendar/index.tsx

@@ -312,10 +312,18 @@ const Calendar: React.FC<Props> = ({
             </div>
 
             <div className="px-0.5 sm:px-2 mt-0.5 min-h-[285px]">
-                {showMonths && <Months clickMonth={clickMonth} />}
+                {showMonths && (
+                    <Months currentMonth={calendarData.date.month() + 1} clickMonth={clickMonth} />
+                )}
 
                 {showYears && (
-                    <Years year={year} minYear={minYear} maxYear={maxYear} clickYear={clickYear} />
+                    <Years
+                        year={year}
+                        minYear={minYear}
+                        maxYear={maxYear}
+                        currentYear={calendarData.date.year()}
+                        clickYear={clickYear}
+                    />
                 )}
 
                 {!showMonths && !showYears && (

src/components/utils.tsx

@@ -13,6 +13,7 @@ interface Button {
     disabled?: boolean;
     roundedFull?: boolean;
     padding?: string;
+    active?: boolean;
 }
 
 export const DateIcon: React.FC<IconProps> = ({ className = "w-6 h-6" }) => {
@@ -171,23 +172,25 @@ export const RoundedButton: React.FC<Button> = ({
     onClick,
     disabled,
     roundedFull = false,
-    padding = "py-[0.55rem]"
+    padding = "py-[0.55rem]",
+    active = false
 }) => {
     // Contexts
     const { primaryColor } = useContext(DatepickerContext);
 
     // Functions
     const getClassName = useCallback(() => {
         const darkClass = "dark:text-white/70 dark:hover:bg-white/10 dark:focus:bg-white/10";
+        const activeClass = active ? "font-semibold bg-gray-50 dark:bg-white/5" : "";
         const defaultClass = !roundedFull
-            ? `w-full tracking-wide ${darkClass} transition-all duration-300 px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`
-            : `${darkClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
+            ? `w-full tracking-wide ${darkClass} ${activeClass} transition-all duration-300 px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`
+            : `${darkClass} ${activeClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
         const buttonFocusColor =
             BUTTON_COLOR.focus[primaryColor as keyof typeof BUTTON_COLOR.focus];
         const disabledClass = disabled ? "line-through" : "";
 
         return `${defaultClass} ${buttonFocusColor} ${disabledClass}`;
-    }, [disabled, padding, primaryColor, roundedFull]);
+    }, [disabled, padding, primaryColor, roundedFull, active]);
 
     return (
         <button type="button" className={getClassName()} onClick={onClick} disabled={disabled}>