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

SberDevices CanvasApp Templates.

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

import React from 'react';
import styled from 'styled-components';
import throttle from 'lodash.throttle';
import { Header } from '../../components/Header/Header';
import { useSpatNavBetweenTargets } from '../../hooks/useSpatNav';
import { useVoiceNavigationWithSpatNav } from '../../hooks/useVoiceNavigation';
import { scroll } from '../../utils/scroll';
import { LayoutElementContext } from '../../components/Layout/LayoutElementContext';
import { Grid } from '../../components/Grid/Grid';
import { GridCard } from './components/GridCard';

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

  if (!element) {
    return;
  }

  scroll({
    element: element,
    startPosition: element.scrollTop,
    offset: targetOffset - element.scrollTop,
    duration: 300,
    axis: 'y'
  });
};

var StyledGrid = /*#__PURE__*/styled(Grid).withConfig({
  componentId: "plasma-temple__sc-15lvw5u-0"
})(["margin-top:1.5rem;"]);
/**
 * TODO: в данном компоненте должна остаться только навигация и возможно фиксированный заголовок.
 * Карточки реализуются вне компонента и передаются как children
 */

/** @deprecated Работает, только с PlasmaApp, вместо этого компонента используйте Grid */

export var GridPage = function GridPage(_ref) {
  var state = _ref.state,
      header = _ref.header,
      onItemShow = _ref.onItemShow,
      onScrollBottom = _ref.onScrollBottom,
      children = _ref.children;
  var items = state.items,
      background = state.background;
  var layoutElementContext = React.useContext(LayoutElementContext);
  var list = React.useMemo(function () {
    return items.map(function (child, index) {
      return _objectSpread(_objectSpread({}, child), {}, {
        onClick: function onClick() {
          return onItemShow === null || onItemShow === void 0 ? void 0 : onItemShow(child);
        },
        onKeyDown: function onKeyDown(_ref2) {
          var key = _ref2.key;
          return key === 'Enter' && (onItemShow === null || onItemShow === void 0 ? void 0 : onItemShow(child));
        },
        url: child.image.src,
        order: index + 1,
        uuid: child.id
      });
    });
  }, [items, onItemShow]);
  useVoiceNavigationWithSpatNav({
    axis: 'y',
    main: true
  });
  useSpatNavBetweenTargets('y', 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();
  }, []);
  React.useEffect(function () {
    if (!onScrollBottom) {
      return;
    }

    var onScroll = function onScroll() {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        onScrollBottom();
      }
    };

    var throttledScroll = throttle(onScroll, 100);
    window.addEventListener('scroll', throttledScroll, {
      capture: false,
      passive: true
    });
    return function () {
      window.removeEventListener('scroll', throttledScroll);
    };
  }, [onScrollBottom]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, header && /*#__PURE__*/React.createElement(Header, header), /*#__PURE__*/React.createElement(StyledGrid, {
    columnXL: 3,
    background: background
  }, list.map(function (item) {
    if (children) {
      return children(_objectSpread({
        key: item.uuid
      }, item));
    }

    return /*#__PURE__*/React.createElement(GridCard, _extends({
      key: item.uuid
    }, item));
  })));
};
export default GridPage;
//# sourceMappingURL=GridPage.js.map