@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";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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"));

const StyledNavigation = _styledComponents.default.div.withConfig({
  displayName: "SkipNavigation__StyledNavigation",
  componentId: "sc-1rj1ake-0"
})(["background-color:", ";padding:", ";width:100%;box-sizing:border-box;&:focus{outline:none;}", ";"], ({
  theme
}) => theme.orbit.paletteCloudLight, ({
  theme
}) => theme.orbit.spaceMedium, ({
  show
}) => !show && (0, _styledComponents.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.default
};

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

const SkipNavigation = ({
  actions,
  feedbackUrl
}) => {
  const [links, setLinks] = React.useState([]);
  const [mappedLinks, setMappedLinks] = React.useState([]);
  const [innerPages, setPages] = React.useState([]);
  const [show, setShow] = React.useState(false);

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

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

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

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

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

      }, ...Object.keys(selectedLinks).map(key => ({
        value: Number(key) + 1,
        label: selectedLinks[Number(key)].innerText
      }))];

      if (selectedLinks) {
        setLinks(selectedLinks);
      }

      setMappedLinks(mappedSections);

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

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

    setShow(true);
  };

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

var _default = SkipNavigation;
exports.default = _default;