71 lines
1.5 KiB
JavaScript
71 lines
1.5 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);
|