Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-23 13:29:35 +02:00
Code Issues Releases Wiki Activity

Components: refactored UI components to use new state. Minor changes to exports and props

Browse source
This commit is contained in:
Paweł Malak 2021-11-09 13:46:07 +01:00
parent adc017c48d
commit 89d935e27f
16 changed files with 118 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

21
client/src/components/UI/Modal/Modal.tsx
View file

@ -1,28 +1,29 @@
import { MouseEvent, useRef } from 'react';
import { MouseEvent, ReactNode, useRef } from 'react';
import classes from './Modal.module.css';
interface ComponentProps {
interface Props {
isOpen: boolean;
setIsOpen: Function;
children: JSX.Element;
children: ReactNode;
}
const Modal = (props: ComponentProps): JSX.Element => {
export const Modal = (props: Props): JSX.Element => {
const modalRef = useRef(null);
const modalClasses = [classes.Modal, props.isOpen ? classes.ModalOpen : classes.ModalClose].join(' ');
const modalClasses = [
classes.Modal,
props.isOpen ? classes.ModalOpen : classes.ModalClose,
].join(' ');
const clickHandler = (e: MouseEvent) => {
if (e.target === modalRef.current) {
props.setIsOpen(false);
}
}
};
return (
<div className={modalClasses} onClick={clickHandler} ref={modalRef}>
{props.children}
</div>
)
}
export default Modal;
);
};