import React from "react";
import ReactDOM from "react-dom";
import PropType from "prop-types";
import PropTypes from "prop-types";
import Countdown, { zeroPad } from "react-countdown";
import { StyledAction, StyledSnackBar, StyledIframe } from "./styled-snackbar";
import StyledCrossIcon from "./styled-snackbar-action";
import StyledLogoIcon from "./styled-snackbar-logo";
import Box from "../box";
import Heading from "../heading";
import Text from "../text";
class SnackBar extends React.Component {
constructor(props) {
super(props);
this.state = { isLoaded: false };
}
static show(barConfig) {
const { parentElementId, ...rest } = barConfig;
let parentElementNode =
parentElementId && document.getElementById(parentElementId);
if (!parentElementNode) {
const snackbarNode = document.createElement("div");
snackbarNode.id = "snackbar";
document.body.appendChild(snackbarNode);
parentElementNode = snackbarNode;
}
window.snackbar = barConfig;
ReactDOM.render(, parentElementNode);
}
static close() {
if (window.snackbar && window.snackbar.parentElementId) {
const snackbar = document.querySelector("#snackbar-container");
snackbar.remove();
//ReactDOM.unmountComponentAtNode(window.snackbar.parentElementId);
}
}
onActionClick = (e) => {
this.props.clickAction && this.props.clickAction(e);
};
componentDidMount() {
const { onLoad } = this.props;
onLoad();
}
bannerRenderer = () => {
const { htmlContent, sectionWidth } = this.props;
return (
{
this.setState({ isLoaded: true });
}}
>
{this.state.isLoaded && (
)}
);
};
// Renderer callback with condition
countDownRenderer = ({ minutes, seconds, completed }) => {
if (completed) return <>>;
const { textColor, fontSize, fontWeight } = this.props;
// Render a countdown
return (
{zeroPad(minutes)}:{zeroPad(seconds)}
);
};
render() {
const {
text,
headerText,
btnText,
textColor,
showIcon,
fontSize,
fontWeight,
textAlign,
htmlContent,
style,
countDownTime,
isCampaigns,
...rest
} = this.props;
const headerStyles = headerText ? {} : { display: "none" };
const bannerElement = this.bannerRenderer();
return (
<>
{isCampaigns ? (
<>{bannerElement}>
) : (
{htmlContent ? (
) : (
<>
{showIcon && (
)}
{headerText}
{text}
{btnText && (
{btnText}
)}
{countDownTime > -1 && (
)}
>
)}
{!btnText && (
)}
)}
>
);
}
}
SnackBar.propTypes = {
text: PropType.string,
headerText: PropType.string,
btnText: PropType.string,
backgroundImg: PropType.string,
backgroundColor: PropType.string,
textColor: PropType.string,
showIcon: PropType.bool,
clickAction: PropType.func,
fontSize: PropType.string,
fontWeight: PropType.string,
textAlign: PropType.string,
htmlContent: PropType.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
countDownTime: PropType.number,
sectionWidth: PropTypes.number,
isCampaigns: PropTypes.bool,
onLoad: PropTypes.func,
isMaintenance: PropTypes.bool,
};
SnackBar.defaultProps = {
backgroundColor: "#F7E6BE",
textColor: "#000",
showIcon: true,
fontSize: "13px",
fontWeight: "400",
textAlign: "left",
htmlContent: "",
countDownTime: -1,
isCampaigns: false,
};
export default SnackBar;