64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { connect } from "react-redux";
|
|
|
|
import { Toast } from "react-bootstrap";
|
|
|
|
import { removeNotification } from "../../actions/notifications";
|
|
|
|
const NotificationConnected = ({
|
|
id,
|
|
icon,
|
|
title,
|
|
message,
|
|
imageUrl,
|
|
autohide,
|
|
delay,
|
|
removeNotification
|
|
}) => {
|
|
const [show, setShow] = useState(true);
|
|
|
|
const hide = () => {
|
|
setShow(false);
|
|
setTimeout(() => 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>
|
|
);
|
|
};
|
|
NotificationConnected.propTypes = {
|
|
id: PropTypes.string,
|
|
icon: PropTypes.string,
|
|
title: PropTypes.string,
|
|
message: PropTypes.string,
|
|
imageUrl: PropTypes.string,
|
|
autohide: PropTypes.bool,
|
|
delay: PropTypes.number,
|
|
removeNotification: PropTypes.func
|
|
};
|
|
|
|
NotificationConnected.defaultProps = {
|
|
autohide: false,
|
|
delay: 5000,
|
|
icon: "",
|
|
imageUrl: "",
|
|
title: "Info",
|
|
message: ""
|
|
};
|
|
|
|
export const Notification = connect(null, { removeNotification })(
|
|
NotificationConnected
|
|
);
|