@helpscout/hsds-react/components/Card/Card.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

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

var _Card = _interopRequireDefault(require("./Card.Block"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Card2 = require("./Card.css");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var Card = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Card, _React$PureComponent);

  function Card() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.node = null;
    return _this;
  }

  var _proto = Card.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.node = null;
  };

  _proto.render = function render() {
    var _this$props = this.props,
        autoWordWrap = _this$props.autoWordWrap,
        borderless = _this$props.borderless,
        className = _this$props.className,
        children = _this$props.children,
        floating = _this$props.floating,
        flex = _this$props.flex,
        fullHeight = _this$props.fullHeight,
        hover = _this$props.hover,
        href = _this$props.href,
        innerRef = _this$props.innerRef,
        nodeRef = _this$props.nodeRef,
        onClick = _this$props.onClick,
        seamless = _this$props.seamless,
        selector = _this$props.selector,
        to = _this$props.to,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["autoWordWrap", "borderless", "className", "children", "floating", "flex", "fullHeight", "hover", "href", "innerRef", "nodeRef", "onClick", "seamless", "selector", "to"]);
    var hasOnClick = onClick !== noop;
    var componentClassName = (0, _classnames.default)('c-Card', (hasOnClick || href || to) && 'is-clickable', (hasOnClick || hover || href || to) && 'is-hoverable', borderless && 'is-borderless', floating && 'is-floating', flex && 'is-flex', fullHeight && 'is-fullHeight', href && 'is-link', seamless && 'is-seamless', className);
    var sharedProps = {
      className: componentClassName,
      onClick: onClick
    };
    var extraStaticProps = {
      as: selector,
      href: href,
      ref: nodeRef
    };
    var extraLinksProps = {
      autoWordWrap: autoWordWrap,
      block: true,
      href: href,
      to: to,
      ref: innerRef,
      nodeRef: nodeRef
    };
    var props = href || to ? (0, _extends2.default)({}, sharedProps, extraLinksProps) : (0, _extends2.default)({}, sharedProps, extraStaticProps);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card2.CardUI, (0, _extends2.default)({}, rest, props, {
      children: children
    }));
  };

  return Card;
}(_react.default.PureComponent);

Card.Block = _Card.default;
Card.propTypes = {
  autoWordWrap: _propTypes.default.bool,
  borderless: _propTypes.default.bool,
  className: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  floating: _propTypes.default.bool,
  flex: _propTypes.default.bool,
  fullHeight: _propTypes.default.bool,
  hover: _propTypes.default.bool,
  href: _propTypes.default.string,
  innerRef: _propTypes.default.func,
  nodeRef: _propTypes.default.func,
  onBlur: _propTypes.default.func,
  onClick: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  seamless: _propTypes.default.bool,
  selector: _propTypes.default.string,
  to: _propTypes.default.string
};
Card.defaultProps = {
  borderless: false,
  'data-cy': 'Card',
  flex: false,
  floating: false,
  fullHeight: false,
  hover: false,
  innerRef: noop,
  nodeRef: noop,
  onBlur: noop,
  onClick: noop,
  onFocus: noop,
  seamless: false,
  selector: 'div'
};
Card.propTypes = {
  autoWordWrap: _propTypes.default.bool,

  /** Removes the border from the component. */
  borderless: _propTypes.default.bool,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Adds flexbox styles to the component. */
  flex: _propTypes.default.bool,
  floating: _propTypes.default.bool,

  /** Adds full height styles. Often used with flex containers. */
  fullHeight: _propTypes.default.bool,

  /** Adds a hover style to the component. */
  hover: _propTypes.default.bool,
  innerRef: _propTypes.default.func,

  /** Adds an `href` to the component. Transforms it into an `<a>` tag. */
  href: _propTypes.default.string,

  /** Callback function to retrieve the component's DOM node. */
  nodeRef: _propTypes.default.func,

  /** Callback when the component is blurred. */
  onBlur: _propTypes.default.func,

  /** Callback when the component is clicked. */
  onClick: _propTypes.default.func,

  /** Callback when the component is focused. */
  onFocus: _propTypes.default.func,

  /** Removes the padding within the component. */
  seamless: _propTypes.default.bool,

  /** Determines the HTML tag for the component. */
  selector: _propTypes.default.string,
  to: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = Card;
exports.default = _default;