Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | import { useState, FC, PropsWithChildren } from 'react';
import '../styles/components/modal.scss';
type Props = {
title?: string;
width?: string;
height?: string;
handleExitModal: () => void;
withHeaderCloseButton?: boolean;
withFooterCloseButton?: boolean;
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function useModal(Backdrop: FC<any>, Content: FC<any>) {
const [displayModal, setDisplayModal] = useState(false);
const Modal: FC<PropsWithChildren<Props>> = ({
children,
title,
width = '50vw',
height = '50vh',
handleExitModal,
withHeaderCloseButton,
withFooterCloseButton,
...rest
}) => (
<div className="modal">
<Backdrop
className="modal__backdrop--visible"
handleExitModal={handleExitModal}
{...rest}
/>
<Content
className="modal__content"
title={title}
width={width}
height={height}
handleExitModal={handleExitModal}
withHeaderCloseButton={withHeaderCloseButton}
withFooterCloseButton={withFooterCloseButton}
{...rest}
>
{children}
</Content>
</div>
);
return {
displayModal,
setDisplayModal,
Modal,
};
}
|