Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | import { Dispatch, RefObject, SetStateAction } from "react";
import {
ICardContentContextMenuData,
ICardTrackContextMenuData,
} from "types/contextMenu";
export function calculatePosition(
isOffScreen: boolean,
maxEdgePosition: number,
position: number,
defaultValue: number
): number {
Iif (isOffScreen) {
return maxEdgePosition;
}
Iif (!position || position < 45) {
return defaultValue;
}
return position;
}
const isOffScreenWidth = (x: number, width: number) => {
return x + width > window.innerWidth;
};
const isOffScreenHeight = (y: number, height: number) => {
return y + height > window.innerHeight;
};
const calculateOffScreenWidth = (width: number, offset = 0) => {
return window.innerWidth - width - offset;
};
const calculateOffScreenHeight = (height: number, offset = 0) => {
return window.innerHeight - height - offset;
};
interface IHandlePositioning {
positionData:
| ICardTrackContextMenuData
| ICardContentContextMenuData
| undefined;
elementRef: RefObject<HTMLElement>;
setPosition: Dispatch<
SetStateAction<{
x: number;
y: number;
}>
>;
setIsOffScreen: Dispatch<
SetStateAction<{
x: boolean;
y: boolean;
}>
>;
offsets?: {
x: number;
y: number;
};
}
export function handlePositioning({
positionData,
elementRef,
setPosition,
setIsOffScreen,
offsets,
}: IHandlePositioning): void {
Iif (!positionData?.position?.x || !positionData?.position?.y) {
setIsOffScreen({ x: false, y: false });
return;
}
const contextMenuRect = elementRef.current?.getBoundingClientRect();
Iif (!contextMenuRect) return;
const isContextMenuWidthOffScreen = isOffScreenWidth(
positionData.position.x,
contextMenuRect.width
);
const isContextMenuHeightOffScreen = isOffScreenHeight(
positionData.position.y,
contextMenuRect.height
);
setIsOffScreen({
x: isContextMenuWidthOffScreen,
y: isContextMenuHeightOffScreen,
});
Iif (isContextMenuWidthOffScreen) {
setPosition((prevState) => ({
...prevState,
x: calculateOffScreenWidth(contextMenuRect.width, offsets?.x),
}));
}
Iif (isContextMenuHeightOffScreen) {
setPosition((prevState) => ({
...prevState,
y: calculateOffScreenHeight(contextMenuRect.height, offsets?.y),
}));
}
}
|