@krowdy-ui/views/ModalInfo/ModalInfo.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _core = require("@krowdy-ui/core");

var _icons = require("@material-ui/icons");

var _excluded = ["text", "variant", "action"];

var _ref2 = /*#__PURE__*/_react["default"].createElement(_icons.Close, {
  fontSize: "small"
});

var ModalInfo = function ModalInfo(_ref) {
  var actions = _ref.actions,
      content = _ref.content,
      open = _ref.open,
      onClose = _ref.onClose,
      title = _ref.title,
      color = _ref.color;
  var classes = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
    onClose: onClose,
    open: open
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.dialogTitle
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.title
  }, /*#__PURE__*/_react["default"].createElement(_icons.Info, {
    className: classes.infoIcon,
    color: color || 'primary',
    fontSize: "small"
  }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    variant: "h6"
  }, title)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    onClick: onClose,
    size: "small"
  }, _ref2)), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.content
  }, content), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.actionsContainer
  }, actions && actions.length ? actions.map(function (_ref3) {
    var text = _ref3.text,
        variant = _ref3.variant,
        action = _ref3.action,
        others = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
    return /*#__PURE__*/_react["default"].createElement(_core.Button, (0, _extends2["default"])({
      className: classes.buttonAction,
      color: color,
      fullWidth: true,
      key: text,
      onClick: action,
      variant: variant
    }, others), text);
  }) : null));
};

var useStyles = (0, _core.makeStyles)(function (_ref4) {
  var spacing = _ref4.spacing;
  return {
    actionsContainer: {
      display: 'flex',
      flexDirection: 'column',
      padding: spacing(2.5)
    },
    buttonAction: {
      margin: spacing(.5, 0)
    },
    content: {
      padding: spacing(0, 2.5),
      width: 320
    },
    dialogTitle: {
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'space-between',
      padding: spacing(2.5)
    },
    infoIcon: {
      marginRight: spacing(1)
    },
    title: {
      alignItems: 'center',
      display: 'flex'
    }
  };
}, {
  name: 'ModalInfo'
});
process.env.NODE_ENV !== "production" ? ModalInfo.propTypes = {
  actions: _propTypes["default"].array,
  color: _propTypes["default"].string,
  content: _propTypes["default"].any,
  onClose: _propTypes["default"].func,
  open: _propTypes["default"].bool,
  title: _propTypes["default"].string
} : void 0;
var _default = ModalInfo;
exports["default"] = _default;