IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Graph: make ContextMenu potitioning aware of the viewport width (#19699)

Browse Source
This commit is contained in:
Miguel Carvajal 2019-10-08 19:57:50 +02:00 committed by Torkel Ödegaard
parent 0a2d5e16dd
commit c2749052d7
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
View File

@ -162,15 +162,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(({ x, y, onClo
return (
<Portal>
<div
ref={menuRef}
style={{
position: 'fixed',
left: x - 5,
top: y + 5,
}}
className={styles.wrapper}
>
<div ref={menuRef} style={getStyle(menuRef.current)} className={styles.wrapper}>
{renderHeader && <div className={styles.header}>{renderHeader()}</div>}
<List
items={items || []}
@ -185,6 +177,25 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(({ x, y, onClo
</div>
</Portal>
);
function getStyle(menuNode: HTMLDivElement | null) {
const haventMeasuredMenuYet = !menuNode;
if (haventMeasuredMenuYet) {
return { visibility: 'hidden' as const };
}
const rect = menuNode!.getBoundingClientRect();
const OFFSET = 5;
const collisions = {
right: window.innerWidth < x + rect.width,
bottom: window.innerHeight < rect.bottom + rect.height + OFFSET,
};
return {
position: 'fixed' as const,
left: collisions.right ? x - rect.width - OFFSET : x - OFFSET,
top: collisions.bottom ? y - rect.height - OFFSET : y + OFFSET,
};
}
});
interface ContextMenuItemProps {