Eunjae LeeandGitHub
3d3acba82a
* Reapply "fix: replace filter implementations on bookings (#19445)" (#19506)
This reverts commit f6af6e34bd.
* force custom date range selector for bookings except for Past tab
* fix e2e test
* add e2e tests
* fix e2e test
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
// eslint-disable-next-line no-restricted-imports
|
|
import { debounce } from "lodash";
|
|
import { useCallback, useEffect, useRef } from "react";
|
|
|
|
// Dynamically adjusts DataTable height on mobile to prevent nested scrolling
|
|
// and ensure the table fits within the viewport without overflowing (hacky)
|
|
export function useProperHeightForMobile(ref: React.RefObject<HTMLDivElement>) {
|
|
const lastOffsetY = useRef<number>();
|
|
const lastWindowHeight = useRef<number>();
|
|
const BOTTOM_NAV_HEIGHT = 64;
|
|
const BUFFER = 32;
|
|
|
|
const updateHeight = useCallback(
|
|
debounce(() => {
|
|
if (!ref.current || window.innerWidth >= 640) return;
|
|
const rect = ref.current.getBoundingClientRect();
|
|
if (rect.top !== lastOffsetY.current || window.innerHeight !== lastWindowHeight.current) {
|
|
lastOffsetY.current = rect.top;
|
|
lastWindowHeight.current = window.innerHeight;
|
|
const height = window.innerHeight - lastOffsetY.current - BOTTOM_NAV_HEIGHT - BUFFER;
|
|
ref.current.style.height = `${height}px`;
|
|
}
|
|
}, 200),
|
|
[ref.current]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
updateHeight();
|
|
};
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
}, [updateHeight]);
|
|
|
|
updateHeight();
|
|
}
|