@sberdevices/plasma-temple/dist/pages/GalleryPage/GalleryPage.js

SberDevices CanvasApp Templates.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.GalleryPage = 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 _useRemoteHandlers3 = /*#__PURE__*/require("../../hooks/useRemoteHandlers");

var _useGetMutableValue = /*#__PURE__*/require("../../hooks/useGetMutableValue");

var _Header = /*#__PURE__*/require("../../components/Header/Header");

var _Gallery = /*#__PURE__*/require("../../components/Gallery/Gallery");

var _useRegistry3 = /*#__PURE__*/require("../../hooks/useRegistry");

var _excluded = ["index", "title", "activeCardIndex", "isMultiple"];

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var ActiveGalleryContext = /*#__PURE__*/_react["default"].createContext(0);

var StyledCarouselGridWrapper = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CarouselGridWrapper).withConfig({
  componentId: "plasma-temple__sc-auypv8-0"
})(["height:100vh;"]);
var StyledSectionWrapper = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CarouselItem).withConfig({
  componentId: "plasma-temple__sc-auypv8-1"
})(["scroll-snap-align:start;scroll-snap-stop:always;", ""], function (_ref) {
  var withSpacing = _ref.withSpacing;
  return withSpacing && {
    paddingTop: '0.25rem'
  };
});
var StyledFixedHeader = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.Container).withConfig({
  componentId: "plasma-temple__sc-auypv8-2"
})(["position:fixed;top:0;left:0;z-index:10;"]);

var StyledTitleWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-auypv8-3"
})(["padding-bottom:0.875rem;"]);

var StyledSectionTitleWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-auypv8-4"
})(["padding-bottom:28px;padding-top:72px;transition:transform 0.15s linear;transform:translateX(", ");"], function (props) {
  return props.active ? '3rem' : undefined;
});

var FocusableGallery = function FocusableGallery(_ref2) {
  var index = _ref2.index,
      title = _ref2.title,
      _ref2$activeCardIndex = _ref2.activeCardIndex,
      activeCardIndex = _ref2$activeCardIndex === void 0 ? -1 : _ref2$activeCardIndex,
      _ref2$isMultiple = _ref2.isMultiple,
      isMultiple = _ref2$isMultiple === void 0 ? false : _ref2$isMultiple,
      props = _objectWithoutProperties(_ref2, _excluded);

  var _useRegistry = (0, _useRegistry3.useRegistry)(),
      FocusableGalleryTitle = _useRegistry.FocusableGalleryTitle;

  var activeIndex = _react["default"].useContext(ActiveGalleryContext);

  var isActive = index === activeIndex;

  var ref = _react["default"].useRef(null);

  _react["default"].useEffect(function () {
    if (isActive) {
      var _ref$current;

      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
    } else {
      var _ref$current2;

      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.blur();
    }
  }, [isActive]);

  var titleToRender = _react["default"].useMemo(function () {
    if (!title) {
      return null;
    }

    if (isMultiple) {
      return /*#__PURE__*/_react["default"].createElement(StyledSectionTitleWrapper, {
        active: isActive
      }, /*#__PURE__*/_react["default"].createElement(FocusableGalleryTitle, null, title));
    }

    return /*#__PURE__*/_react["default"].createElement(StyledTitleWrapper, null, /*#__PURE__*/_react["default"].createElement(FocusableGalleryTitle, null, title));
  }, [isActive, isMultiple, title]);

  return /*#__PURE__*/_react["default"].createElement(StyledSectionWrapper, {
    "data-cy": "gallery-".concat(index),
    scrollSnapAlign: "start",
    withSpacing: titleToRender === null
  }, titleToRender, /*#__PURE__*/_react["default"].createElement(_Gallery.GalleryWithNavigation, _extends({}, props, {
    activeIndex: activeCardIndex,
    ref: ref
  })));
};

var GalleryPage = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
  var state = _ref3.state,
      header = _ref3.header,
      changeState = _ref3.changeState,
      onCardClick = _ref3.onCardClick,
      galleryCard = _ref3.galleryCard;
  var gallery = state.gallery,
      activeGalleryIndex = state.activeGalleryIndex;

  var galleries = _react["default"].useMemo(function () {
    return Array.isArray(gallery) ? gallery : [_objectSpread({
      id: 'id'
    }, gallery)];
  }, [gallery]);

  var isMultipleGalleries = galleries.length > 1;

  var _useRegistry2 = (0, _useRegistry3.useRegistry)(),
      Carousel = _useRegistry2.Carousel;

  var _useRemoteHandlers = (0, _useRemoteHandlers3.useRemoteHandlers)({
    initialIndex: activeGalleryIndex,
    axis: 'y',
    min: 0,
    max: galleries.length - 1,
    repeat: false
  }),
      _useRemoteHandlers2 = _slicedToArray(_useRemoteHandlers, 2),
      galleryIndex = _useRemoteHandlers2[0],
      changeGallery = _useRemoteHandlers2[1];

  var getState = (0, _useGetMutableValue.useGetMutableValue)(state);
  var getGalleryIndex = (0, _useGetMutableValue.useGetMutableValue)(galleryIndex);

  var changeActiveCard = _react["default"].useCallback(function (index) {
    var currentState = getState();
    var currentGalleryIndex = getGalleryIndex();

    if (!Array.isArray(currentState.gallery)) {
      changeState(_objectSpread(_objectSpread({}, currentState), {}, {
        gallery: _objectSpread(_objectSpread({}, currentState.gallery), {}, {
          activeCardIndex: index
        })
      }));
    } else {
      var galleryList = currentState.gallery.slice();
      galleryList[currentGalleryIndex] = _objectSpread(_objectSpread({}, currentState.gallery[currentGalleryIndex]), {}, {
        activeCardIndex: index
      });
      changeState(_objectSpread(_objectSpread({}, currentState), {}, {
        gallery: galleryList,
        activeGalleryIndex: currentGalleryIndex // меняем индекс активной галлерии в стейте

      }));
    }
  }, [changeState, getGalleryIndex, getState]);

  _react["default"].useImperativeHandle(ref, function () {
    return {
      changeActiveGallery: function changeActiveGallery(index) {
        return changeGallery(index);
      }
    };
  });

  var handleItemClick = _react["default"].useCallback(function (card, index) {
    changeActiveCard(index);
    onCardClick(card);
  }, [changeActiveCard, onCardClick]);

  var innerCarousels = _react["default"].useMemo(function () {
    return galleries.map(function (galleryData, index) {
      return /*#__PURE__*/_react["default"].createElement(FocusableGallery, {
        key: galleryData.id,
        isMultiple: isMultipleGalleries,
        index: index,
        items: galleryData.items,
        title: galleryData.title,
        activeCardIndex: galleryData.activeCardIndex,
        onItemFocus: function onItemFocus() {
          return changeGallery(index);
        },
        onItemClick: handleItemClick,
        Component: galleryCard
      });
    });
  }, [changeGallery, galleries, galleryCard, handleItemClick, isMultipleGalleries]);

  var headerToRender = _react["default"].useMemo(function () {
    return isMultipleGalleries ? /*#__PURE__*/_react["default"].createElement(StyledFixedHeader, null, /*#__PURE__*/_react["default"].createElement(_Header.Header, _extends({}, header, {
      title: ""
    }))) : /*#__PURE__*/_react["default"].createElement(_Header.Header, header);
  }, [header, isMultipleGalleries]);

  return /*#__PURE__*/_react["default"].createElement(ActiveGalleryContext.Provider, {
    value: galleryIndex
  }, headerToRender, /*#__PURE__*/_react["default"].createElement(StyledCarouselGridWrapper, null, /*#__PURE__*/_react["default"].createElement(Carousel, {
    axis: "y",
    index: galleryIndex,
    onIndexChange: changeGallery
  }, innerCarousels)));
});

exports.GalleryPage = GalleryPage;
var _default = GalleryPage;
exports["default"] = _default;
//# sourceMappingURL=GalleryPage.js.map