public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

⚡ performance increase for the DatePicker component (#1404) 

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/1333/head^2
André Ricardo 2022-01-04 06:06:05 -04:00 committed by GitHub
parent 80bd7fd89b
commit 9b5da1bca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/booking/DatePicker.tsx
View File

@ -86,12 +86,24 @@ function DatePicker({
const { i18n } = useLocale(); const { i18n } = useLocale();
const [browsingDate, setBrowsingDate] = useState<Dayjs | null>(date); const [browsingDate, setBrowsingDate] = useState<Dayjs | null>(date);
const [month, setMonth] = useState<string>("");
const [year, setYear] = useState<string>("");
const [isFirstMonth, setIsFirstMonth] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
if (!browsingDate || (date && browsingDate.utcOffset() !== date?.utcOffset())) { if (!browsingDate || (date && browsingDate.utcOffset() !== date?.utcOffset())) {
setBrowsingDate(date || dayjs().tz(timeZone())); setBrowsingDate(date || dayjs().tz(timeZone()));
} }
}, [date, browsingDate]); }, [date, browsingDate]);
useEffect(() => {
if (browsingDate) {
setMonth(browsingDate.toDate().toLocaleString(i18n.language, { month: "long" }));
setYear(browsingDate.format("YYYY"));
setIsFirstMonth(browsingDate.startOf("month").isBefore(dayjs()));
}
}, [browsingDate, i18n.language]);
const days = useMemo(() => { const days = useMemo(() => {
if (!browsingDate) { if (!browsingDate) {
return []; return [];
@ -156,19 +168,14 @@ function DatePicker({
}> }>
<div className="flex mb-4 text-xl font-light text-gray-600"> <div className="flex mb-4 text-xl font-light text-gray-600">
<span className="w-1/2 text-gray-600 dark:text-white"> <span className="w-1/2 text-gray-600 dark:text-white">
<strong className="text-gray-900 dark:text-white"> <strong className="text-gray-900 dark:text-white">{month}</strong>{" "}
{browsingDate.toDate().toLocaleString(i18n.language, { month: "long" })} <span className="text-gray-500">{year}</span>
</strong>{" "}
<span className="text-gray-500">{browsingDate.format("YYYY")}</span>
</span> </span>
<div className="w-1/2 text-right text-gray-600 dark:text-gray-400"> <div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
<button <button
onClick={decrementMonth} onClick={decrementMonth}
className={classNames( className={classNames("group mr-2 p-1", isFirstMonth && "text-gray-400 dark:text-gray-600")}
"group mr-2 p-1", disabled={isFirstMonth}
browsingDate.startOf("month").isBefore(dayjs()) && "text-gray-400 dark:text-gray-600"
)}
disabled={browsingDate.startOf("month").isBefore(dayjs())}
data-testid="decrementMonth"> data-testid="decrementMonth">
<ChevronLeftIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" /> <ChevronLeftIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" />
</button> </button>