@shakthillc/components/es/AlertBox/AlertBox.js

React generic components for shakthi products

import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React, { Component } from "react";
import style from "./AlertBox.module.css";
import Icon from "@material-ui/core/Icon";
import { PropTypes } from "prop-types";

var AlertBox = function (_Component) {
  _inherits(AlertBox, _Component);

  function AlertBox(props) {
    _classCallCheck(this, AlertBox);

    var _this = _possibleConstructorReturn(this, (AlertBox.__proto__ || _Object$getPrototypeOf(AlertBox)).call(this, props));

    _this.state = { show: false };
    _this.toggleAlert = _this.toggleAlert.bind(_this);
    return _this;
  }

  _createClass(AlertBox, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, PrevState) {
      var _this2 = this;

      var _props = this.props,
          show = _props.show,
          onClose = _props.onClose;

      if (prevProps.show != show) {
        if (!this.props.show) {
          onClose && onClose();
        } else {
          this.setState({ show: true }, function () {
            _this2.alertTimer = setTimeout(function () {
              if (_this2.state.show && show) {
                onClose && onClose();
                _this2.setState({ show: false });
              }
            }, 5000);
          });
        }
      }
    }
  }, {
    key: "toggleAlert",
    value: function toggleAlert() {
      var _this3 = this;

      var onClose = this.props.onClose;

      onClose && onClose();
      this.setState({ show: false }, function () {
        clearTimeout(_this3.alertTimer);
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _props2 = this.props,
          mainText = _props2.mainText,
          subText = _props2.subText,
          _props2$type = _props2.type,
          type = _props2$type === undefined ? 2 : _props2$type,
          _props2$icon = _props2.icon,
          icon = _props2$icon === undefined ? "check_circle" : _props2$icon,
          _props2$type2 = _props2.type,
          type = _props2$type2 === undefined ? "default" : _props2$type2;

      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.show;


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

  return AlertBox;
}(Component);

export default AlertBox;

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