@sberdevices/plasma-temple/dist/es/pages/ItemPage/ItemPage.js

SberDevices CanvasApp Templates.

var _excluded = ["id", "image", "label"];

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 _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; }

import React from 'react';
import { Header } from '../../components/Header/Header';
import { useRegistry } from '../../hooks/useRegistry';
import { useSpatNav } from '../../hooks/useSpatNav';
import { useVoiceNavigationWithSpatNav } from '../../hooks/useVoiceNavigation';
import { scroll } from '../../utils/scroll';
import { getMediaObjectSrc } from '../../utils';
import { LayoutElementContext } from '../../components/Layout/LayoutElementContext';
import { ItemMainSection } from './components/ItemMainSection/ItemMainSection';

var scrollToWithOffset = function scrollToWithOffset(offset, element) {
  var targetOffset = offset <= 0 ? offset : offset - 100;

  if (!element) {
    return;
  }

  scroll({
    element: element,
    startPosition: element.scrollTop,
    offset: targetOffset - element.scrollTop,
    duration: 300,
    axis: 'y'
  });
};
/** @depreceted use Item */


export var ItemPage = function ItemPage(_ref) {
  var state = _ref.state,
      header = _ref.header,
      entityComponent = _ref.entityComponent,
      _onItemShow = _ref.onItemShow,
      onItemFocus = _ref.onItemFocus,
      additionalButons = _ref.additionalButons;
  var entities = state.entities,
      entitiesTitle = state.entitiesTitle,
      background = state.background,
      title = state.title,
      subtitle = state.subtitle,
      description = state.description,
      actionButtonText = state.actionButtonText;

  var _useRegistry = useRegistry(),
      ItemEntities = _useRegistry.ItemEntities;

  var layoutElementContext = React.useContext(LayoutElementContext);
  var list = React.useMemo(function () {
    return entities.map(function (child, index) {
      var id = child.id,
          image = child.image,
          label = child.label,
          childRest = _objectWithoutProperties(child, _excluded);

      return _objectSpread({
        onClick: function onClick() {
          return _onItemShow(id);
        },
        onFocus: function onFocus() {
          return onItemFocus === null || onItemFocus === void 0 ? void 0 : onItemFocus(id);
        },
        onKeyDown: function onKeyDown(_ref2) {
          var key = _ref2.key;
          return key === 'Enter' && _onItemShow(id);
        },
        url: getMediaObjectSrc(image),
        title: label,
        order: index + 1,
        uuid: id
      }, childRest);
    });
  }, [entities, _onItemShow, onItemFocus]);
  useVoiceNavigationWithSpatNav({
    axis: 'y',
    main: true
  });
  useSpatNav(function (_ref3) {
    var offsetTop = _ref3.offsetTop;
    return scrollToWithOffset(offsetTop, layoutElementContext);
  }); // Необходимо сбросить первоночально установленную точку, чтобы старт навигации был с сфокусированного элемента

  React.useEffect(function () {
    var _window$__spatialNavi;

    // eslint-disable-next-line no-underscore-dangle
    (_window$__spatialNavi = window.__spatialNavigation__) === null || _window$__spatialNavi === void 0 ? void 0 : _window$__spatialNavi.setStartingPoint();
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, header && /*#__PURE__*/React.createElement(Header, header), /*#__PURE__*/React.createElement(ItemMainSection, {
    cover: background && getMediaObjectSrc(background),
    title: title,
    subtitle: subtitle !== null && subtitle !== void 0 ? subtitle : '',
    description: description,
    onItemShow: function onItemShow() {
      return _onItemShow(entities[0].id);
    },
    itemShowButtonText: actionButtonText,
    additionalButons: additionalButons
  }), /*#__PURE__*/React.createElement(ItemEntities, {
    list: list,
    title: entitiesTitle !== null && entitiesTitle !== void 0 ? entitiesTitle : '',
    Component: entityComponent
  }));
};
export default ItemPage;
//# sourceMappingURL=ItemPage.js.map