diff --git a/assets/js/src/notices/api_errors_notice.jsx b/assets/js/src/notices/api_errors_notice.jsx index 9d3a6ccc6b..f014a28e17 100644 --- a/assets/js/src/notices/api_errors_notice.jsx +++ b/assets/js/src/notices/api_errors_notice.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Notice from 'notices/notice.jsx'; +import Notice from 'notices/notice.tsx'; const APIErrorsNotice = ({ errors }) => { if (errors.length < 1) return null; diff --git a/assets/js/src/notices/mailer_status_notice.jsx b/assets/js/src/notices/mailer_status_notice.jsx index 7bf7e0eeae..ddcb56c081 100644 --- a/assets/js/src/notices/mailer_status_notice.jsx +++ b/assets/js/src/notices/mailer_status_notice.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Notice from 'notices/notice.jsx'; +import Notice from 'notices/notice.tsx'; const MailerStatusNotice = ({ error }) => { if (!error || error.operation !== 'authorization') return null; diff --git a/assets/js/src/notices/notice.jsx b/assets/js/src/notices/notice.tsx similarity index 88% rename from assets/js/src/notices/notice.jsx rename to assets/js/src/notices/notice.tsx index 426d23402f..db1271a046 100644 --- a/assets/js/src/notices/notice.jsx +++ b/assets/js/src/notices/notice.tsx @@ -1,9 +1,24 @@ -import React from 'react'; +import React, { FC } from 'react'; import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; +import PropTypes, { InferProps } from 'prop-types'; import MailPoet from 'mailpoet'; -const Notice = ({ +const propTypes = { + type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired, + scroll: PropTypes.bool, + closable: PropTypes.bool, + renderInPlace: PropTypes.bool, + onDisplay: PropTypes.func, + onClose: PropTypes.func, + timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]), + children: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element, + PropTypes.arrayOf(PropTypes.element), + ]).isRequired, +}; + +const Notice: FC> = ({ onClose, onDisplay, renderInPlace, @@ -24,7 +39,7 @@ const Notice = ({ React.useEffect(() => { if (timeout) { - timeoutRef.current = setTimeout(close, timeout); + timeoutRef.current = setTimeout(close, timeout as number); } return () => (timeoutRef.current ? clearTimeout(timeoutRef.current) : null); }, [close, timeout]); @@ -61,20 +76,7 @@ const Notice = ({ document.getElementById('mailpoet_notices') ); }; -Notice.propTypes = { - type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired, - scroll: PropTypes.bool, - closable: PropTypes.bool, - renderInPlace: PropTypes.bool, - onDisplay: PropTypes.func, - onClose: PropTypes.func, - timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]), - children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.element, - PropTypes.arrayOf(PropTypes.element), - ]).isRequired, -}; +Notice.propTypes = propTypes; Notice.defaultProps = { timeout: 10000, scroll: false, diff --git a/assets/js/src/notices/notices.jsx b/assets/js/src/notices/notices.jsx index 8707394749..19578661cf 100644 --- a/assets/js/src/notices/notices.jsx +++ b/assets/js/src/notices/notices.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { GlobalContext } from 'context/index.jsx'; -import Notice from './notice.jsx'; +import Notice from './notice.tsx'; export default () => { const { notices } = React.useContext(GlobalContext); diff --git a/assets/js/src/notices/subscribers_limit_notice.jsx b/assets/js/src/notices/subscribers_limit_notice.jsx index 50d646cc03..4f4e6fc118 100644 --- a/assets/js/src/notices/subscribers_limit_notice.jsx +++ b/assets/js/src/notices/subscribers_limit_notice.jsx @@ -1,6 +1,6 @@ import React from 'react'; import MailPoet from 'mailpoet'; -import Notice from 'notices/notice.jsx'; +import Notice from 'notices/notice.tsx'; const SubscribersLimitNotice = () => { if (!window.mailpoet_subscribers_limit_reached) return null;