trithuc-mvc-react 1.6.13 → 1.6.14

package/components/date/StaticDateRangePicker.jsx

@@ -2,8 +2,11 @@
 "use client";
 import { useEffect, useState } from "react";
 import * as dateFns from "date-fns";
-import { Box, Paper, Stack } from "@mui/material";
+import { Box, Button, ButtonBase, Divider, IconButton, Paper, Stack, Typography, useTheme } from "@mui/material";
+import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import viLocale from "date-fns/locale/vi";
+import { useDateRangeContext } from ".";
 // import "tailwindcss/tailwind.css";
 
 const isBetween = (date, from, to, inclusivity) => {
@@ -20,23 +23,86 @@ const isBetween = (date, from, to, inclusivity) => {
   );
 };
 const days = ["CN", "T2", "T3", "T4", "T5", "T6", "T7"];
-console.log(viLocale.localize.day);
+const DayInWeekHeader = () => {
+  return (
+    <Stack direction="row" alignItems={"center"} sx={{ px: 1, py: 1 }}>
+      {days.map((v, i) => (
+        <Typography
+          key={i}
+          variant="subtitle2"
+          align="center"
+          sx={{ display: "flex", alignItems: "center", justifyContent: "center", flex: 1 }}
+        >
+          {v}
+        </Typography>
+      ))}
+    </Stack>
+  );
+};
+const DayStatus = {
+  normal: "normal",
+  boundary: "bounary",
+  between: "between",
+  currentDate: "currentDate"
+};
 
-const StaticDateRangePicker = ({ value, onUpdate }) => {
+const DayButton = ({ onClick, children, status }) => {
+  const theme = useTheme();
+  let styleDayCell = {};
+
+  if (status == DayStatus.currentDate) {
+    styleDayCell = {
+      border: `1px solid ${theme.palette.grey[500]}`
+    };
+  }
+  if (status == DayStatus.between) {
+    styleDayCell = {
+      border: `1px solid transparent`,
+      backgroundColor: theme.palette.primary.lighter
+    };
+  }
+  if (status == DayStatus.boundary) {
+    styleDayCell = {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    };
+  }
+  return (
+    <ButtonBase
+      onClick={onClick}
+      sx={{
+        borderRadius: "50%",
+        height: 36,
+        width: 36,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ":root": {
+          background: "transparent"
+        },
+        "&:hover": {
+          border: `1px solid ${theme.palette.grey[400]}`
+        },
+        ...styleDayCell
+      }}
+    >
+      {children}
+    </ButtonBase>
+  );
+};
+const StaticDateRangePicker = () => {
   const [currCalendar, setCurrCalendar] = useState([]);
   const [nextCalendar, setNextCalendar] = useState([]);
   const [currMonth, setCurrMonth] = useState(new Date().getMonth());
   const [currYear, setCurrYear] = useState(new Date().getFullYear());
 
-  const [dateRange, setDateRange] = useState({
-    startDate: value?.startDate,
-    endDate: value?.endDate
-  });
+  const { dateRange, setDateRange, closePoper } = useDateRangeContext();
+
   // Thanks to https://github.com/date-fns/date-fns/issues/366#issuecomment-270408980
 
   const generateCalendar = ({ month, year }) => {
     const startOfMonth = dateFns.startOfMonth(new Date(year, month));
-    const endOfMonth = dateFns.endOfMonth(new Date(year, month));
+    // const endOfMonth = dateFns.endOfMonth(new Date(year, month));
     const startDay = startOfMonth.getDay();
     const daysInMonth = dateFns.getDaysInMonth(startOfMonth);
     const days = [...Array(daysInMonth).keys()].map((v) => v + 1);
@@ -66,33 +132,19 @@ const StaticDateRangePicker = ({ value, onUpdate }) => {
     setNextCalendar(_nextCalendar);
   }, [currMonth, currYear]);
 
-  useEffect(() => {
-    onUpdate?.(dateRange);
-  }, [dateRange]);
+  // useEffect(() => {
+  //   onUpdate?.(dateRange);
+  // }, [dateRange]);
 
   useEffect(() => {
-    if (!value) return;
+    if (!dateRange.startDate) return;
 
-    if (value.startDate && !dateFns.isSameDay(value.startDate, dateRange.startDate)) {
-      if (dateFns.isBefore(value.startDate, dateRange.endDate)) {
-        setDateRange((old) => ({ ...old, startDate: value.startDate }));
-      } else {
-        setDateRange((old) => ({ startDate: value.startDate, endDate: null }));
-      }
-      let month = value.startDate.getMonth();
-      let year = value.startDate.getFullYear();
-      if (isNaN(month) || isNaN(year)) return;
-      setCurrMonth(month);
-      setCurrYear(year);
-    } else if (value.endDate && !dateFns.isSameDay(value.endDate, dateRange.endDate)) {
-      setDateRange((old) => ({ ...old, endDate: value.endDate }));
-      let month = value.endDate.getMonth();
-      let year = value.endDate.getFullYear();
-      if (isNaN(month) || isNaN(year)) return;
-      setCurrMonth(month - 1);
-      setCurrYear(year);
-    }
-  }, [value]);
+    let month = dateRange.startDate.getMonth();
+    let year = dateRange.startDate.getFullYear();
+    if (isNaN(month) || isNaN(year)) return;
+    setCurrMonth(month);
+    setCurrYear(year);
+  }, [dateRange]);
 
   const handleUpdateDateRangeOnLeftCalendar = (day) => {
     let thisDate = new Date(currYear, currMonth, day);
@@ -128,6 +180,7 @@ const StaticDateRangePicker = ({ value, onUpdate }) => {
           //   year: currYear,
           // }),
         }));
+        closePoper();
       }
     } else if (dateRange.startDate && dateRange.endDate) {
       setDateRange({
@@ -189,6 +242,7 @@ const StaticDateRangePicker = ({ value, onUpdate }) => {
           //   year: currYear,
           // }),
         }));
+        closePoper();
       }
     } else if (dateRange.startDate && dateRange.endDate) {
       setDateRange({
@@ -218,278 +272,188 @@ const StaticDateRangePicker = ({ value, onUpdate }) => {
   return (
     <Paper>
       <Box sx={{ display: "flex" }} className="date-range-piker-wrapper">
-        <div className="drop-shadow-sm shadow-sm min-w-[10rem] p-3 rounded-lg border border-r-0 flex flex-col">
-          <div className="flex justify-between items-center">
-            <h3 className="text-lg">
-              {" "}
+        <div className="drop-shadow-sm shadow-sm min-w-[10rem]  rounded-lg border border-r-0 flex flex-col">
+          <Stack direction="row" spacing={2} alignItems={"center"} justifyContent={"space-between"} sx={{ p: 2 }}>
+            <IconButton
+              size="medium"
+              onClick={() => {
+                const d = dateFns.sub(new Date(currYear, currMonth), {
+                  months: 1
+                });
+                setCurrMonth(d.getMonth());
+                setCurrYear(d.getFullYear());
+              }}
+            >
+              <NavigateBeforeIcon />
+            </IconButton>
+            <Typography variant="subtitle1" sx={{ height: "24px", alignSelf: "center" }}>
               {dateFns.format(new Date(currYear, currMonth), "MMMMMM yyyy", {
                 locale: viLocale
               })}
-            </h3>
+            </Typography>
+            <IconButton
+              onClick={() => {
+                const d = dateFns.add(new Date(currYear, currMonth), {
+                  months: 1
+                });
+                setCurrMonth(d.getMonth());
+                setCurrYear(d.getFullYear());
+              }}
+            >
+              <NavigateNextIcon />
+            </IconButton>
+          </Stack>
+          <DayInWeekHeader />
+
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "repeat(7, 1fr)",
+              p: 3,
+              gap: 1
+            }}
+          >
+            {currCalendar.map((v, i) => {
+              if (v) {
+                let status = DayStatus.normal;
 
-            <Stack direction="row" spacing={2} alignItems={"center"}>
-              <button
-                type="button"
-                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
-                onClick={() => {
-                  const d = dateFns.sub(new Date(currYear, currMonth), {
-                    months: 1
-                  });
-                  setCurrMonth(d.getMonth());
-                  setCurrYear(d.getFullYear());
-                }}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-                </svg>
-              </button>
-              <button
-                type="button"
-                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
-                onClick={() => {
-                  const d = dateFns.add(new Date(currYear, currMonth), {
-                    months: 1
-                  });
-                  setCurrMonth(d.getMonth());
-                  setCurrYear(d.getFullYear());
-                }}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                </svg>
-              </button>
-            </Stack>
-          </div>
-          <div className="grid grid-cols-7 p-3 gap-2 mt-3">
-            {days.map((v, i) => (
-              <div key={i} className="text-center w-12">
-                {v}
-              </div>
-            ))}
-          </div>
+                if (dateFns.isSameDay(new Date(currYear, currMonth, v), new Date())) {
+                  status = DayStatus.currentDate;
+                }
 
-          <div className="grid grid-cols-7 p-3 gap-2">
-            {currCalendar.map((v, i) =>
-              v ? (
-                <button
-                  type="button"
-                  key={i}
-                  className={`rounded-lg border flex w-12 justify-center p-2 hover:bg-blue-600 hover:text-white ${
-                    dateFns.isSameDay(new Date(currYear, currMonth, v), dateRange.startDate)
-                      ? // dateRange.startDate?.isSame(
-                        //   moment({ day: v, month: currMonth, year: currYear }),
-                        //   "day"
-                        // )
-                        "bg-blue-600 text-white"
-                      : ""
-                  } ${
-                    dateFns.isSameDay(new Date(currYear, currMonth, v), new Date())
-                      ? // moment({ day: v, month: currMonth, year: currYear }).isSame(
-                        //   moment(),
-                        //   "day"
-                        // )
-                        "ring-blue-400 ring-2"
-                      : ""
-                  } ${
-                    dateFns.isSameDay(new Date(currYear, currMonth, v), dateRange.endDate)
-                      ? // dateRange.endDate?.isSame(
-                        //   moment({ day: v, month: currMonth, year: currYear }),
-                        //   "day"
-                        // )
-                        "bg-blue-600 text-white"
-                      : ""
-                  } ${
-                    isBetween(new Date(currYear, currMonth, v), dateRange.startDate, dateRange.endDate, "[]")
-                      ? // moment({
-                        //   day: v,
-                        //   month: currMonth,
-                        //   year: currYear,
-                        // }).isBetween(
-                        //   dateRange.startDate,
-                        //   dateRange.endDate,
-                        //   "day",
-                        //   "()"
-                        // )
-                        "bg-blue-200"
-                      : ""
-                  }`}
-                  onClick={() => {
-                    handleUpdateDateRangeOnLeftCalendar(v);
-                  }}
-                >
-                  {v}
-                </button>
-              ) : (
-                <span key={i}></span>
-              )
-            )}
-          </div>
+                if (
+                  dateFns.isSameDay(new Date(currYear, currMonth, v), dateRange.startDate) ||
+                  dateFns.isSameDay(new Date(currYear, currMonth, v), dateRange.endDate)
+                ) {
+                  status = DayStatus.boundary;
+                } else if (isBetween(new Date(currYear, currMonth, v), dateRange.startDate, dateRange.endDate, "[]")) {
+                  status = DayStatus.between;
+                }
+
+                return (
+                  <DayButton
+                    key={i}
+                    status={status}
+                    onClick={() => {
+                      handleUpdateDateRangeOnLeftCalendar(v);
+                    }}
+                  >
+                    {v}
+                  </DayButton>
+                );
+              }
+
+              return <span key={i}></span>;
+            })}
+          </Box>
         </div>
-        <div className="drop-shadow-sm shadow-sm min-w-[10rem] p-3 rounded-lg border flex flex-col">
-          <div className="flex justify-between items-center">
-            <h3 className="text-lg">
+        <Divider orientation="vertical" />
+        <div className="drop-shadow-sm shadow-sm min-w-[10rem]  rounded-lg border flex flex-col">
+          <Stack direction="row" spacing={2} alignItems={"center"} justifyContent={"space-between"} sx={{ p: 2 }}>
+            <IconButton
+              size="medium"
+              onClick={() => {
+                const d = dateFns.sub(new Date(currYear, currMonth), {
+                  months: 1
+                });
+                // moment({ month: currMonth, year: currYear }).subtract(
+                //   1,
+                //   "month"
+                // )
+                setCurrMonth(d.getMonth());
+                setCurrYear(d.getFullYear());
+              }}
+            >
+              <NavigateBeforeIcon />
+            </IconButton>
+            <Typography variant="subtitle1" sx={{ height: "24px", alignSelf: "center" }}>
               {dateFns.format(dateFns.add(new Date(currYear, currMonth), { months: 1 }), "MMMM yyyy", {
                 locale: viLocale
               })}
-            </h3>
-            <div className="flex gap-x-2 items-center">
-              <button
-                type="button"
-                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
-                onClick={() => {
-                  const d = dateFns.sub(new Date(currYear, currMonth), {
-                    months: 1
-                  });
-                  // moment({ month: currMonth, year: currYear }).subtract(
-                  //   1,
-                  //   "month"
-                  // )
-                  setCurrMonth(d.getMonth());
-                  setCurrYear(d.getFullYear());
-                }}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-                </svg>
-              </button>
-              <button
-                type="button"
-                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
-                onClick={() => {
-                  const d = dateFns.add(new Date(currYear, currMonth), {
-                    months: 1
-                  });
-                  // moment({ month: currMonth }).add(1, "month")
-                  setCurrMonth(d.getMonth());
-                  setCurrYear(d.getFullYear());
-                }}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                </svg>
-              </button>
-            </div>
-          </div>
-          <div className="grid grid-cols-7 p-3 gap-2 mt-3">
-            {days.map((v, i) => (
-              <div key={i} className="text-center w-12">
-                {v}
-              </div>
-            ))}
-          </div>
+            </Typography>
+            <IconButton
+              onClick={() => {
+                const d = dateFns.add(new Date(currYear, currMonth), {
+                  months: 1
+                });
+                // moment({ month: currMonth }).add(1, "month")
+                setCurrMonth(d.getMonth());
+                setCurrYear(d.getFullYear());
+              }}
+            >
+              <NavigateNextIcon />
+            </IconButton>
+          </Stack>
+
+          <DayInWeekHeader />
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "repeat(7, 1fr)",
+              p: 3,
+              gap: 1
+            }}
+          >
+            {" "}
+            {nextCalendar.map((v, i) => {
+              if (v) {
+                let status = DayStatus.normal;
+
+                if (
+                  dateFns.isSameDay(
+                    dateFns.add(new Date(currYear, currMonth, v), {
+                      months: 1
+                    }),
+                    new Date()
+                  )
+                ) {
+                  status = DayStatus.currentDate;
+                }
+
+                if (
+                  dateFns.isSameDay(
+                    dateFns.add(new Date(currYear, currMonth, v), {
+                      months: 1
+                    }),
+                    dateRange.startDate
+                  ) ||
+                  dateFns.isSameDay(
+                    dateFns.add(new Date(currYear, currMonth, v), {
+                      months: 1
+                    }),
+                    dateRange.endDate
+                  )
+                ) {
+                  status = DayStatus.boundary;
+                } else if (
+                  isBetween(
+                    dateFns.add(new Date(currYear, currMonth, v), {
+                      months: 1
+                    }),
+                    dateRange.startDate,
+                    dateRange.endDate,
+                    "[]"
+                  )
+                ) {
+                  status = DayStatus.between;
+                }
+
+                return (
+                  <DayButton
+                    key={i}
+                    status={status}
+                    onClick={() => {
+                      handleUpdateDateRangeOnRightCalendar(v);
+                    }}
+                  >
+                    {v}
+                  </DayButton>
+                );
+              }
 
-          <div className="grid grid-cols-7 p-3 gap-2">
-            {nextCalendar.map((day, i) =>
-              day ? (
-                <button
-                  type="button"
-                  key={i}
-                  className={`rounded-lg border flex w-12 justify-center p-2 hover:bg-blue-600 hover:text-white ${
-                    dateFns.isSameDay(
-                      dateFns.add(new Date(currYear, currMonth, day), {
-                        months: 1
-                      }),
-                      dateRange.startDate
-                    )
-                      ? // dateRange.startDate?.isSame(
-                        //   moment({
-                        //     day: v,
-                        //     month: moment({
-                        //       day: v,
-                        //       month: currMonth,
-                        //       year: currYear,
-                        //     })
-                        //       .add(1, "month")
-                        //       .month(),
-                        //     year: moment({ day: v, month: currMonth, year: currYear })
-                        //       .add(1, "month")
-                        //       .year(),
-                        //   }),
-                        //   "day"
-                        // )
-                        "bg-blue-600 text-white"
-                      : ""
-                  } ${
-                    dateFns.isSameDay(
-                      dateFns.add(new Date(currYear, currMonth, day), {
-                        months: 1
-                      }),
-                      new Date()
-                    )
-                      ? // moment({
-                        //   day: v,
-                        //   month: moment({ day: v, month: currMonth, year: currYear })
-                        //     .add(1, "month")
-                        //     .month(),
-                        //   year: moment({ day: v, month: currMonth, year: currYear })
-                        //     .add(1, "month")
-                        //     .year(),
-                        // }).isSame(moment(), "day")
-                        "ring-blue-400 ring-2"
-                      : ""
-                  } ${
-                    dateFns.isSameDay(
-                      dateFns.add(new Date(currYear, currMonth, day), {
-                        months: 1
-                      }),
-                      dateRange.endDate
-                    )
-                      ? // dateRange.endDate?.isSame(
-                        //   moment({
-                        //     day: v,
-                        //     month: moment({
-                        //       day: v,
-                        //       month: currMonth,
-                        //       year: currYear,
-                        //     })
-                        //       .add(1, "month")
-                        //       .month(),
-                        //     year: moment({ day: v, month: currMonth, year: currYear })
-                        //       .add(1, "month")
-                        //       .year(),
-                        //   }),
-                        //   "day"
-                        // )
-                        "bg-blue-600 text-white"
-                      : ""
-                  } ${
-                    // isBetween(new Date(currYear, currMonth, v), {}))
-                    isBetween(
-                      dateFns.add(new Date(currYear, currMonth, day), {
-                        months: 1
-                      }),
-                      dateRange.startDate,
-                      dateRange.endDate,
-                      "[]"
-                    )
-                      ? // moment({
-                        //   day: v,
-                        //   month: moment({ day: v, month: currMonth, year: currYear })
-                        //     .add(1, "month")
-                        //     .month(),
-                        //   year: moment({ day: v, month: currMonth, year: currYear })
-                        //     .add(1, "month")
-                        //     .year(),
-                        // }).isBetween(
-                        //   dateRange.startDate,
-                        //   dateRange.endDate,
-                        //   "day",
-                        //   "()"
-                        // )
-                        "bg-blue-200"
-                      : ""
-                  }`}
-                  onClick={() => {
-                    handleUpdateDateRangeOnRightCalendar(day);
-                  }}
-                >
-                  {day}
-                </button>
-              ) : (
-                <span key={i}></span>
-              )
-            )}
-          </div>
+              return <span key={i}></span>;
+            })}
+          </Box>
         </div>
       </Box>
     </Paper>