@krowdy-ui/core/Card/Card.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

var _Card = _interopRequireDefault(require("@material-ui/core/Card"));

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

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

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

var _excluded = ["className", "classes", "hoverable", "selected"];

var styles = function styles(theme) {
  return {
    hoverable: {
      '&:hover': {
        border: "1px solid ".concat(theme.palette.primary.main),
        boxShadow: '0px 4px 5px rgba(0, 39, 102, 0.08), 0px 3px 14px rgba(0, 39, 102, 0.04), 0px 8px 10px rgba(0, 39, 102, 0.05)',
        cursor: 'pointer',
        margin: function margin(props) {
          return props.variant !== 'outlined' ? -1 : '';
        }
      }
    },
    selected: {
      border: "1px solid ".concat(theme.palette.primary.main),
      boxShadow: '0px 4px 5px rgba(0, 39, 102, 0.08), 0px 3px 14px rgba(0, 39, 102, 0.04), 0px 8px 10px rgba(0, 39, 102, 0.05)',
      cursor: 'pointer',
      margin: function margin(props) {
        return props.variant !== 'outlined' ? -1 : '';
      }
    }
  };
};

exports.styles = styles;

var Card = _react["default"].forwardRef(function Card(props, ref) {
  var classNameProps = props.className,
      classes = props.classes,
      _props$hoverable = props.hoverable,
      hoverable = _props$hoverable === void 0 ? false : _props$hoverable,
      _props$selected = props.selected,
      selected = _props$selected === void 0 ? false : _props$selected,
      otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_Card["default"], (0, _extends2["default"])({
    className: (0, _clsx["default"])(classNameProps, hoverable && classes.hoverable, selected && classes.selected),
    ref: ref
  }, otherProps));
});

process.env.NODE_ENV !== "production" ? Card.propTypes = {
  /**
   * The content of the Card.
   */
  children: _propTypes["default"].node.isRequired,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  className: _propTypes["default"].string,

  /**
   * @ignore
   */
  classes: _propTypes["default"].object,

  /**
   * If `true`, the Card will be hover.
   */
  hoverable: _propTypes["default"].bool,

  /**
   * if `true`, the Card will be selected.
   */
  selected: _propTypes["default"].bool
} : void 0;

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

exports["default"] = _default;