mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

⚡ performance increase for the DatePicker component (#1404)

Browse source 
Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
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 [browsingDate, setBrowsingDate] = useState<Dayjs | null>(date);
const [month, setMonth] = useState<string>("");
const [year, setYear] = useState<string>("");
const [isFirstMonth, setIsFirstMonth] = useState<boolean>(false);
useEffect(() => {
if (!browsingDate || (date && browsingDate.utcOffset() !== date?.utcOffset())) {
setBrowsingDate(date || dayjs().tz(timeZone()));
}
}, [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(() => {
if (!browsingDate) {
return [];
@ -156,19 +168,14 @@ function DatePicker({
}>
<div className="flex mb-4 text-xl font-light text-gray-600">
<span className="w-1/2 text-gray-600 dark:text-white">
<strong className="text-gray-900 dark:text-white">
{browsingDate.toDate().toLocaleString(i18n.language, { month: "long" })}
</strong>{" "}
<span className="text-gray-500">{browsingDate.format("YYYY")}</span>
<strong className="text-gray-900 dark:text-white">{month}</strong>{" "}
<span className="text-gray-500">{year}</span>
</span>
<div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
<button
onClick={decrementMonth}
className={classNames(
"group mr-2 p-1",
browsingDate.startOf("month").isBefore(dayjs()) && "text-gray-400 dark:text-gray-600"
)}
disabled={browsingDate.startOf("month").isBefore(dayjs())}
className={classNames("group mr-2 p-1", isFirstMonth && "text-gray-400 dark:text-gray-600")}
disabled={isFirstMonth}
data-testid="decrementMonth">
<ChevronLeftIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" />
</button>