@shakthillc/components/src/AlertBox/AlertBox.js

React generic components for shakthi products

import React, { Component } from "react";
import style from "./AlertBox.module.css";
import Icon from "@material-ui/core/Icon";
import { PropTypes } from "prop-types";

class AlertBox extends Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
    this.toggleAlert = this.toggleAlert.bind(this);
  }

  componentDidUpdate(prevProps, PrevState) {
    const { show, onClose } = this.props;
    if (prevProps.show != show) {
      if (!this.props.show) {
        onClose && onClose();
      } else {
        this.setState({ show: true }, () => {
          this.alertTimer = setTimeout(() => {
            if (this.state.show && show) {
              onClose && onClose();
              this.setState({ show: false });
            }
          }, 5000);
        });
      }
    }
  }
  toggleAlert() {
    const { onClose } = this.props;
    onClose && onClose();
    this.setState({ show: false }, () => {
      clearTimeout(this.alertTimer);
    });
  }
  render() {
    var {
      mainText,
      subText,
      type = 2,
      icon = "check_circle",
      type = "default",
    } = this.props;
    var theme = {
      danger: "#cc3b3b",
      warning: "#eeb200",
      success: "#007c89",
      default: "black",
    };
    var themeIcon = {
      danger: "highlight_off",
      warning: "error_outline",
      success: "check_circle",
      default: icon,
    };
    var { show } = this.state;

    return (
      <div
        className={
          show === true
            ? `${style["alert-box"]} ${style["alert-box--show"]}`
            : style["alert-box"]
        }
      >
        <span className={style["alert-box__status-icon"]}>
          <Icon style={{ color: theme[type] }}>{themeIcon[type]}</Icon>
        </span>
        <p className={style["alert-box__main-info"]}>{mainText}</p>
        <span
          onClick={this.toggleAlert.bind(this)}
          className={style["alert-box__close-icon"]}
        >
          <Icon>close</Icon>
        </span>
        <p className={style["alert-box__sub-info"]}>{subText}</p>
        {show === true && (
          <div
            style={{ width: "100%", backgroundColor: theme[type] }}
            className={style["alter-box__loader"]}
          ></div>
        )}
      </div>
    );
  }
}

export default AlertBox;

AlertBox.defaultProps = {
  show: true,
};
AlertBox.propTypes = {
  mainText: PropTypes.string,
  subText: PropTypes.string,
  show: PropTypes.bool,
};