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

SberDevices CanvasApp Templates.

"use strict";

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

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

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

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

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

var _GalleryCardContainer = /*#__PURE__*/require("../GalleryCard/GalleryCardContainer");

var _useDelayedActivation = /*#__PURE__*/require("../../hooks/useDelayedActivation");

var _deviceFamily = /*#__PURE__*/require("../../utils/deviceFamily");

var _withNavigation = /*#__PURE__*/require("./hocs/withNavigation");

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

var StyledCarouselWrapper = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CarouselGridWrapper).withConfig({
  componentId: "plasma-temple__sc-wugwc2-0"
})(["margin-top:-8px;"]);
var StyledCarousel = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.Carousel).withConfig({
  componentId: "plasma-temple__sc-wugwc2-1"
})(["box-sizing:border-box;padding-top:8px;padding-bottom:8px;outline:none;scroll-snap-type:none;scroll-behavior:", ";display:flex;flex-wrap:no-wrap;"], function (_ref) {
  var initialized = _ref.initialized;
  return initialized && (0, _deviceFamily.isSberBoxLike)() ? 'smooth' : 'unset';
});
var StyledCarouselItem = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CarouselItem).withConfig({
  componentId: "plasma-temple__sc-wugwc2-2"
})(["padding-right:32px;&:last-child{padding-right:0;}"]);

function Gallery(_ref2) {
  var _ref2$items = _ref2.items,
      items = _ref2$items === void 0 ? [] : _ref2$items,
      _ref2$onItemClick = _ref2.onItemClick,
      onItemClick = _ref2$onItemClick === void 0 ? function () {} : _ref2$onItemClick,
      Component = _ref2.Component,
      children = _ref2.children,
      className = _ref2.className;

  var currentCardIndex = _react["default"].useContext(_withNavigation.GalleryIndexContext);

  var initialized = (0, _useDelayedActivation.useDelayedActivation)();
  var canBeFocused = currentCardIndex > -1;
  return /*#__PURE__*/_react["default"].createElement(StyledCarouselWrapper, {
    "data-cy": "gallery"
  }, /*#__PURE__*/_react["default"].createElement(StyledCarousel, {
    className: className,
    index: currentCardIndex,
    axis: "x",
    tabIndex: -1,
    scrollSnapType: "mandatory",
    scrollAlign: "start",
    initialized: initialized
  }, children !== null && children !== void 0 ? children : items.map(function (card, index) {
    var _card$id;

    return /*#__PURE__*/_react["default"].createElement(StyledCarouselItem, {
      key: (_card$id = card.id) !== null && _card$id !== void 0 ? _card$id : index,
      scrollSnapAlign: (0, _utils.isSberPortal)() ? 'start' : undefined
    }, /*#__PURE__*/_react["default"].createElement(_GalleryCardContainer.GalleryCardContainer, {
      card: card,
      index: index,
      component: Component,
      onClick: onItemClick,
      focused: canBeFocused && currentCardIndex === index
    }));
  })));
}

var GalleryWithNavigation = /*#__PURE__*/_react["default"].memo( /*#__PURE__*/(0, _withNavigation.withNavigation)(Gallery));

exports.GalleryWithNavigation = GalleryWithNavigation;
//# sourceMappingURL=Gallery.js.map