taskcafe/web/src/shared/components/PopupMenu/index.tsx

31 lines
806 B
TypeScript
Raw Normal View History

2020-04-10 04:40:22 +02:00
import React, { useRef } from 'react';
import { Cross } from 'shared/icons';
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
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;
};
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>
<Content>{children}</Content>
2020-04-10 04:40:22 +02:00
</Container>
);
};
export default PopupMenu;