mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(context-menu): render submenu based on viewport constraints #577

Browse source
This commit is contained in:
Eric Y Liu 2021-04-02 13:23:01 -07:00
commit 6dbbe7a2f0
2 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/ContextMenu/ContextMenu.svelte
View file

@ -26,6 +26,7 @@
const position = writable([x, y]);
const currentIndex = writable(-1);
const hasPopup = writable(false);
const menuOffsetX = writable(0);
const ctx = getContext("ContextMenu");
let options = [];
@ -44,6 +45,7 @@
}
setContext("ContextMenu", {
menuOffsetX,
currentIndex,
position,
close,
@ -77,9 +79,19 @@
<svelte:window
on:contextmenu|preventDefault="{(e) => {
if (level > 1) return;
if (open || x === 0) x = e.x;
const { height, width } = ref.getBoundingClientRect();
if (open || x === 0) {
if (window.innerWidth - width < e.x) {
x = e.x - width;
} else {
x = e.x;
}
}
if (open || y === 0) {
const { height } = ref.getBoundingClientRect();
menuOffsetX.set(e.x);
if (window.innerHeight - height < e.y) {
y = e.y - height;