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

fix: Auto scroll on selection of date selection (#9907)

pull/9692/head^2
sean-brydon 2023-07-04 11:44:13 +01:00 committed by GitHub
parent 504d900d05
commit 0f332cc35e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
View File

@ -1,4 +1,4 @@
import { useMemo } from "react"; import { useMemo, useRef, useEffect } from "react";
import dayjs from "@calcom/dayjs"; import dayjs from "@calcom/dayjs";
import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings"; import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings";
@ -26,6 +26,7 @@ export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeslot }:
const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot); const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot);
const event = useEvent(); const event = useEvent();
const date = selectedDate || dayjs().format("YYYY-MM-DD"); const date = selectedDate || dayjs().format("YYYY-MM-DD");
const containerRef = useRef<HTMLDivElement | null>(null);
const onTimeSelect = (time: string) => { const onTimeSelect = (time: string) => {
setSelectedTimeslot(time); setSelectedTimeslot(time);
@ -58,8 +59,15 @@ export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeslot }:
const isMultipleDates = dates.length > 1; const isMultipleDates = dates.length > 1;
const slotsPerDay = useSlotsForMultipleDates(dates, schedule?.data?.slots); const slotsPerDay = useSlotsForMultipleDates(dates, schedule?.data?.slots);
useEffect(() => {
if (containerRef.current && !schedule.isLoading) {
containerRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
}
}, [containerRef, schedule.isLoading]);
return ( return (
<div <div
ref={containerRef}
className={classNames( className={classNames(
limitHeight && "flex-grow md:h-[400px]", limitHeight && "flex-grow md:h-[400px]",
!limitHeight && "flex h-full w-full flex-row gap-4" !limitHeight && "flex h-full w-full flex-row gap-4"