owncast/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
Matthew Heller 6e54ec7695
Antd updates (#2194)
* Fix antd Modal.visible warning by using updated attribute name 'open'.

* Update more attributes (onVisibleChange => onOpenChange, defaultVisible => defaultOpen) to fix browser console warnings.

* Update ModalProps property from 'visible' to 'open' to match the change in antd.

* Update variable names to match the antd change from 'visible' to 'open'.

* Inline this for the linter.

* One more visible => open reference.
2022-10-10 17:11:29 -07:00

78 lines
1.8 KiB
TypeScript

import { Popover } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import React, { useState, useEffect, FC } from 'react';
import styles from './NotifyReminderPopup.module.scss';
export type NotifyReminderPopupProps = {
open: boolean;
children: React.ReactNode;
notificationClicked: () => void;
notificationClosed: () => void;
};
export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
children,
open,
notificationClicked,
notificationClosed,
}) => {
const [openPopup, setOpenPopup] = useState(open);
const [mounted, setMounted] = useState(false);
useEffect(() => {
setOpenPopup(open);
}, [open]);
useEffect(() => {
setMounted(true);
}, []);
const title = <div className={styles.title}>Stay updated!</div>;
const popupStyle = {
borderRadius: '5px',
cursor: 'pointer',
paddingTop: '10px',
paddingRight: '10px',
fontSize: '16px',
};
const popupClicked = e => {
e.stopPropagation();
notificationClicked();
};
const popupClosed = e => {
e.stopPropagation();
setOpenPopup(false);
notificationClosed();
};
const content = (
<div onClick={popupClicked} onKeyDown={popupClicked} role="menuitem" tabIndex={0}>
<button type="button" className={styles.closebutton} onClick={popupClosed}>
<CloseOutlined />
</button>
<div className={styles.contentbutton}>
Click and never miss
<br />
future streams!
</div>
</div>
);
return (
mounted && (
<Popover
placement="topLeft"
defaultOpen={openPopup}
open={openPopup}
destroyTooltipOnHide
title={title}
content={content}
overlayInnerStyle={popupStyle}
>
{children}
</Popover>
)
);
};