Merge pull request #439 from aldabil21/min-max-arrow-disabled

feat: add useArrowDisable hook to manage navigation button states

Author: aldabil21

src/lib/components/nav/DayDateBtn.tsx

@@ -5,6 +5,7 @@ import { Button, Popover } from "@mui/material";
 import { format, addDays } from "date-fns";
 import { LocaleArrow } from "../common/LocaleArrow";
 import useStore from "../../hooks/useStore";
+import useArrowDisable from "../../hooks/useArrowDisable";
 
 interface DayDateBtnProps {
   selectedDate: Date;
@@ -14,6 +15,7 @@ interface DayDateBtnProps {
 const DayDateBtn = ({ selectedDate, onChange }: DayDateBtnProps) => {
   const { locale, navigationPickerProps } = useStore();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { prevDisabled, nextDisabled } = useArrowDisable();
 
   const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -31,13 +33,20 @@ const DayDateBtn = ({ selectedDate, onChange }: DayDateBtnProps) => {
     const prevDay = addDays(selectedDate, -1);
     onChange(prevDay);
   };
+
   const handleNext = () => {
     const nexDay = addDays(selectedDate, 1);
     onChange(nexDay);
   };
+
   return (
     <>
-      <LocaleArrow type="prev" onClick={handlePrev} aria-label="previous day" />
+      <LocaleArrow
+        type="prev"
+        onClick={handlePrev}
+        disabled={prevDisabled}
+        aria-label="previous day"
+      />
       <Button style={{ padding: 4 }} onClick={handleOpen} aria-label="selected date">
         {format(selectedDate, "dd MMMM yyyy", { locale })}
       </Button>
@@ -60,7 +69,7 @@ const DayDateBtn = ({ selectedDate, onChange }: DayDateBtnProps) => {
           />
         </DateProvider>
       </Popover>
-      <LocaleArrow type="next" onClick={handleNext} aria-label="next day" />
+      <LocaleArrow type="next" onClick={handleNext} disabled={nextDisabled} aria-label="next day" />
     </>
   );
 };

src/lib/components/nav/MonthDateBtn.tsx

@@ -5,6 +5,7 @@ import { Button, Popover } from "@mui/material";
 import { format, getMonth, setMonth } from "date-fns";
 import { LocaleArrow } from "../common/LocaleArrow";
 import useStore from "../../hooks/useStore";
+import useArrowDisable from "../../hooks/useArrowDisable";
 
 interface MonthDateBtnProps {
   selectedDate: Date;
@@ -15,6 +16,7 @@ const MonthDateBtn = ({ selectedDate, onChange }: MonthDateBtnProps) => {
   const { locale, navigationPickerProps } = useStore();
   const currentMonth = getMonth(selectedDate);
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { prevDisabled, nextDisabled } = useArrowDisable();
 
   const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -37,7 +39,12 @@ const MonthDateBtn = ({ selectedDate, onChange }: MonthDateBtnProps) => {
   };
   return (
     <>
-      <LocaleArrow type="prev" onClick={handlePrev} aria-label="previous month" />
+      <LocaleArrow
+        type="prev"
+        onClick={handlePrev}
+        disabled={prevDisabled}
+        aria-label="previous month"
+      />
       <Button style={{ padding: 4 }} onClick={handleOpen} aria-label="selected month">
         {format(selectedDate, "MMMM yyyy", { locale })}
       </Button>
@@ -60,7 +67,12 @@ const MonthDateBtn = ({ selectedDate, onChange }: MonthDateBtnProps) => {
           />
         </DateProvider>
       </Popover>
-      <LocaleArrow type="next" onClick={handleNext} aria-label="next month" />
+      <LocaleArrow
+        type="next"
+        onClick={handleNext}
+        disabled={nextDisabled}
+        aria-label="next month"
+      />
     </>
   );
 };

src/lib/components/nav/WeekDateBtn.tsx

@@ -6,6 +6,7 @@ import { WeekProps } from "../../views/Week";
 import { LocaleArrow } from "../common/LocaleArrow";
 import { DateCalendar } from "@mui/x-date-pickers";
 import useStore from "../../hooks/useStore";
+import useArrowDisable from "../../hooks/useArrowDisable";
 
 interface WeekDateBtnProps {
   selectedDate: Date;
@@ -19,6 +20,7 @@ const WeekDateBtn = ({ selectedDate, onChange, weekProps }: WeekDateBtnProps) =>
   const { weekStartOn } = weekProps;
   const weekStart = startOfWeek(selectedDate, { weekStartsOn: weekStartOn });
   const weekEnd = endOfWeek(selectedDate, { weekStartsOn: weekStartOn });
+  const { prevDisabled, nextDisabled } = useArrowDisable();
 
   const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -44,7 +46,12 @@ const WeekDateBtn = ({ selectedDate, onChange, weekProps }: WeekDateBtnProps) =>
 
   return (
     <>
-      <LocaleArrow type="prev" onClick={handlePrev} aria-label="previous week" />
+      <LocaleArrow
+        type="prev"
+        onClick={handlePrev}
+        disabled={prevDisabled}
+        aria-label="previous week"
+      />
       <Button style={{ padding: 4 }} onClick={handleOpen} aria-label="selected week">
         {`${format(weekStart, "dd", { locale })} - ${format(weekEnd, "dd MMM yyyy", {
           locale,
@@ -69,7 +76,12 @@ const WeekDateBtn = ({ selectedDate, onChange, weekProps }: WeekDateBtnProps) =>
           />
         </DateProvider>
       </Popover>
-      <LocaleArrow type="next" onClick={handleNext} aria-label="next week" />
+      <LocaleArrow
+        type="next"
+        onClick={handleNext}
+        disabled={nextDisabled}
+        aria-label="next week"
+      />
     </>
   );
 };

src/lib/hooks/useArrowDisable.ts

@@ -0,0 +1,26 @@
+import { endOfMonth, endOfWeek, startOfMonth, startOfWeek } from "date-fns";
+import useStore from "./useStore";
+
+const useArrowDisable = () => {
+  const { selectedDate, week, navigationPickerProps, view } = useStore();
+  const minDate = navigationPickerProps?.minDate;
+  const maxDate = navigationPickerProps?.maxDate;
+  const endDate =
+    view === "month"
+      ? endOfMonth(selectedDate)
+      : view === "week"
+        ? endOfWeek(selectedDate, { weekStartsOn: week?.weekStartOn })
+        : selectedDate;
+  const startDate =
+    view === "month"
+      ? startOfMonth(selectedDate)
+      : view === "week"
+        ? startOfWeek(selectedDate, { weekStartsOn: week?.weekStartOn })
+        : selectedDate;
+  const prevDisabled = minDate ? startDate <= minDate : false;
+  const nextDisabled = maxDate ? endDate >= maxDate : false;
+
+  return { prevDisabled, nextDisabled };
+};
+
+export default useArrowDisable;