mirror of
https://github.com/usememos/memos.git
synced 2024-09-21 06:55:55 +08:00
chore: add click away event to date picker
This commit is contained in:
parent
ec2995d64a
commit
dfa14689e4
|
@ -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" />
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue