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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["text", "variant", "action"];
import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, makeStyles, Button, IconButton, Typography } from '@krowdy-ui/core';
import { Info as InfoIcon, Close as CloseIcon } from '@material-ui/icons';

var _ref2 = /*#__PURE__*/React.createElement(CloseIcon, {
  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.createElement(Dialog, {
    onClose: onClose,
    open: open
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.dialogTitle
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.title
  }, /*#__PURE__*/React.createElement(InfoIcon, {
    className: classes.infoIcon,
    color: color || 'primary',
    fontSize: "small"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "h6"
  }, title)), /*#__PURE__*/React.createElement(IconButton, {
    onClick: onClose,
    size: "small"
  }, _ref2)), /*#__PURE__*/React.createElement("div", {
    className: classes.content
  }, content), /*#__PURE__*/React.createElement("div", {
    className: classes.actionsContainer
  }, actions && actions.length ? actions.map(function (_ref3) {
    var text = _ref3.text,
        variant = _ref3.variant,
        action = _ref3.action,
        others = _objectWithoutProperties(_ref3, _excluded);

    return /*#__PURE__*/React.createElement(Button, _extends({
      className: classes.buttonAction,
      color: color,
      fullWidth: true,
      key: text,
      onClick: action,
      variant: variant
    }, others), text);
  }) : null));
};

var useStyles = 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.array,
  color: PropTypes.string,
  content: PropTypes.any,
  onClose: PropTypes.func,
  open: PropTypes.bool,
  title: PropTypes.string
} : void 0;
export default ModalInfo;