From dfa14689e400e0aaa77c0c7b89b57c2f16bbe1d0 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 19 Nov 2023 10:41:08 +0800
Subject: [PATCH] chore: add click away event to date picker

---
 web/src/components/kit/DatePicker.tsx | 13 ++++++++++---
 web/src/pages/DailyReview.tsx         |  3 ++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/components/kit/DatePicker.tsx b/web/src/components/kit/DatePicker.tsx
index 6d6df7c7..328f3582 100644
--- a/web/src/components/kit/DatePicker.tsx
+++ b/web/src/components/kit/DatePicker.tsx
@@ -1,6 +1,7 @@
 import { Badge, Button } from "@mui/joy";
 import classNames from "classnames";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import useClickAway from "react-use/lib/useClickAway";
 import { getMemoStats } from "@/helpers/api";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, isFutureDate } from "@/helpers/datetime";
@@ -15,15 +16,21 @@ interface DatePickerProps {
   isFutureDateDisabled?: boolean;
   datestamp: number;
   handleDateStampChange: (datestamp: number) => void;
+  handleClickAway: () => void;
 }
 
 const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   const t = useTranslate();
-  const { className, isFutureDateDisabled, datestamp, handleDateStampChange } = props;
+  const { className, isFutureDateDisabled, datestamp, handleDateStampChange, handleClickAway } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
   const [currentDateStamp, setCurrentDateStamp] = useState<number>(getMonthFirstDayDateStamp(datestamp));
   const [countByDate, setCountByDate] = useState(new Map());
   const user = useCurrentUser();
 
+  useClickAway(containerRef, () => {
+    handleClickAway();
+  });
+
   useEffect(() => {
     setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
   }, [datestamp]);
@@ -66,7 +73,7 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   };
 
   return (
-    <div className={`date-picker-wrapper ${className}`}>
+    <div ref={containerRef} className={`date-picker-wrapper ${className}`}>
       <div className="date-picker-header">
         <Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-12)}>
           <Icon.ChevronsLeft className="icon-img" />
diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx
index b2e991c6..7f5d4873 100644
--- a/web/src/pages/DailyReview.tsx
+++ b/web/src/pages/DailyReview.tsx
@@ -89,8 +89,9 @@ const DailyReview = () => {
               showDatePicker ? "" : "!hidden"
             }`}
             datestamp={selectedDateStamp}
-            handleDateStampChange={handleDataPickerChange}
             isFutureDateDisabled
+            handleDateStampChange={handleDataPickerChange}
+            handleClickAway={() => toggleShowDatePicker(false)}
           />
         </div>
         <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">