maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Fix auto scroll (#10591) 

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
sean-brydon 2023-08-05 15:12:45 +01:00 committed by GitHub
parent b006f7f1df
commit 8dc9f1c929
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,11 @@
import { useMemo, useRef, useEffect } from "react";
import dayjs from "@calcom/dayjs";
import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings";
import { useSlotsForMultipleDates } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
import { classNames } from "@calcom/lib";
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
import { useBookerStore } from "../store";
import { useEvent, useScheduleForEvent } from "../utils/event";
@ -22,9 +24,11 @@ type AvailableTimeSlotsProps = {
* in columns next to each other.
*/
export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeSlot }: AvailableTimeSlotsProps) => {
const isMobile = useMediaQuery("(max-width: 768px)");
const selectedDate = useBookerStore((state) => state.selectedDate);
const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot);
const setSeatedEventData = useBookerStore((state) => state.setSeatedEventData);
const isEmbed = useIsEmbed();
const event = useEvent();
const date = selectedDate || dayjs().format("YYYY-MM-DD");
const containerRef = useRef<HTMLDivElement | null>(null);
@ -78,10 +82,11 @@ export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeSlot }:
const slotsPerDay = useSlotsForMultipleDates(dates, schedule?.data?.slots);
useEffect(() => {
if (containerRef.current && !schedule.isLoading) {
if (isEmbed) return;
if (containerRef.current && !schedule.isLoading && isMobile) {
containerRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
}
}, [containerRef, schedule.isLoading]);
}, [containerRef, schedule.isLoading, isEmbed, isMobile]);
return (
<div