vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

fix(availability): prevent hover animation jump when switching days (#22209)

Browse Source 
* fix(availability): prevent hover animation jump when switching days

* Update CellHighlightContainer.tsx

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
This commit is contained in:
ozer
2025-09-02 13:25:31 +00:00
committed by GitHub
co-authored by Anik Dhabal Babu
parent 6cd4f1fcaa
commit 87331f0a3a
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/timezone-buddy/components/CellHighlightContainer.tsx
+19 -5
View File
@@ -13,20 +13,31 @@ export function CellHighlightContainer({ children }: { children: React.ReactNode
const [isAnimating, setIsAnimating] = useState(false);
const componentContainerRef = useRef<HTMLDivElement>(null);
const { x, y, height, isHover, updateDimensions, setContainerRef } = useStore(store, (state) => state);
const { x, y, height, isHover, updateDimensions, setContainerRef, browsingDate, emitCellPosition } =
useStore(store, (state) => state);
const prevBrowsingDateRef = useRef(browsingDate);
useEffect(() => {
let timeout: NodeJS.Timeout | null = null;
if (isHover) {
setIsAnimating(true);
} else {
timeout = setTimeout(() => setIsAnimating(false), 1000);
timeout = setTimeout(() => setIsAnimating(false), 300);
}
return () => {
timeout && clearTimeout(timeout);
};
}, [isHover]);
useEffect(() => {
if (prevBrowsingDateRef.current?.getTime() !== browsingDate.getTime()) {
setIsAnimating(false);
// Clear hover state and position when date changes
emitCellPosition(-1);
prevBrowsingDateRef.current = browsingDate;
}
}, [browsingDate, emitCellPosition]);
useLayoutEffect(() => {
const handleUpdate = () => {
updateDimensions();
@@ -50,13 +61,16 @@ export function CellHighlightContainer({ children }: { children: React.ReactNode
return (
<LazyMotion features={domAnimation}>
<div
className="relative -mx-2 w-[calc(100%+16px)] overflow-x-scroll px-2 lg:-mx-6 lg:w-[calc(100%+48px)] lg:px-6"
className="relative -mx-2 w-[calc(100%+16px)] overflow-hidden overflow-x-scroll px-2 lg:-mx-6 lg:w-[calc(100%+48px)] lg:px-6"
ref={componentContainerRef}>
{children}
<m.div
className="border-subtle opcaity-0 pointer-events-none absolute left-0 top-0 h-full rounded-lg border-2"
animate={{ x: [null, x], opacity: isAnimating || isHover ? 1 : 0.1 }}
className="border-subtle pointer-events-none absolute left-0 top-0 h-full rounded-lg border-2 opacity-0"
animate={{
x: [null, x],
opacity: isAnimating || isHover ? 1 : 0,
}}
style={{ y, height, width: DAY_CELL_WIDTH }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
/>