|
|
|
@ -1,6 +1,6 @@ |
|
|
|
import { Popover } from 'antd'; |
|
|
|
import { Popover } from 'antd'; |
|
|
|
import { CloseOutlined } from '@ant-design/icons'; |
|
|
|
import { CloseOutlined } from '@ant-design/icons'; |
|
|
|
import React, { useState } from 'react'; |
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
import s from './NotifyReminderPopup.module.scss'; |
|
|
|
import s from './NotifyReminderPopup.module.scss'; |
|
|
|
|
|
|
|
|
|
|
|
interface Props { |
|
|
|
interface Props { |
|
|
|
@ -13,6 +13,11 @@ interface Props { |
|
|
|
export default function NotifyReminderPopup(props: Props) { |
|
|
|
export default function NotifyReminderPopup(props: Props) { |
|
|
|
const { children, visible, notificationClicked, notificationClosed } = props; |
|
|
|
const { children, visible, notificationClicked, notificationClosed } = props; |
|
|
|
const [visiblePopup, setVisiblePopup] = useState(visible); |
|
|
|
const [visiblePopup, setVisiblePopup] = useState(visible); |
|
|
|
|
|
|
|
const [mounted, setMounted] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
setMounted(true); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
const title = <div className={s.title}>Stay updated!</div>; |
|
|
|
const title = <div className={s.title}>Stay updated!</div>; |
|
|
|
const popupStyle = { |
|
|
|
const popupStyle = { |
|
|
|
@ -35,26 +40,30 @@ export default function NotifyReminderPopup(props: Props) { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const content = ( |
|
|
|
const content = ( |
|
|
|
<button type="button" onClick={popupClicked} className={s.contentbutton}> |
|
|
|
<div> |
|
|
|
<button type="button" className={s.closebutton} onClick={popupClosed}> |
|
|
|
<button type="button" className={s.closebutton} onClick={popupClosed}> |
|
|
|
<CloseOutlined /> |
|
|
|
<CloseOutlined /> |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
Click and never miss |
|
|
|
<button type="button" onClick={popupClicked} className={s.contentbutton}> |
|
|
|
<br /> |
|
|
|
Click and never miss |
|
|
|
future streams! |
|
|
|
<br /> |
|
|
|
</button> |
|
|
|
future streams! |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Popover |
|
|
|
mounted && ( |
|
|
|
placement="topLeft" |
|
|
|
<Popover |
|
|
|
defaultVisible={visiblePopup} |
|
|
|
placement="topLeft" |
|
|
|
visible={visiblePopup} |
|
|
|
defaultVisible={visiblePopup} |
|
|
|
destroyTooltipOnHide |
|
|
|
visible={visiblePopup} |
|
|
|
title={title} |
|
|
|
destroyTooltipOnHide |
|
|
|
content={content} |
|
|
|
title={title} |
|
|
|
overlayInnerStyle={popupStyle} |
|
|
|
content={content} |
|
|
|
> |
|
|
|
overlayInnerStyle={popupStyle} |
|
|
|
{children} |
|
|
|
> |
|
|
|
</Popover> |
|
|
|
{children} |
|
|
|
|
|
|
|
</Popover> |
|
|
|
|
|
|
|
) |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|