@kiwicom/orbit-components/lib/SkipNavigation/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

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

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _Select = _interopRequireDefault(require("../Select"));

var _Stack = _interopRequireDefault(require("../Stack"));

var _Button = _interopRequireDefault(require("../Button"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _Translate = _interopRequireDefault(require("../Translate"));

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

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

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

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

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }

var StyledNavigation = _styledComponents.default.div.withConfig({
  displayName: "SkipNavigation__StyledNavigation",
  componentId: "sc-13g9jxq-0"
})(["background-color:", ";padding:", ";width:100%;box-sizing:border-box;&:focus{outline:none;}", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.paletteCloudLight;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.spaceMedium;
}, function (_ref3) {
  var show = _ref3.show;
  return !show && (0, _styledComponents.css)(["clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute;pointer-events:none;opacity:0;width:0;"]);
});

StyledNavigation.defaultProps = {
  theme: _defaultTheme.default
};

var StyledSelectWrapper = _styledComponents.default.div.withConfig({
  displayName: "SkipNavigation__StyledSelectWrapper",
  componentId: "sc-13g9jxq-1"
})(["max-width:800px;"]);

var SkipNavigation = function SkipNavigation(_ref4) {
  var actions = _ref4.actions,
      feedbackUrl = _ref4.feedbackUrl;

  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      links = _useState2[0],
      setLinks = _useState2[1];

  var _useState3 = (0, _react.useState)([]),
      _useState4 = _slicedToArray(_useState3, 2),
      mappedLinks = _useState4[0],
      setMappedLinks = _useState4[1];

  var _useState5 = (0, _react.useState)([]),
      _useState6 = _slicedToArray(_useState5, 2),
      innerPages = _useState6[0],
      setPages = _useState6[1];

  var _useState7 = (0, _react.useState)(false),
      _useState8 = _slicedToArray(_useState7, 2),
      show = _useState8[0],
      setShow = _useState8[1];

  var handleLinksClick = function handleLinksClick(ev) {
    var index = Number(ev.target.value);
    var selected = links[index - 1];

    if (selected) {
      selected.setAttribute("tabindex", "-1");
      selected.focus();
    }
  };

  var handlePageClick = function handlePageClick(ev) {
    if (actions) {
      var index = Number(ev.target.value);
      var selected = actions[index - 1];

      if (selected.onClick) {
        selected.onClick();
      } else if (selected.link) {
        window.location.href = selected.link;
      }
    }
  };

  var handleFocus = function handleFocus() {
    if (links.length === 0) {
      var selectedLinks = document.querySelectorAll("[data-a11y-section]");
      var mappedSections = [{
        value: 0,
        label: "Jump to section" // TODO: Dictionary

      }].concat(_toConsumableArray(Object.keys(selectedLinks).map(function (key) {
        return {
          value: Number(key) + 1,
          label: selectedLinks[Number(key)].innerText
        };
      })));

      if (selectedLinks) {
        setLinks(selectedLinks);
      }

      setMappedLinks(mappedSections);

      if (actions) {
        var mappedPages = [{
          value: 0,
          label: "Common actions" // TODO: Dictionary

        }].concat(_toConsumableArray(actions.map(function (el, i) {
          return {
            value: i + 1,
            label: el.name
          };
        })));
        setPages(mappedPages);
      }
    }

    setShow(true);
  };

  return _react.default.createElement(StyledNavigation, {
    tabIndex: "-1",
    onFocus: handleFocus,
    onBlur: function onBlur() {
      setShow(false);
    },
    show: show
  }, _react.default.createElement(_Stack.default, {
    justify: "between"
  }, _react.default.createElement(StyledSelectWrapper, null, _react.default.createElement(_Stack.default, {
    align: "center"
  }, _react.default.createElement(_Select.default, {
    options: mappedLinks,
    onChange: handleLinksClick,
    size: "small"
  }), innerPages.length > 0 && _react.default.createElement(_Select.default, {
    options: innerPages,
    onChange: handlePageClick,
    size: "small"
  }))), feedbackUrl && _react.default.createElement(_Button.default, {
    href: feedbackUrl,
    type: "secondary",
    external: true,
    size: "small"
  }, _react.default.createElement(_Translate.default, {
    tKey: "a11ymenu_send_feedback"
  }))));
};

var _default = SkipNavigation;
exports.default = _default;