usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-21 06:55:55 +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 { Badge, Button } from "@mui/joy";
import classNames from "classnames"; 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 { getMemoStats } from "@/helpers/api";
import { DAILY_TIMESTAMP } from "@/helpers/consts"; import { DAILY_TIMESTAMP } from "@/helpers/consts";
import { getDateStampByDate, isFutureDate } from "@/helpers/datetime"; import { getDateStampByDate, isFutureDate } from "@/helpers/datetime";
@ -15,15 +16,21 @@ interface DatePickerProps {
isFutureDateDisabled?: boolean; isFutureDateDisabled?: boolean;
datestamp: number; datestamp: number;
handleDateStampChange: (datestamp: number) => void; handleDateStampChange: (datestamp: number) => void;
handleClickAway: () => void;
} }
const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => { const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
const t = useTranslate(); 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 [currentDateStamp, setCurrentDateStamp] = useState<number>(getMonthFirstDayDateStamp(datestamp));
const [countByDate, setCountByDate] = useState(new Map()); const [countByDate, setCountByDate] = useState(new Map());
const user = useCurrentUser(); const user = useCurrentUser();
useClickAway(containerRef, () => {
handleClickAway();
});
useEffect(() => { useEffect(() => {
setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp)); setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
}, [datestamp]); }, [datestamp]);
@ -66,7 +73,7 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
}; };
return ( return (
<div className={`date-picker-wrapper ${className}`}> <div ref={containerRef} className={`date-picker-wrapper ${className}`}>
<div className="date-picker-header"> <div className="date-picker-header">
<Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-12)}> <Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-12)}>
<Icon.ChevronsLeft className="icon-img" /> <Icon.ChevronsLeft className="icon-img" />

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

@ -89,8 +89,9 @@ const DailyReview = () => {
showDatePicker ? "" : "!hidden" showDatePicker ? "" : "!hidden"
}`} }`}
datestamp={selectedDateStamp} datestamp={selectedDateStamp}
handleDateStampChange={handleDataPickerChange}
isFutureDateDisabled isFutureDateDisabled
handleDateStampChange={handleDataPickerChange}
handleClickAway={() => toggleShowDatePicker(false)}
/> />
</div> </div>
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700"> <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">