75 lines
2 KiB
TypeScript
75 lines
2 KiB
TypeScript
import { FC, ReactNode, useEffect, useRef } from 'react';
|
|
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
|
|
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
|
|
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
|
|
|
export const ModalWrapperComponent: FC<{
|
|
title: string;
|
|
children: ReactNode;
|
|
customClose?: () => void;
|
|
ask?: boolean;
|
|
}> = ({ title, children, ask, customClose }) => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const modal = useModals();
|
|
const t = useT();
|
|
const closeModal = async () => {
|
|
if (
|
|
ask &&
|
|
!(await deleteDialog(
|
|
t(
|
|
'are_you_sure_you_want_to_close_the_window',
|
|
'Are you sure you want to close the window?'
|
|
),
|
|
t('yes_close', 'Yes, close')
|
|
))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (customClose) {
|
|
customClose();
|
|
return;
|
|
}
|
|
|
|
modal.closeAll();
|
|
};
|
|
|
|
useEffect(() => {
|
|
ref?.current?.scrollIntoView({
|
|
behavior: 'smooth',
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="relative">
|
|
<div className="absolute -top-[30px] left-0" ref={ref} />
|
|
</div>
|
|
<div
|
|
className="p-[32px] flex flex-col text-newTextColor bg-newBgColorInner rounded-[24px]"
|
|
>
|
|
<div className="flex items-start mb-[24px]">
|
|
<div className="flex-1 text-[24px]">{title}</div>
|
|
<div className="cursor-pointer" onClick={closeModal}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M16.5 4.5L4.5 16.5M4.5 4.5L16.5 16.5"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>{children}</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|