@gechiui/components/build/higher-order/navigate-regions/index.js

UI components for GeChiUI.

"use strict";

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

var _element = require("@gechiui/element");

var _compose = require("@gechiui/compose");

var _keycodes = require("@gechiui/keycodes");

/**
 * GeChiUI dependencies
 */
const defaultShortcuts = {
  previous: [{
    modifier: 'ctrlShift',
    character: '`'
  }, {
    modifier: 'access',
    character: 'p'
  }],
  next: [{
    modifier: 'ctrl',
    character: '`'
  }, {
    modifier: 'access',
    character: 'n'
  }]
};

function useNavigateRegions() {
  let shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultShortcuts;
  const ref = (0, _element.useRef)();
  const [isFocusingRegions, setIsFocusingRegions] = (0, _element.useState)(false);

  function focusRegion(offset) {
    const regions = Array.from(ref.current.querySelectorAll('[role="region"]'));

    if (!regions.length) {
      return;
    }

    let nextRegion = regions[0];
    const selectedIndex = regions.indexOf(ref.current.ownerDocument.activeElement);

    if (selectedIndex !== -1) {
      let nextIndex = selectedIndex + offset;
      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
      nextIndex = nextIndex === regions.length ? 0 : nextIndex;
      nextRegion = regions[nextIndex];
    }

    nextRegion.focus();
    setIsFocusingRegions(true);
  }

  const clickRef = (0, _compose.useRefEffect)(element => {
    function onClick() {
      setIsFocusingRegions(false);
    }

    element.addEventListener('click', onClick);
    return () => {
      element.removeEventListener('click', onClick);
    };
  }, [setIsFocusingRegions]);
  return {
    ref: (0, _compose.useMergeRefs)([ref, clickRef]),
    className: isFocusingRegions ? 'is-focusing-regions' : '',

    onKeyDown(event) {
      if (shortcuts.previous.some(_ref => {
        let {
          modifier,
          character
        } = _ref;
        return _keycodes.isKeyboardEvent[modifier](event, character);
      })) {
        focusRegion(-1);
      } else if (shortcuts.next.some(_ref2 => {
        let {
          modifier,
          character
        } = _ref2;
        return _keycodes.isKeyboardEvent[modifier](event, character);
      })) {
        focusRegion(1);
      }
    }

  };
}

var _default = (0, _compose.createHigherOrderComponent)(Component => _ref3 => {
  let {
    shortcuts,
    ...props
  } = _ref3;
  return (0, _element.createElement)("div", useNavigateRegions(shortcuts), (0, _element.createElement)(Component, props));
}, 'navigateRegions');

exports.default = _default;
//# sourceMappingURL=index.js.map