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

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

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from "react";
import styled, { css } from "styled-components";
import Select from "../Select";
import Stack from "../Stack";
import ButtonLink from "../Button";
import defaultTheme from "../defaultTheme";
import Translate from "../Translate";
var StyledNavigation = styled.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 && css(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;white-space:nowrap;padding:0;position:absolute;width:1px;"]);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledNavigation.defaultProps = {
  theme: defaultTheme
};
var StyledSelectWrapper = styled.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 _React$useState = React.useState([]),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      links = _React$useState2[0],
      setLinks = _React$useState2[1];

  var _React$useState3 = React.useState([]),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      mappedLinks = _React$useState4[0],
      setMappedLinks = _React$useState4[1];

  var _React$useState5 = React.useState([]),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      innerPages = _React$useState6[0],
      setPages = _React$useState6[1];

  var _React$useState7 = React.useState(false),
      _React$useState8 = _slicedToArray(_React$useState7, 2),
      show = _React$useState8[0],
      setShow = _React$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 /*#__PURE__*/React.createElement(StyledNavigation, {
    tabIndex: "-1",
    onFocus: handleFocus,
    onBlur: function onBlur() {
      return setShow(false);
    },
    show: show
  }, /*#__PURE__*/React.createElement(Stack, {
    justify: "between"
  }, /*#__PURE__*/React.createElement(StyledSelectWrapper, null, /*#__PURE__*/React.createElement(Stack, {
    align: "center"
  }, /*#__PURE__*/React.createElement(Select, {
    options: mappedLinks,
    onChange: handleLinksClick,
    size: "small"
  }), innerPages.length > 0 && /*#__PURE__*/React.createElement(Select, {
    options: innerPages,
    onChange: handlePageClick,
    size: "small"
  }))), feedbackUrl && /*#__PURE__*/React.createElement(ButtonLink, {
    href: feedbackUrl,
    type: "secondary",
    external: true,
    size: "small"
  }, /*#__PURE__*/React.createElement(Translate, {
    tKey: "a11ymenu_send_feedback"
  }))));
};

export default SkipNavigation;