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

React components that implement Google's Material Design.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/styles';
import { Modal, Backdrop, Card, CardContent, Typography, CardHeader, IconButton, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails } from '@krowdy-ui/core';
import { AvatarUser } from '@krowdy-ui/views';
import { ExpandMore as ExpandMoreIcon, Close as CloseIcon } from '@material-ui/icons';
export 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'
    }
  };
};

var _ref = /*#__PURE__*/React.createElement(CloseIcon, 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.useState(false),
      _React$useState2 = _slicedToArray(_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.createElement(Modal, {
    BackdropComponent: Backdrop,
    BackdropProps: {
      timeout: 500
    },
    className: classes.modal,
    closeAfterTransition: true,
    disableAutoFocus: true,
    onClose: _handleOnClose,
    open: open
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, {
    className: classes.card,
    style: {
      minWidth: minWidth
    }
  }, /*#__PURE__*/React.createElement(CardHeader, {
    action: /*#__PURE__*/React.createElement(IconButton, {
      "aria-label": "settings",
      onClick: _handleOnClose
    }, _ref),
    title: "Editar Krowder"
  }), /*#__PURE__*/React.createElement(CardContent, {
    classes: {
      root: classes.cardContentRoot
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerProfileContent
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerProfile
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerAvatar
  }, /*#__PURE__*/React.createElement(AvatarUser, {
    user: user
  })), headerContent), /*#__PURE__*/React.createElement("div", {
    className: classes.headerProfileActions
  }, action)), /*#__PURE__*/React.createElement("div", {
    className: classes.collapsesContent
  }, collapses.length ? collapses.map(function (item, n) {
    return /*#__PURE__*/React.createElement(ExpansionPanel, {
      classes: {
        expanded: classes.expandedItem
      },
      className: classes.expandItem,
      expanded: expanded === item.key,
      key: n,
      onChange: _handleChangeCollapse(item.key)
    }, /*#__PURE__*/React.createElement(ExpansionPanelSummary, {
      className: classes.expandHeader,
      expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, {
        className: classes.expandIcon
      })
    }, /*#__PURE__*/React.createElement(Typography, {
      className: classes.expandHeaderTitle
    }, item.title)), /*#__PURE__*/React.createElement(ExpansionPanelDetails, null, item.component ? item.component : null));
  }) : null)))));
}

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