@sberdevices/plasma-temple/dist/components/GalleryCard/GalleryCard.js

SberDevices CanvasApp Templates.

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GalleryCard = void 0;

var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));

var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));

var _plasmaUi = /*#__PURE__*/require("@sberdevices/plasma-ui");

var _plasmaIcons = /*#__PURE__*/require("@sberdevices/plasma-icons");

var _plasmaTokens = /*#__PURE__*/require("@sberdevices/plasma-tokens");

var _utils = /*#__PURE__*/require("@sberdevices/plasma-ui/utils");

var _getMediaObjectSrc = /*#__PURE__*/require("../../utils/getMediaObjectSrc");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var StyledCardIndex = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CardBadge).withConfig({
  componentId: "plasma-temple__sc-pmq8tc-0"
})(["position:absolute;top:16px;left:16px;"]);
var StyledTag = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CardBadge).withConfig({
  componentId: "plasma-temple__sc-pmq8tc-1"
})(["position:absolute;bottom:16px;left:16px;padding:6px 14px;padding:4px 12px;font-weight:500;font-size:20px;text-transform:none;line-height:20px;border-radius:12px;background-color:", ";backdrop-filter:blur(10px);"], _plasmaTokens.overlay);
var StyledCardContent = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CardContent).withConfig({
  componentId: "plasma-temple__sc-pmq8tc-2"
})(["display:flex;flex:1;flex-direction:column;min-height:200px;"]);

var StyledAdditionalContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-pmq8tc-3"
})(["display:flex;align-items:center;margin-top:auto;opacity:0.47;color:", ";"], _plasmaTokens.primary);

var StyledCaption = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.Caption).withConfig({
  componentId: "plasma-temple__sc-pmq8tc-4"
})(["margin-bottom:0;margin-left:4px;"]);

var Time = function Time(_ref) {
  var time = _ref.time;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_plasmaIcons.IconClock, {
    size: "xs"
  }), /*#__PURE__*/_react["default"].createElement(StyledCaption, null, time));
};

var StyledCard = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.Card).withConfig({
  componentId: "plasma-temple__sc-pmq8tc-5"
})(["width:392px;", ""], /*#__PURE__*/(0, _utils.mediaQuery)('M', 2)( /*#__PURE__*/(0, _styledComponents.css)(["width:332px;"])));

var GalleryCardComponent = function GalleryCardComponent(_ref2) {
  var _card$image$ratio;

  var card = _ref2.card,
      focused = _ref2.focused,
      index = _ref2.index;
  return /*#__PURE__*/_react["default"].createElement(StyledCard, {
    focused: focused,
    "data-cy": "gallery-card-".concat(index)
  }, /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardBody, null, /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardMedia, {
    base: "div",
    src: (0, _getMediaObjectSrc.getMediaObjectSrc)(card.image),
    ratio: (_card$image$ratio = card.image.ratio) !== null && _card$image$ratio !== void 0 ? _card$image$ratio : '1 / 1',
    "data-cy": "gallery-card-media"
  }, card.position && /*#__PURE__*/_react["default"].createElement(StyledCardIndex, {
    view: "secondary",
    size: "l",
    circled: true,
    text: String(card.position)
  }), typeof card.tag === 'string' && /*#__PURE__*/_react["default"].createElement(StyledTag, {
    view: "secondary",
    size: "s",
    text: card.tag
  })), /*#__PURE__*/_react["default"].createElement(StyledCardContent, null, /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardBody1, {
    lines: 2
  }, card.label), /*#__PURE__*/_react["default"].createElement(StyledAdditionalContent, null, card.time != null && /*#__PURE__*/_react["default"].createElement(Time, {
    time: card.time
  })))));
};

var GalleryCard = /*#__PURE__*/_react["default"].memo(GalleryCardComponent);

exports.GalleryCard = GalleryCard;
//# sourceMappingURL=GalleryCard.js.map