mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-23 00:45:16 +00:00
134 lines
5.5 KiB
JavaScript
134 lines
5.5 KiB
JavaScript
|
"use strict";
|
||
|
|
||
|
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/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 _excluded = ["as", "onSelect", "activeKey", "role", "onKeyDown"];
|
||
|
|
||
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||
|
|
||
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||
|
|
||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||
|
var noop = function noop() {};
|
||
|
|
||
|
var AbstractNav = /*#__PURE__*/_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, _excluded);
|
||
|
// 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) {
|
||
|
var currentListNode = listNode.current;
|
||
|
if (!currentListNode) return null;
|
||
|
var items = (0, _querySelectorAll.default)(currentListNode, '[data-rb-event-key]:not(.disabled)');
|
||
|
var activeChild = currentListNode.querySelector('.active');
|
||
|
if (!activeChild) return null;
|
||
|
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 /*#__PURE__*/_react.default.createElement(_SelectableContext.default.Provider, {
|
||
|
value: handleSelect
|
||
|
}, /*#__PURE__*/_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
|
||
|
}
|
||
|
}, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
|
||
|
onKeyDown: handleKeyDown,
|
||
|
ref: mergedRef,
|
||
|
role: role
|
||
|
}))));
|
||
|
});
|
||
|
|
||
|
var _default = AbstractNav;
|
||
|
exports.default = _default;
|
||
|
module.exports = exports["default"];
|