2022-05-17 06:06:48 +03:00
|
|
|
import { Popover } from 'antd';
|
|
|
|
import { CloseOutlined } from '@ant-design/icons';
|
2022-09-07 10:00:28 +03:00
|
|
|
import React, { useState, useEffect, FC } from 'react';
|
|
|
|
import styles from './NotifyReminderPopup.module.scss';
|
2022-05-17 06:06:48 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export type NotifyReminderPopupProps = {
|
2022-10-11 03:11:29 +03:00
|
|
|
open: boolean;
|
2022-05-17 07:44:09 +03:00
|
|
|
children: React.ReactNode;
|
2022-05-17 06:06:48 +03:00
|
|
|
notificationClicked: () => void;
|
|
|
|
notificationClosed: () => void;
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|
2022-05-13 06:52:19 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
|
|
|
|
children,
|
2022-10-11 03:11:29 +03:00
|
|
|
open,
|
2022-09-07 10:00:28 +03:00
|
|
|
notificationClicked,
|
|
|
|
notificationClosed,
|
|
|
|
}) => {
|
2022-10-11 03:11:29 +03:00
|
|
|
const [openPopup, setOpenPopup] = useState(open);
|
2022-05-24 23:26:04 +03:00
|
|
|
const [mounted, setMounted] = useState(false);
|
2022-06-27 09:01:52 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-10-11 03:11:29 +03:00
|
|
|
setOpenPopup(open);
|
|
|
|
}, [open]);
|
2022-05-24 23:26:04 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setMounted(true);
|
|
|
|
}, []);
|
2022-05-17 06:06:48 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
const title = <div className={styles.title}>Stay updated!</div>;
|
2022-05-17 06:06:48 +03:00
|
|
|
const popupStyle = {
|
|
|
|
borderRadius: '5px',
|
|
|
|
cursor: 'pointer',
|
|
|
|
paddingTop: '10px',
|
|
|
|
paddingRight: '10px',
|
|
|
|
fontSize: '16px',
|
|
|
|
};
|
|
|
|
|
|
|
|
const popupClicked = e => {
|
|
|
|
e.stopPropagation();
|
|
|
|
notificationClicked();
|
|
|
|
};
|
|
|
|
|
|
|
|
const popupClosed = e => {
|
|
|
|
e.stopPropagation();
|
2022-10-11 03:11:29 +03:00
|
|
|
setOpenPopup(false);
|
2022-05-17 06:06:48 +03:00
|
|
|
notificationClosed();
|
|
|
|
};
|
|
|
|
|
|
|
|
const content = (
|
2022-06-27 09:01:52 +03:00
|
|
|
<div onClick={popupClicked} onKeyDown={popupClicked} role="menuitem" tabIndex={0}>
|
2022-09-07 10:00:28 +03:00
|
|
|
<button type="button" className={styles.closebutton} onClick={popupClosed}>
|
2022-05-17 06:06:48 +03:00
|
|
|
<CloseOutlined />
|
|
|
|
</button>
|
2022-09-07 10:00:28 +03:00
|
|
|
<div className={styles.contentbutton}>
|
2022-05-24 23:26:04 +03:00
|
|
|
Click and never miss
|
|
|
|
<br />
|
|
|
|
future streams!
|
2022-06-27 09:01:52 +03:00
|
|
|
</div>
|
2022-05-24 23:26:04 +03:00
|
|
|
</div>
|
2022-05-17 06:06:48 +03:00
|
|
|
);
|
2022-06-27 09:01:52 +03:00
|
|
|
|
2022-05-17 06:06:48 +03:00
|
|
|
return (
|
2022-06-27 09:01:52 +03:00
|
|
|
mounted && (
|
2022-05-24 23:26:04 +03:00
|
|
|
<Popover
|
|
|
|
placement="topLeft"
|
2022-10-11 03:11:29 +03:00
|
|
|
defaultOpen={openPopup}
|
|
|
|
open={openPopup}
|
2022-05-24 23:26:04 +03:00
|
|
|
destroyTooltipOnHide
|
|
|
|
title={title}
|
|
|
|
content={content}
|
|
|
|
overlayInnerStyle={popupStyle}
|
2022-10-18 07:54:26 +03:00
|
|
|
color={styles.popupBackgroundColor}
|
2022-05-24 23:26:04 +03:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Popover>
|
|
|
|
)
|
2022-05-17 06:06:48 +03:00
|
|
|
);
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|