Dashboard sipadu mbip
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

AbstractNav.js 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  4. exports.__esModule = true;
  5. exports.default = void 0;
  6. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  7. var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
  8. var _querySelectorAll = _interopRequireDefault(require("dom-helpers/query/querySelectorAll"));
  9. var _react = _interopRequireWildcard(require("react"));
  10. var _useForceUpdate = _interopRequireDefault(require("@restart/hooks/useForceUpdate"));
  11. var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
  12. var _NavContext = _interopRequireDefault(require("./NavContext"));
  13. var _SelectableContext = _interopRequireWildcard(require("./SelectableContext"));
  14. var _TabContext = _interopRequireDefault(require("./TabContext"));
  15. var noop = function noop() {};
  16. var AbstractNav = _react.default.forwardRef(function (_ref, ref) {
  17. var _ref$as = _ref.as,
  18. Component = _ref$as === void 0 ? 'ul' : _ref$as,
  19. onSelect = _ref.onSelect,
  20. activeKey = _ref.activeKey,
  21. role = _ref.role,
  22. onKeyDown = _ref.onKeyDown,
  23. props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "onSelect", "activeKey", "role", "onKeyDown"]);
  24. // A ref and forceUpdate for refocus, b/c we only want to trigger when needed
  25. // and don't want to reset the set in the effect
  26. var forceUpdate = (0, _useForceUpdate.default)();
  27. var needsRefocusRef = (0, _react.useRef)(false);
  28. var parentOnSelect = (0, _react.useContext)(_SelectableContext.default);
  29. var tabContext = (0, _react.useContext)(_TabContext.default);
  30. var getControlledId, getControllerId;
  31. if (tabContext) {
  32. role = role || 'tablist';
  33. activeKey = tabContext.activeKey;
  34. getControlledId = tabContext.getControlledId;
  35. getControllerId = tabContext.getControllerId;
  36. }
  37. var listNode = (0, _react.useRef)(null);
  38. var getNextActiveChild = function getNextActiveChild(offset) {
  39. if (!listNode.current) return null;
  40. var items = (0, _querySelectorAll.default)(listNode.current, '[data-rb-event-key]:not(.disabled)');
  41. var activeChild = listNode.current.querySelector('.active');
  42. var index = items.indexOf(activeChild);
  43. if (index === -1) return null;
  44. var nextIndex = index + offset;
  45. if (nextIndex >= items.length) nextIndex = 0;
  46. if (nextIndex < 0) nextIndex = items.length - 1;
  47. return items[nextIndex];
  48. };
  49. var handleSelect = function handleSelect(key, event) {
  50. if (key == null) return;
  51. if (onSelect) onSelect(key, event);
  52. if (parentOnSelect) parentOnSelect(key, event);
  53. };
  54. var handleKeyDown = function handleKeyDown(event) {
  55. if (onKeyDown) onKeyDown(event);
  56. var nextActiveChild;
  57. switch (event.key) {
  58. case 'ArrowLeft':
  59. case 'ArrowUp':
  60. nextActiveChild = getNextActiveChild(-1);
  61. break;
  62. case 'ArrowRight':
  63. case 'ArrowDown':
  64. nextActiveChild = getNextActiveChild(1);
  65. break;
  66. default:
  67. return;
  68. }
  69. if (!nextActiveChild) return;
  70. event.preventDefault();
  71. handleSelect(nextActiveChild.dataset.rbEventKey, event);
  72. needsRefocusRef.current = true;
  73. forceUpdate();
  74. };
  75. (0, _react.useEffect)(function () {
  76. if (listNode.current && needsRefocusRef.current) {
  77. var activeChild = listNode.current.querySelector('[data-rb-event-key].active');
  78. if (activeChild) activeChild.focus();
  79. }
  80. needsRefocusRef.current = false;
  81. });
  82. var mergedRef = (0, _useMergedRefs.default)(ref, listNode);
  83. return _react.default.createElement(_SelectableContext.default.Provider, {
  84. value: handleSelect
  85. }, _react.default.createElement(_NavContext.default.Provider, {
  86. value: {
  87. role: role,
  88. // used by NavLink to determine it's role
  89. activeKey: (0, _SelectableContext.makeEventKey)(activeKey),
  90. getControlledId: getControlledId || noop,
  91. getControllerId: getControllerId || noop
  92. }
  93. }, _react.default.createElement(Component, (0, _extends2.default)({}, props, {
  94. onKeyDown: handleKeyDown,
  95. ref: mergedRef,
  96. role: role
  97. }))));
  98. });
  99. var _default = AbstractNav;
  100. exports.default = _default;
  101. module.exports = exports["default"];