react-popup-alert/dist/index.js

Alert popup for ReactJS

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

var headerDefault = 'Warning';
var btnTextDefault = 'Close';
var errorColor = 'rgb(220, 53, 69)';
var warningColor = 'rgb(255, 193, 7)';
var successColor = 'rgb(40, 167, 69)';
var defaultColor = 'rgb(51, 51, 51)';

var AlertReact = function AlertReact(_ref) {
  var _ref$header = _ref.header,
      header = _ref$header === void 0 ? headerDefault : _ref$header,
      _ref$btnText = _ref.btnText,
      btnText = _ref$btnText === void 0 ? btnTextDefault : _ref$btnText,
      text = _ref.text,
      show = _ref.show,
      showBorderBottom = _ref.showBorderBottom,
      type = _ref.type,
      color = _ref.color,
      onClosePress = _ref.onClosePress,
      _ref$pressCloseOnOuts = _ref.pressCloseOnOutsideClick,
      pressCloseOnOutsideClick = _ref$pressCloseOnOuts === void 0 ? true : _ref$pressCloseOnOuts,
      _ref$alertStyles = _ref.alertStyles,
      alertStyles = _ref$alertStyles === void 0 ? {} : _ref$alertStyles,
      _ref$headerStyles = _ref.headerStyles,
      headerStyles = _ref$headerStyles === void 0 ? {} : _ref$headerStyles,
      _ref$textStyles = _ref.textStyles,
      textStyles = _ref$textStyles === void 0 ? {} : _ref$textStyles,
      _ref$buttonStyles = _ref.buttonStyles,
      buttonStyles = _ref$buttonStyles === void 0 ? {} : _ref$buttonStyles;
  React.useEffect(function () {
    if (pressCloseOnOutsideClick && show) {
      document.addEventListener('mousedown', handleClickOutsideAlert);
    }

    return function () {
      document.removeEventListener('mousedown', handleClickOutsideAlert);
    };
  }, [show]);

  var handleClickOutsideAlert = function handleClickOutsideAlert(e) {
    if (show) {
      var target = e === null || e === void 0 ? void 0 : e.target;

      if ((target === null || target === void 0 ? void 0 : target.className) === 'backdrop') {
        onClosePressClick();
      }
    }
  };

  var onClosePressClick = function onClosePressClick() {
    document.removeEventListener('mousedown', handleClickOutsideAlert);
    onClosePress();
  };

  var getColor = function getColor() {
    if (color) {
      return color;
    } else if (type === 'error') return errorColor;else if (type === 'success') return successColor;else if (type === 'warning') return warningColor;else return defaultColor;
  };

  var colorToUse = getColor();

  var getAlertStyle = function getAlertStyle() {
    if (showBorderBottom === false) {
      return alertStyles;
    } else {
      return _extends({
        borderBottom: "3px solid " + colorToUse
      }, alertStyles);
    }
  };

  return React__default.createElement("div", {
    className: 'alert-container'
  }, show ? React__default.createElement("div", {
    role: 'alert'
  }, React__default.createElement("div", {
    className: 'backdrop'
  }), React__default.createElement("div", {
    className: 'alert-main',
    style: getAlertStyle()
  }, React__default.createElement("h3", {
    className: 'alert-header',
    style: headerStyles
  }, header), React__default.createElement("p", {
    className: 'alert-body',
    style: textStyles
  }, text), React__default.createElement("a", {
    onClick: function onClick() {
      return onClosePressClick();
    },
    className: 'alert-button',
    role: 'button',
    style: _extends({
      backgroundColor: colorToUse
    }, buttonStyles),
    href: '#'
  }, btnText))) : null);
};

module.exports = AlertReact;
//# sourceMappingURL=index.js.map