123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- "use strict";
-
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
- exports.__esModule = true;
- exports.default = void 0;
-
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
- var _querySelectorAll = _interopRequireDefault(require("dom-helpers/query/querySelectorAll"));
-
- var _react = _interopRequireWildcard(require("react"));
-
- var _useForceUpdate = _interopRequireDefault(require("@restart/hooks/useForceUpdate"));
-
- var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
-
- var _NavContext = _interopRequireDefault(require("./NavContext"));
-
- var _SelectableContext = _interopRequireWildcard(require("./SelectableContext"));
-
- var _TabContext = _interopRequireDefault(require("./TabContext"));
-
- var noop = function noop() {};
-
- var AbstractNav = _react.default.forwardRef(function (_ref, ref) {
- var _ref$as = _ref.as,
- Component = _ref$as === void 0 ? 'ul' : _ref$as,
- onSelect = _ref.onSelect,
- activeKey = _ref.activeKey,
- role = _ref.role,
- onKeyDown = _ref.onKeyDown,
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "onSelect", "activeKey", "role", "onKeyDown"]);
- // A ref and forceUpdate for refocus, b/c we only want to trigger when needed
- // and don't want to reset the set in the effect
- var forceUpdate = (0, _useForceUpdate.default)();
- var needsRefocusRef = (0, _react.useRef)(false);
- var parentOnSelect = (0, _react.useContext)(_SelectableContext.default);
- var tabContext = (0, _react.useContext)(_TabContext.default);
- var getControlledId, getControllerId;
-
- if (tabContext) {
- role = role || 'tablist';
- activeKey = tabContext.activeKey;
- getControlledId = tabContext.getControlledId;
- getControllerId = tabContext.getControllerId;
- }
-
- var listNode = (0, _react.useRef)(null);
-
- var getNextActiveChild = function getNextActiveChild(offset) {
- if (!listNode.current) return null;
- var items = (0, _querySelectorAll.default)(listNode.current, '[data-rb-event-key]:not(.disabled)');
- var activeChild = listNode.current.querySelector('.active');
- var index = items.indexOf(activeChild);
- if (index === -1) return null;
- var nextIndex = index + offset;
- if (nextIndex >= items.length) nextIndex = 0;
- if (nextIndex < 0) nextIndex = items.length - 1;
- return items[nextIndex];
- };
-
- var handleSelect = function handleSelect(key, event) {
- if (key == null) return;
- if (onSelect) onSelect(key, event);
- if (parentOnSelect) parentOnSelect(key, event);
- };
-
- var handleKeyDown = function handleKeyDown(event) {
- if (onKeyDown) onKeyDown(event);
- var nextActiveChild;
-
- switch (event.key) {
- case 'ArrowLeft':
- case 'ArrowUp':
- nextActiveChild = getNextActiveChild(-1);
- break;
-
- case 'ArrowRight':
- case 'ArrowDown':
- nextActiveChild = getNextActiveChild(1);
- break;
-
- default:
- return;
- }
-
- if (!nextActiveChild) return;
- event.preventDefault();
- handleSelect(nextActiveChild.dataset.rbEventKey, event);
- needsRefocusRef.current = true;
- forceUpdate();
- };
-
- (0, _react.useEffect)(function () {
- if (listNode.current && needsRefocusRef.current) {
- var activeChild = listNode.current.querySelector('[data-rb-event-key].active');
- if (activeChild) activeChild.focus();
- }
-
- needsRefocusRef.current = false;
- });
- var mergedRef = (0, _useMergedRefs.default)(ref, listNode);
- return _react.default.createElement(_SelectableContext.default.Provider, {
- value: handleSelect
- }, _react.default.createElement(_NavContext.default.Provider, {
- value: {
- role: role,
- // used by NavLink to determine it's role
- activeKey: (0, _SelectableContext.makeEventKey)(activeKey),
- getControlledId: getControlledId || noop,
- getControllerId: getControllerId || noop
- }
- }, _react.default.createElement(Component, (0, _extends2.default)({}, props, {
- onKeyDown: handleKeyDown,
- ref: mergedRef,
- role: role
- }))));
- });
-
- var _default = AbstractNav;
- exports.default = _default;
- module.exports = exports["default"];
|