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

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@krowdy-ui/styles';
import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography } from '@material-ui/core';
export var styles = function styles(theme) {
  return {
    content: {
      padding: theme.spacing(0, 1.5, 1.5, 1.5)
    },
    defaultColor: {
      backgroundColor: theme.palette.grey[0]
    },
    expandIcon: {
      position: 'absolute',
      right: 12
    },
    expanded: {
      minHeight: 0
    },
    gray: {
      backgroundColor: theme.palette.grey[400]
    },
    heading: {
      fontWeight: 'bold',
      padding: theme.spacing(0, 1.5),
      verticalAlign: 'middle'
    },
    iconDragContainer: {
      color: theme.palette.grey[500]
    },
    size: {
      fontSize: 14
    },
    styleLess: {
      margin: 0,
      padding: 0
    }
  };
};

var CardExpand = function CardExpand(props) {
  var classes = props.classes,
      _props$content = props.content,
      content = _props$content === void 0 ? '' : _props$content,
      _props$color = props.color,
      color = _props$color === void 0 ? 'defaultColor' : _props$color,
      defaultExpanded = props.defaultExpanded,
      expandIcon = props.expandIcon,
      _props$onChange = props.onChange,
      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
      title = props.title;
  return /*#__PURE__*/React.createElement("div", {
    className: classes.container
  }, /*#__PURE__*/React.createElement(ExpansionPanel, {
    classes: {
      expanded: classes.expanded,
      root: clsx(classes[color], classes.styleLess)
    },
    defaultExpanded: defaultExpanded,
    onChange: onChange
  }, /*#__PURE__*/React.createElement(ExpansionPanelSummary, {
    classes: {
      content: classes.styleLess,
      expandIcon: classes.expandIcon,
      expanded: classes.expanded,
      root: classes.styleLess
    },
    expandIcon: expandIcon ? expandIcon : null
  }, /*#__PURE__*/React.createElement(Typography, {
    className: clsx(classes.heading, classes.size),
    component: "div"
  }, title)), /*#__PURE__*/React.createElement(ExpansionPanelDetails, {
    classes: {
      root: classes.styleLess
    },
    className: classes.expandDetails
  }, /*#__PURE__*/React.createElement(Typography, {
    className: clsx(classes.content, classes.size),
    component: "div"
  }, content))));
};

process.env.NODE_ENV !== "production" ? CardExpand.propTypes = {
  classes: PropTypes.shape({
    container: PropTypes.string,
    content: PropTypes.string,
    expandDetails: PropTypes.string,
    heading: PropTypes.string,
    size: PropTypes.string
  }),
  color: PropTypes.oneOf(['defaultColor', 'gray']),
  content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  defaultExpanded: PropTypes.bool,
  expandIcon: PropTypes.node,
  onChange: PropTypes.func,
  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired
} : void 0;
CardExpand.muiName = 'CardExpand';
export default withStyles(styles, {
  name: 'KrowdyCardExpand'
})(CardExpand);