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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
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 _ref = /*#__PURE__*/React.createElement(CloseIcon, {
  fontSize: "small"
});

const ModalInfo = ({
  actions,
  content,
  open,
  onClose,
  title,
  color
}) => {
  const 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"
  }, _ref)), /*#__PURE__*/React.createElement("div", {
    className: classes.content
  }, content), /*#__PURE__*/React.createElement("div", {
    className: classes.actionsContainer
  }, actions && actions.length ? actions.map(_ref2 => {
    let {
      text,
      variant,
      action
    } = _ref2,
        others = _objectWithoutPropertiesLoose(_ref2, ["text", "variant", "action"]);

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

const useStyles = makeStyles(({
  spacing
}) => ({
  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;