| 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> |
| </> |
| ); |
| }; |
|
|
