@krowdy-ui/views/ModalKrowder/ModalKrowder.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"] = exports.styles = void 0;

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

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

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

var _styles = require("@krowdy-ui/styles");

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

var _views = require("@krowdy-ui/views");

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

var styles = function styles(theme) {
  return {
    card: {
      display: 'flex',
      flexDirection: 'column',
      height: '90%',
      paddingBottom: 30
    },
    cardContentRoot: {
      flex: 1,
      height: '100%',
      overflow: 'auto'
    },
    collapsesContent: {
      height: 'calc(100% - 160px)'
    },
    expandContent: {
      height: '40vh',
      overflow: 'auto'
    },
    expandHeader: {
      background: theme.palette.grey[50],
      border: "1px solid ".concat(theme.palette.grey[100]),
      height: 40,
      minHeight: 40
    },
    expandHeaderTitle: {
      color: theme.palette.grey[900],
      fontSize: '0.875rem',
      fontWeight: 'bold'
    },
    expandIcon: {
      color: theme.palette.primary.main
    },
    expandItem: {
      '&$expandedItem': {
        margin: 0
      },
      '&:before': {
        content: 'none'
      },
      boxShadow: 'none'
    },
    expandedItem: {},
    headerAvatar: {
      marginRight: theme.spacing(2)
    },
    headerProfile: {
      display: 'flex'
    },
    headerProfileContent: {
      display: 'flex',
      justifyContent: 'space-between',
      padding: theme.spacing(2, 0)
    },
    modal: {
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'center'
    }
  };
};

exports.styles = styles;

var _ref = /*#__PURE__*/_react["default"].createElement(_icons.Close, null);

function ModalKrowder(props) {
  var open = props.open,
      onclose = props.onclose,
      _props$user = props.user,
      user = _props$user === void 0 ? {} : _props$user,
      action = props.action,
      onChangeCollapse = props.onChangeCollapse,
      headerContent = props.headerContent,
      _props$collapses = props.collapses,
      collapses = _props$collapses === void 0 ? [] : _props$collapses,
      classes = props.classes,
      _props$minWidth = props.minWidth,
      minWidth = _props$minWidth === void 0 ? 320 : _props$minWidth;

  var _React$useState = _react["default"].useState(false),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      expanded = _React$useState2[0],
      setExpanded = _React$useState2[1];

  var _handleChangeCollapse = function _handleChangeCollapse(panel) {
    return function (event, isExpanded) {
      onChangeCollapse({
        event: event,
        isExpanded: isExpanded,
        panel: panel
      });
      setExpanded(isExpanded ? panel : false);
    };
  };

  var _handleOnClose = function _handleOnClose() {
    onclose();
    setExpanded(false);
  };

  return /*#__PURE__*/_react["default"].createElement(_core.Modal, {
    BackdropComponent: _core.Backdrop,
    BackdropProps: {
      timeout: 500
    },
    className: classes.modal,
    closeAfterTransition: true,
    disableAutoFocus: true,
    onClose: _handleOnClose,
    open: open
  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Card, {
    className: classes.card,
    style: {
      minWidth: minWidth
    }
  }, /*#__PURE__*/_react["default"].createElement(_core.CardHeader, {
    action: /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
      "aria-label": "settings",
      onClick: _handleOnClose
    }, _ref),
    title: "Editar Krowder"
  }), /*#__PURE__*/_react["default"].createElement(_core.CardContent, {
    classes: {
      root: classes.cardContentRoot
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.headerProfileContent
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.headerProfile
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.headerAvatar
  }, /*#__PURE__*/_react["default"].createElement(_views.AvatarUser, {
    user: user
  })), headerContent), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.headerProfileActions
  }, action)), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.collapsesContent
  }, collapses.length ? collapses.map(function (item, n) {
    return /*#__PURE__*/_react["default"].createElement(_core.ExpansionPanel, {
      classes: {
        expanded: classes.expandedItem
      },
      className: classes.expandItem,
      expanded: expanded === item.key,
      key: n,
      onChange: _handleChangeCollapse(item.key)
    }, /*#__PURE__*/_react["default"].createElement(_core.ExpansionPanelSummary, {
      className: classes.expandHeader,
      expandIcon: /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, {
        className: classes.expandIcon
      })
    }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      className: classes.expandHeaderTitle
    }, item.title)), /*#__PURE__*/_react["default"].createElement(_core.ExpansionPanelDetails, null, item.component ? item.component : null));
  }) : null)))));
}

process.env.NODE_ENV !== "production" ? ModalKrowder.propTypes = {
  action: _propTypes["default"].element,
  classes: _propTypes["default"].object,
  collapses: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    component: _propTypes["default"].element.isRequired,
    title: _propTypes["default"].string.isRequired
  })),
  headerContent: _propTypes["default"].element,
  minWidth: _propTypes["default"].string,
  onChangeCollapse: _propTypes["default"].func,
  onclose: _propTypes["default"].func.isRequired,
  open: _propTypes["default"].bool.isRequired,
  user: _propTypes["default"].shape({
    firstName: _propTypes["default"].string,
    lastName: _propTypes["default"].string,
    photo: _propTypes["default"].string
  })
} : void 0;
ModalKrowder.muiName = 'ModalKrowder';

var _default = (0, _styles.withStyles)(styles, {
  name: 'ModalKrowder'
})(ModalKrowder);

exports["default"] = _default;