Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(ContextMenu): add padding + on esc close

Browse source
This commit is contained in:
Timothy Z. 2025-03-25 16:53:15 +02:00
parent ca582a9879
commit c1d317acf7
1 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/ContextMenu/ContextMenu.tsx
View file

@ -2,6 +2,11 @@ import React, { memo, RefObject, useCallback, useEffect, useMemo, useState } fro
import { createPortal } from 'react-dom';
import styles from './ContextMenu.less';
const PADDING = 8;
type Coordinates = [number, number];
type Size = [number, number];
type Props = {
children: React.ReactNode,
on: RefObject<HTMLElement>[],
@ -10,8 +15,8 @@ type Props = {
const ContextMenu = ({ children, on, autoClose }: Props) => {
const [active, setActive] = useState(false);
const [position, setPosition] = useState([0, 0]);
const [containerSize, setContainerSize] = useState([0, 0]);
const [position, setPosition] = useState<Coordinates>([0, 0]);
const [containerSize, setContainerSize] = useState<Size>([0, 0]);
const ref = useCallback((element: HTMLDivElement) => {
element && setContainerSize([element.offsetWidth, element.offsetHeight]);
@ -22,8 +27,21 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
const [containerWidth, containerHeight] = containerSize;
const [x, y] = position;
const left = (x + containerWidth) > viewportWidth ? x - containerWidth : x;
const top = (y + containerHeight) > viewportHeight ? y - containerHeight : y;
const left = Math.max(
PADDING,
Math.min(
x + containerWidth > viewportWidth - PADDING ? x - containerWidth : x,
viewportWidth - containerWidth - PADDING
)
);
const top = Math.max(
PADDING,
Math.min(
y + containerHeight > viewportHeight - PADDING ? y - containerHeight : y,
viewportHeight - containerHeight - PADDING
)
);
return { top, left };
}, [position, containerSize]);
@ -39,19 +57,25 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
const onContextMenu = (event: MouseEvent) => {
event.preventDefault();
const { clientX, clientY } = event;
setPosition([clientX, clientY]);
setPosition([event.clientX, event.clientY]);
setActive(true);
};
const handleKeyDown = useCallback((event: KeyboardEvent) => event.key === 'Escape' && close(), []);
const onClick = useCallback(() => {
autoClose && close();
}, [autoClose]);
useEffect(() => {
on.forEach((ref) => ref.current && ref.current.addEventListener('contextmenu', onContextMenu));
return () => on.forEach((ref) => ref.current && ref.current.removeEventListener('contextmenu', onContextMenu));
document.addEventListener('keydown', handleKeyDown);
return () => {
on.forEach((ref) => ref.current && ref.current.removeEventListener('contextmenu', onContextMenu));
document.removeEventListener('keydown', handleKeyDown);
}
}, [on]);
return active && createPortal((