1 line
3.7 KiB
JSON
1 line
3.7 KiB
JSON
{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport qsa from 'dom-helpers/querySelectorAll';\nimport React, { useContext, useEffect, useRef } from 'react';\nimport useForceUpdate from '@restart/hooks/useForceUpdate';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport NavContext from './NavContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nimport TabContext from './TabContext';\n\nvar noop = function noop() {};\n\nvar AbstractNav = React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'ul' : _ref$as,\n onSelect = _ref.onSelect,\n activeKey = _ref.activeKey,\n role = _ref.role,\n onKeyDown = _ref.onKeyDown,\n props = _objectWithoutPropertiesLoose(_ref, [\"as\", \"onSelect\", \"activeKey\", \"role\", \"onKeyDown\"]); // A ref and forceUpdate for refocus, b/c we only want to trigger when needed\n // and don't want to reset the set in the effect\n\n\n var forceUpdate = useForceUpdate();\n var needsRefocusRef = useRef(false);\n var parentOnSelect = useContext(SelectableContext);\n var tabContext = useContext(TabContext);\n var getControlledId, getControllerId;\n\n if (tabContext) {\n role = role || 'tablist';\n activeKey = tabContext.activeKey;\n getControlledId = tabContext.getControlledId;\n getControllerId = tabContext.getControllerId;\n }\n\n var listNode = useRef(null);\n\n var getNextActiveChild = function getNextActiveChild(offset) {\n if (!listNode.current) return null;\n var items = qsa(listNode.current, '[data-rb-event-key]:not(.disabled)');\n var activeChild = listNode.current.querySelector('.active');\n var index = items.indexOf(activeChild);\n if (index === -1) return null;\n var nextIndex = index + offset;\n if (nextIndex >= items.length) nextIndex = 0;\n if (nextIndex < 0) nextIndex = items.length - 1;\n return items[nextIndex];\n };\n\n var handleSelect = function handleSelect(key, event) {\n if (key == null) return;\n if (onSelect) onSelect(key, event);\n if (parentOnSelect) parentOnSelect(key, event);\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n if (onKeyDown) onKeyDown(event);\n var nextActiveChild;\n\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n nextActiveChild = getNextActiveChild(-1);\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n nextActiveChild = getNextActiveChild(1);\n break;\n\n default:\n return;\n }\n\n if (!nextActiveChild) return;\n event.preventDefault();\n handleSelect(nextActiveChild.dataset.rbEventKey, event);\n needsRefocusRef.current = true;\n forceUpdate();\n };\n\n useEffect(function () {\n if (listNode.current && needsRefocusRef.current) {\n var activeChild = listNode.current.querySelector('[data-rb-event-key].active');\n if (activeChild) activeChild.focus();\n }\n\n needsRefocusRef.current = false;\n });\n var mergedRef = useMergedRefs(ref, listNode);\n return React.createElement(SelectableContext.Provider, {\n value: handleSelect\n }, React.createElement(NavContext.Provider, {\n value: {\n role: role,\n // used by NavLink to determine it's role\n activeKey: makeEventKey(activeKey),\n getControlledId: getControlledId || noop,\n getControllerId: getControllerId || noop\n }\n }, React.createElement(Component, _extends({}, props, {\n onKeyDown: handleKeyDown,\n ref: mergedRef,\n role: role\n }))));\n});\nexport default AbstractNav;","map":null,"metadata":{},"sourceType":"module"} |