59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { useDispatch } from "react-redux";
|
|
|
|
import { Toast } from "react-bootstrap";
|
|
|
|
import { removeNotification } from "../../actions/notifications";
|
|
|
|
export const Notification = ({
|
|
id,
|
|
icon,
|
|
title,
|
|
message,
|
|
imageUrl,
|
|
autohide,
|
|
delay,
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
const [show, setShow] = useState(true);
|
|
|
|
const hide = () => {
|
|
setShow(false);
|
|
setTimeout(() => dispatch(removeNotification(id)), 200);
|
|
};
|
|
|
|
return (
|
|
<Toast show={show} onClose={hide} autohide={autohide} delay={delay}>
|
|
<Toast.Header>
|
|
{icon !== "" && <i className={`fa fa-${icon} mr-2`} />}
|
|
<strong className="mr-auto">{title}</strong>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{message !== "" && <span>{message}</span>}
|
|
{imageUrl !== "" && (
|
|
<img src={imageUrl} className="img-fluid mt-2 mr-auto" />
|
|
)}
|
|
</Toast.Body>
|
|
</Toast>
|
|
);
|
|
};
|
|
Notification.propTypes = {
|
|
id: PropTypes.string,
|
|
icon: PropTypes.string,
|
|
title: PropTypes.string,
|
|
message: PropTypes.string,
|
|
imageUrl: PropTypes.string,
|
|
autohide: PropTypes.bool,
|
|
delay: PropTypes.number,
|
|
};
|
|
|
|
Notification.defaultProps = {
|
|
autohide: false,
|
|
delay: 5000,
|
|
icon: "",
|
|
imageUrl: "",
|
|
title: "Info",
|
|
message: "",
|
|
};
|