This commit is contained in:
Nevo David 2025-12-26 08:09:16 +07:00
parent 74b84b5eeb
commit d4f18d1030
5 changed files with 38 additions and 21 deletions

View File

@ -548,16 +548,16 @@ export const CalendarColumn: FC<{
if (set === 'exit') return;
modal.openModal({
id: 'add-edit-modal',
closeOnClickOutside: false,
removeLayout: true,
closeOnEscape: false,
withCloseButton: false,
removeLayout: true,
fullScreen: true,
askClose: true,
fullScreen: true,
classNames: {
modal: 'fixed left-0 top-0 w-full h-full',
modal: 'w-[100%] max-w-[1400px] text-textColor',
},
id: 'add-edit-modal',
children: (
<AddEditModal
allIntegrations={integrations.map((p) => ({

View File

@ -150,15 +150,16 @@ const FirstStep: FC = (props) => {
});
setShowStep('');
modal.openModal({
id: 'add-edit-modal',
closeOnClickOutside: false,
removeLayout: true,
closeOnEscape: false,
withCloseButton: false,
removeLayout: true,
askClose: true,
fullScreen: true,
classNames: {
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
modal: 'w-[100%] max-w-[1400px] text-textColor',
},
id: 'add-edit-modal',
children: (
<AddEditModal
allIntegrations={integrations.map((p) => ({

View File

@ -1,7 +1,13 @@
'use client';
import React, {
FC, MouseEventHandler, useCallback, useLayoutEffect, useMemo, useRef, useState
FC,
MouseEventHandler,
useCallback,
useLayoutEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useClickOutside } from '@mantine/hooks';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
@ -56,7 +62,7 @@ export const Menu: FC<{
const { integrations, reloadCalendarView } = useCalendar();
const toast = useToaster();
const modal = useModals();
const [show, setShow] = useState<false | {x: number, y: number}>(false);
const [show, setShow] = useState<false | { x: number; y: number }>(false);
const menuRef = useRef<HTMLDivElement>(null);
const ref = useClickOutside<HTMLDivElement>(() => {
setShow(false);
@ -69,13 +75,16 @@ export const Menu: FC<{
const menuRect = menuRef.current.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const padding = 10;
// Check if menu overflows bottom of viewport
if (menuRect.bottom > viewportHeight - padding) {
const newY = Math.max(padding, viewportHeight - menuRect.height - padding);
const newY = Math.max(
padding,
viewportHeight - menuRect.height - padding
);
// Only update if position actually changed significantly to avoid infinite loop
if (Math.abs(show.y - newY) > 1) {
setShow(prev => prev ? { ...prev, y: newY } : false);
setShow((prev) => (prev ? { ...prev, y: newY } : false));
}
}
}
@ -88,7 +97,11 @@ export const Menu: FC<{
e.stopPropagation();
// @ts-ignore
const boundBox = showRef?.current?.getBoundingClientRect();
setShow(show ? false : { x: boundBox?.left, y: boundBox?.top + boundBox?.height });
setShow(
show
? false
: { x: boundBox?.left, y: boundBox?.top + boundBox?.height }
);
},
[show]
);
@ -184,15 +197,16 @@ export const Menu: FC<{
).json();
modal.openModal({
id: 'add-edit-modal',
closeOnClickOutside: false,
removeLayout: true,
closeOnEscape: false,
withCloseButton: false,
removeLayout: true,
askClose: true,
fullScreen: true,
classNames: {
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
modal: 'w-[100%] max-w-[1400px] text-textColor',
},
id: 'add-edit-modal',
children: (
<AddEditModal
allIntegrations={integrations.map((p) => ({
@ -329,7 +343,7 @@ export const Menu: FC<{
<div
ref={menuRef}
onClick={(e) => e.stopPropagation()}
style={{left: show.x, top: show.y}}
style={{ left: show.x, top: show.y }}
className={`fixed p-[12px] bg-newBgColorInner shadow-menu flex flex-col gap-[16px] z-[100] rounded-[8px] border border-tableBorder text-nowrap`}
>
{canDisable && !findIntegration?.refreshNeeded && (

View File

@ -48,15 +48,16 @@ export const NewPost = () => {
if (set === 'exit') return;
modal.openModal({
id: 'add-edit-modal',
closeOnClickOutside: false,
removeLayout: true,
closeOnEscape: false,
withCloseButton: false,
removeLayout: true,
askClose: true,
fullScreen: true,
classNames: {
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
modal: 'w-[100%] max-w-[1400px] text-textColor',
},
id: 'add-edit-modal',
children: (
<AddEditModal
allIntegrations={integrations.map((p) => ({

View File

@ -93,15 +93,16 @@ export const Sets: FC = () => {
const addSet = useCallback(
(params?: { id?: string; name?: string; content?: string }) => () => {
modal.openModal({
id: 'add-edit-modal',
closeOnClickOutside: false,
removeLayout: true,
closeOnEscape: false,
withCloseButton: false,
askClose: true,
fullScreen: true,
classNames: {
modal: 'w-[100%] max-w-[1400px] text-textColor',
},
id: 'add-edit-modal',
children: (
<AddEditModal
allIntegrations={integrations.map((p: any) => ({