@krowdy-ui/views/CardExpand/CardExpand.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 _react = _interopRequireDefault(require("react"));

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

var _clsx = _interopRequireDefault(require("clsx"));

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

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

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
    }
  };
};

exports.styles = styles;

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["default"].createElement("div", {
    className: classes.container
  }, /*#__PURE__*/_react["default"].createElement(_core.ExpansionPanel, {
    classes: {
      expanded: classes.expanded,
      root: (0, _clsx["default"])(classes[color], classes.styleLess)
    },
    defaultExpanded: defaultExpanded,
    onChange: onChange
  }, /*#__PURE__*/_react["default"].createElement(_core.ExpansionPanelSummary, {
    classes: {
      content: classes.styleLess,
      expandIcon: classes.expandIcon,
      expanded: classes.expanded,
      root: classes.styleLess
    },
    expandIcon: expandIcon ? expandIcon : null
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: (0, _clsx["default"])(classes.heading, classes.size),
    component: "div"
  }, title)), /*#__PURE__*/_react["default"].createElement(_core.ExpansionPanelDetails, {
    classes: {
      root: classes.styleLess
    },
    className: classes.expandDetails
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: (0, _clsx["default"])(classes.content, classes.size),
    component: "div"
  }, content))));
};

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

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

exports["default"] = _default;