82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
import React, { useCallback, useEffect, useState } from "react";
|
|
import { cssTransition } from "react-toastify";
|
|
|
|
import PropTypes from "prop-types";
|
|
import StyledToastContainer from "./styled-toast";
|
|
import { isMobileOnly } from "react-device-detect";
|
|
|
|
const Slide = cssTransition({
|
|
enter: "SlideIn",
|
|
exit: "SlideOut",
|
|
});
|
|
|
|
const Toast = (props) => {
|
|
const [offset, setOffset] = useState(0);
|
|
|
|
const onToastClick = () => {
|
|
let documentElement = document.getElementsByClassName("Toastify__toast");
|
|
if (documentElement.length > 1)
|
|
for (var i = 0; i < documentElement.length; i++) {
|
|
documentElement &&
|
|
documentElement[i].style.setProperty("position", "static");
|
|
}
|
|
};
|
|
|
|
const onResize = useCallback((event) => {
|
|
const topOffset = event.target.innerHeight - window.visualViewport.height;
|
|
|
|
setOffset(topOffset);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isMobileOnly) {
|
|
window.addEventListener("resize", onResize);
|
|
}
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", onResize);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<StyledToastContainer
|
|
theme={props.theme}
|
|
className={props.className}
|
|
draggable={true}
|
|
position="top-right"
|
|
hideProgressBar={true}
|
|
id={props.id}
|
|
newestOnTop={true}
|
|
pauseOnFocusLoss={false}
|
|
style={props.style}
|
|
transition={Slide}
|
|
onClick={onToastClick}
|
|
$topOffset={offset}
|
|
/>
|
|
);
|
|
};
|
|
|
|
Toast.propTypes = {
|
|
autoClosed: PropTypes.bool,
|
|
/** Accepts class */
|
|
className: PropTypes.string,
|
|
/** Accepts id */
|
|
id: PropTypes.string,
|
|
/** Accepts css style */
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
text: PropTypes.string,
|
|
/** Title inside a toast */
|
|
title: PropTypes.string,
|
|
/** Define color and icon of toast */
|
|
type: PropTypes.oneOf(["success", "error", "warning", "info"]).isRequired,
|
|
};
|
|
|
|
Toast.defaultProps = {
|
|
autoClosed: true,
|
|
text: "Demo text for example",
|
|
title: "Demo title",
|
|
type: "success",
|
|
};
|
|
|
|
export default Toast;
|