usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-20 22:46:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add click away event to date picker

Browse source
This commit is contained in:
Steven 2023-11-19 10:41:08 +08:00
parent ec2995d64a
commit dfa14689e4
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/src/components/kit/DatePicker.tsx
View file

@ -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" />

3
web/src/pages/DailyReview.tsx
View file

@ -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">