2020-04-10 04:40:22 +02:00
|
|
|
import React, { useRef } from 'react';
|
|
|
|
import { Cross } from 'shared/icons';
|
|
|
|
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
2020-04-11 04:22:58 +02:00
|
|
|
import { Container, Header, HeaderTitle, Content, CloseButton } from './Styles';
|
2020-04-10 04:40:22 +02:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
title: string;
|
|
|
|
top: number;
|
|
|
|
left: number;
|
|
|
|
onClose: () => void;
|
|
|
|
};
|
|
|
|
|
2020-04-11 04:22:58 +02:00
|
|
|
const PopupMenu: React.FC<Props> = ({ title, top, left, onClose, children }) => {
|
2020-04-10 04:40:22 +02:00
|
|
|
const $containerRef = useRef();
|
|
|
|
useOnOutsideClick($containerRef, true, onClose, null);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Container left={left} top={top} ref={$containerRef}>
|
|
|
|
<Header>
|
|
|
|
<HeaderTitle>{title}</HeaderTitle>
|
|
|
|
<CloseButton onClick={() => onClose()}>
|
|
|
|
<Cross />
|
|
|
|
</CloseButton>
|
|
|
|
</Header>
|
2020-04-11 04:22:58 +02:00
|
|
|
<Content>{children}</Content>
|
2020-04-10 04:40:22 +02:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default PopupMenu;
|