cal.pub0.org/packages/features/calendars/weeklyview/components/currentTime/index.tsx

55 lines
1.9 KiB
TypeScript

import { useEffect, useState, useRef } from "react";
import dayjs from "@calcom/dayjs";
import { useTimePreferences } from "@calcom/features/bookings/lib";
import { useCalendarStore } from "../../state/store";
export function CurrentTime() {
const currentTimeRef = useRef<HTMLDivElement>(null);
const [scrolledIntoView, setScrolledIntoView] = useState(false);
const [currentTimePos, setCurrentTimePos] = useState<number | null>(null);
const { startHour, endHour } = useCalendarStore((state) => ({
startHour: state.startHour || 0,
endHour: state.endHour || 23,
}));
const { timeFormat } = useTimePreferences();
useEffect(() => {
// Set the container scroll position based on the current time.
const currentHour = new Date().getHours();
let currentMinute = new Date().getHours() * 60;
currentMinute = currentMinute + new Date().getMinutes();
if (currentHour > endHour || currentHour < startHour) {
setCurrentTimePos(null);
}
const minutesFromStart = currentMinute - startHour * 60;
setCurrentTimePos(minutesFromStart);
if (!currentTimeRef.current || scrolledIntoView) return;
// Within a small timeout so element has time to render.
setTimeout(() => {
currentTimeRef?.current?.scrollIntoView({ block: "center" });
setScrolledIntoView(true);
}, 100);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startHour, endHour, scrolledIntoView]);
return (
<div
ref={currentTimeRef}
className="absolute top-0 z-40 flex h-px items-center justify-center text-xs"
aria-hidden="true"
style={{
top: `calc(${currentTimePos}*var(--one-minute-height) + var(--calendar-offset-top))`,
zIndex: 70,
}}>
<div className="w-14 pr-2 text-right">{dayjs().format(timeFormat)}</div>
<div className="bg-inverted h-3 w-px" />
<div className="bg-inverted h-px w-screen" />
</div>
);
}