mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-22 16:35:14 +00:00
270 lines
8.4 KiB
JavaScript
270 lines
8.4 KiB
JavaScript
import matches from 'dom-helpers/matches';
|
|
import qsa from 'dom-helpers/querySelectorAll';
|
|
import addEventListener from 'dom-helpers/addEventListener';
|
|
import React, { useCallback, useRef, useEffect, useMemo } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useUncontrolledProp } from 'uncontrollable';
|
|
import usePrevious from '@restart/hooks/usePrevious';
|
|
import useForceUpdate from '@restart/hooks/useForceUpdate';
|
|
import useGlobalListener from '@restart/hooks/useGlobalListener';
|
|
import useEventCallback from '@restart/hooks/useEventCallback';
|
|
import DropdownContext from './DropdownContext';
|
|
import DropdownMenu from './DropdownMenu';
|
|
import DropdownToggle from './DropdownToggle';
|
|
var propTypes = {
|
|
/**
|
|
* A render prop that returns the root dropdown element. The `props`
|
|
* argument should spread through to an element containing _both_ the
|
|
* menu and toggle in order to handle keyboard events for focus management.
|
|
*
|
|
* @type {Function ({
|
|
* props: {
|
|
* onKeyDown: (SyntheticEvent) => void,
|
|
* },
|
|
* }) => React.Element}
|
|
*/
|
|
children: PropTypes.node,
|
|
|
|
/**
|
|
* Determines the direction and location of the Menu in relation to it's Toggle.
|
|
*/
|
|
drop: PropTypes.oneOf(['up', 'left', 'right', 'down']),
|
|
|
|
/**
|
|
* Controls the focus behavior for when the Dropdown is opened. Set to
|
|
* `true` to always focus the first menu item, `keyboard` to focus only when
|
|
* navigating via the keyboard, or `false` to disable completely
|
|
*
|
|
* The Default behavior is `false` **unless** the Menu has a `role="menu"`
|
|
* where it will default to `keyboard` to match the recommended [ARIA Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton).
|
|
*/
|
|
focusFirstItemOnShow: PropTypes.oneOf([false, true, 'keyboard']),
|
|
|
|
/**
|
|
* A css slector string that will return __focusable__ menu items.
|
|
* Selectors should be relative to the menu component:
|
|
* e.g. ` > li:not('.disabled')`
|
|
*/
|
|
itemSelector: PropTypes.string,
|
|
|
|
/**
|
|
* Align the menu to the 'end' side of the placement side of the Dropdown toggle. The default placement is `top-start` or `bottom-start`.
|
|
*/
|
|
alignEnd: PropTypes.bool,
|
|
|
|
/**
|
|
* Whether or not the Dropdown is visible.
|
|
*
|
|
* @controllable onToggle
|
|
*/
|
|
show: PropTypes.bool,
|
|
|
|
/**
|
|
* Sets the initial show position of the Dropdown.
|
|
*/
|
|
defaultShow: PropTypes.bool,
|
|
|
|
/**
|
|
* A callback fired when the Dropdown wishes to change visibility. Called with the requested
|
|
* `show` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`.
|
|
*
|
|
* ```ts static
|
|
* function(
|
|
* isOpen: boolean,
|
|
* event: SyntheticEvent,
|
|
* ): void
|
|
* ```
|
|
*
|
|
* @controllable show
|
|
*/
|
|
onToggle: PropTypes.func
|
|
};
|
|
|
|
function useRefWithUpdate() {
|
|
var forceUpdate = useForceUpdate();
|
|
var ref = useRef(null);
|
|
var attachRef = useCallback(function (element) {
|
|
ref.current = element; // ensure that a menu set triggers an update for consumers
|
|
|
|
forceUpdate();
|
|
}, [forceUpdate]);
|
|
return [ref, attachRef];
|
|
}
|
|
/**
|
|
* @displayName Dropdown
|
|
* @public
|
|
*/
|
|
|
|
|
|
function Dropdown(_ref) {
|
|
var drop = _ref.drop,
|
|
alignEnd = _ref.alignEnd,
|
|
defaultShow = _ref.defaultShow,
|
|
rawShow = _ref.show,
|
|
rawOnToggle = _ref.onToggle,
|
|
_ref$itemSelector = _ref.itemSelector,
|
|
itemSelector = _ref$itemSelector === void 0 ? '* > *' : _ref$itemSelector,
|
|
focusFirstItemOnShow = _ref.focusFirstItemOnShow,
|
|
children = _ref.children;
|
|
|
|
var _useUncontrolledProp = useUncontrolledProp(rawShow, defaultShow, rawOnToggle),
|
|
show = _useUncontrolledProp[0],
|
|
onToggle = _useUncontrolledProp[1]; // We use normal refs instead of useCallbackRef in order to populate the
|
|
// the value as quickly as possible, otherwise the effect to focus the element
|
|
// may run before the state value is set
|
|
|
|
|
|
var _useRefWithUpdate = useRefWithUpdate(),
|
|
menuRef = _useRefWithUpdate[0],
|
|
setMenu = _useRefWithUpdate[1];
|
|
|
|
var menuElement = menuRef.current;
|
|
|
|
var _useRefWithUpdate2 = useRefWithUpdate(),
|
|
toggleRef = _useRefWithUpdate2[0],
|
|
setToggle = _useRefWithUpdate2[1];
|
|
|
|
var toggleElement = toggleRef.current;
|
|
var lastShow = usePrevious(show);
|
|
var lastSourceEvent = useRef(null);
|
|
var focusInDropdown = useRef(false);
|
|
var toggle = useCallback(function (nextShow, event) {
|
|
onToggle(nextShow, event);
|
|
}, [onToggle]);
|
|
var context = useMemo(function () {
|
|
return {
|
|
toggle: toggle,
|
|
drop: drop,
|
|
show: show,
|
|
alignEnd: alignEnd,
|
|
menuElement: menuElement,
|
|
toggleElement: toggleElement,
|
|
setMenu: setMenu,
|
|
setToggle: setToggle
|
|
};
|
|
}, [toggle, drop, show, alignEnd, menuElement, toggleElement, setMenu, setToggle]);
|
|
|
|
if (menuElement && lastShow && !show) {
|
|
focusInDropdown.current = menuElement.contains(document.activeElement);
|
|
}
|
|
|
|
var focusToggle = useEventCallback(function () {
|
|
if (toggleElement && toggleElement.focus) {
|
|
toggleElement.focus();
|
|
}
|
|
});
|
|
var maybeFocusFirst = useEventCallback(function () {
|
|
var type = lastSourceEvent.current;
|
|
var focusType = focusFirstItemOnShow;
|
|
|
|
if (focusType == null) {
|
|
focusType = menuRef.current && matches(menuRef.current, '[role=menu]') ? 'keyboard' : false;
|
|
}
|
|
|
|
if (focusType === false || focusType === 'keyboard' && !/^key.+$/.test(type)) {
|
|
return;
|
|
}
|
|
|
|
var first = qsa(menuRef.current, itemSelector)[0];
|
|
if (first && first.focus) first.focus();
|
|
});
|
|
useEffect(function () {
|
|
if (show) maybeFocusFirst();else if (focusInDropdown.current) {
|
|
focusInDropdown.current = false;
|
|
focusToggle();
|
|
} // only `show` should be changing
|
|
}, [show, focusInDropdown, focusToggle, maybeFocusFirst]);
|
|
useEffect(function () {
|
|
lastSourceEvent.current = null;
|
|
});
|
|
|
|
var getNextFocusedChild = function getNextFocusedChild(current, offset) {
|
|
if (!menuRef.current) return null;
|
|
var items = qsa(menuRef.current, itemSelector);
|
|
var index = items.indexOf(current) + offset;
|
|
index = Math.max(0, Math.min(index, items.length));
|
|
return items[index];
|
|
};
|
|
|
|
useGlobalListener('keydown', function (event) {
|
|
var _menuRef$current, _toggleRef$current;
|
|
|
|
var key = event.key;
|
|
var target = event.target;
|
|
var fromMenu = (_menuRef$current = menuRef.current) == null ? void 0 : _menuRef$current.contains(target);
|
|
var fromToggle = (_toggleRef$current = toggleRef.current) == null ? void 0 : _toggleRef$current.contains(target); // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
|
|
// in inscrutability
|
|
|
|
var isInput = /input|textarea/i.test(target.tagName);
|
|
|
|
if (isInput && (key === ' ' || key !== 'Escape' && fromMenu)) {
|
|
return;
|
|
}
|
|
|
|
if (!fromMenu && !fromToggle) {
|
|
return;
|
|
}
|
|
|
|
if (!menuRef.current && key === 'Tab') {
|
|
return;
|
|
}
|
|
|
|
lastSourceEvent.current = event.type;
|
|
|
|
switch (key) {
|
|
case 'ArrowUp':
|
|
{
|
|
var next = getNextFocusedChild(target, -1);
|
|
if (next && next.focus) next.focus();
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
case 'ArrowDown':
|
|
event.preventDefault();
|
|
|
|
if (!show) {
|
|
onToggle(true, event);
|
|
} else {
|
|
var _next = getNextFocusedChild(target, 1);
|
|
|
|
if (_next && _next.focus) _next.focus();
|
|
}
|
|
|
|
return;
|
|
|
|
case 'Tab':
|
|
// on keydown the target is the element being tabbed FROM, we need that
|
|
// to know if this event is relevant to this dropdown (e.g. in this menu).
|
|
// On `keyup` the target is the element being tagged TO which we use to check
|
|
// if focus has left the menu
|
|
addEventListener(document, 'keyup', function (e) {
|
|
var _menuRef$current2;
|
|
|
|
if (e.key === 'Tab' && !e.target || !((_menuRef$current2 = menuRef.current) != null && _menuRef$current2.contains(e.target))) {
|
|
onToggle(false, event);
|
|
}
|
|
}, {
|
|
once: true
|
|
});
|
|
break;
|
|
|
|
case 'Escape':
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onToggle(false, event);
|
|
break;
|
|
|
|
default:
|
|
}
|
|
});
|
|
return /*#__PURE__*/React.createElement(DropdownContext.Provider, {
|
|
value: context
|
|
}, children);
|
|
}
|
|
|
|
Dropdown.displayName = 'ReactOverlaysDropdown';
|
|
Dropdown.propTypes = propTypes;
|
|
Dropdown.Menu = DropdownMenu;
|
|
Dropdown.Toggle = DropdownToggle;
|
|
export default Dropdown; |