@spaced-out/ui-design-system/lib/components/Card/Card.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PADDING_SIZES = exports.ClickableCard = exports.CardTitle = exports.CardHeader = exports.CardFooter = exports.CardContent = exports.CardActions = exports.Card = void 0;
var React = _interopRequireWildcard(require("react"));
var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _string = require("../../utils/string");
var _CardModule = _interopRequireDefault(require("./Card.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const PADDING_SIZES = exports.PADDING_SIZES = Object.freeze({
  small: 'small',
  medium: 'medium',
  large: 'large',
  none: 'none'
});
const getPaddingValue = size => {
  const spaceKey = 'space' + (0, _string.capitalize)(size);
  return SPACES[spaceKey] || SPACES['spaceNone'];
};
const CardHeader = _ref => {
  let {
    className,
    children,
    ...props
  } = _ref;
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: (0, _classify.default)(_CardModule.default.cardHeader, className)
  }), children);
};
exports.CardHeader = CardHeader;
const CardTitle = _ref2 => {
  let {
    className,
    children,
    ...props
  } = _ref2;
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: (0, _classify.default)(_CardModule.default.cardTitle, className)
  }), children);
};
exports.CardTitle = CardTitle;
const CardActions = _ref3 => {
  let {
    className,
    children,
    ...props
  } = _ref3;
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: (0, _classify.default)(_CardModule.default.cardActions, className)
  }), children);
};
exports.CardActions = CardActions;
const CardFooter = _ref4 => {
  let {
    className,
    children,
    ...props
  } = _ref4;
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: (0, _classify.default)(_CardModule.default.cardFooter, className)
  }), children);
};
exports.CardFooter = CardFooter;
const CardContent = _ref5 => {
  let {
    className,
    children,
    ...props
  } = _ref5;
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: (0, _classify.default)(_CardModule.default.cardContent, className)
  }), children);
};
exports.CardContent = CardContent;
const Card = exports.Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
  let {
    children,
    classNames,
    paddingTop = 'medium',
    paddingRight = 'medium',
    paddingBottom = 'medium',
    paddingLeft = 'medium',
    ...props
  } = _ref6;
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    style: {
      '--card-padding-top': getPaddingValue(paddingTop),
      '--card-padding-right': getPaddingValue(paddingRight),
      '--card-padding-bottom': getPaddingValue(paddingBottom),
      '--card-padding-left': getPaddingValue(paddingLeft)
    },
    "data-testid": "Card",
    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
    ref: ref
  }), children);
});
const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
  let {
    classNames,
    onClick,
    disabled = false,
    ...props
  } = _ref7;
  const componentRef = React.useRef(null);
  React.useImperativeHandle(ref, () => componentRef.current);
  React.useEffect(() => {
    if (disabled) {
      componentRef.current?.blur();
    }
  }, [disabled]);
  const onClickHandler = e => {
    if (!disabled) {
      onClick && onClick(e);
    }
  };
  const onKeyDownHandler = e => {
    if (e.key === 'Enter') {
      onClickHandler(e);
    }
  };
  return /*#__PURE__*/React.createElement(Card, _extends({}, props, {
    classNames: {
      wrapper: (0, _classify.default)(_CardModule.default.clickableCard, {
        [_CardModule.default.disabled]: disabled
      }, classNames?.wrapper)
    },
    tabIndex: disabled ? -1 : 0,
    onClick: onClickHandler,
    onKeyDown: onKeyDownHandler,
    ref: ref
  }));
});