react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
72 lines • 2.84 kB
JavaScript
var __assign = this && this.__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import React, { useCallback, useMemo } from 'react';
import { Keys } from '../../lib/keyboard';
import { getDisplayName } from '../../lib/getDisplayName';
import { useKeyboardNavigation } from '../../hooks/behavior/useKeyboardNavigation';
import { useKeyboardPick } from '../../hooks/behavior/useKeyboardPick';
import { Menu as BaseMenu, flattenItemsWithoutEmptyGroups, isAvailableItem } from './Menu';
export * from './Menu';
export var withMenuDesktop = function (BaseMenu) {
return function (_a) {
var _b = _a.pickKeys,
pickKeys = _b === void 0 ? [Keys.ENTER, Keys.SPACE] : _b,
_c = _a.pickStrategy,
pickStrategy = _c === void 0 ? 'keydown' : _c,
props = __rest(_a, ["pickKeys", "pickStrategy"]);
var disabled = props.disabled,
isFocused = props.isFocused,
items = props.items,
cursorIndex = props.cursorIndex,
setCursorIndex = props.setCursorIndex,
onPick = props.onPick;
var flatItems = useMemo(function () {
return flattenItemsWithoutEmptyGroups(items);
}, [items]);
var enabled = !disabled && !!isFocused;
var cursor = cursorIndex !== null && cursorIndex !== void 0 ? cursorIndex : -1;
var onPickProxy = useCallback(function () {
var item = flatItems[cursor];
if (item !== undefined && onPick !== undefined) {
onPick(item.id, cursor);
}
}, [flatItems, cursor, onPick]);
// Add keyboard pick
useKeyboardPick({
enabled: enabled,
pickKeys: pickKeys,
pickStrategy: pickStrategy,
onPick: onPickProxy
});
// Add keyboard navigation
useKeyboardNavigation({
enabled: enabled,
items: flatItems,
cursor: cursorIndex !== null && cursorIndex !== void 0 ? cursorIndex : -1,
setCursor: setCursorIndex,
predicate: isAvailableItem,
direction: ['vertical'],
enableJump: true,
loop: true
});
return /*#__PURE__*/React.createElement(BaseMenu, __assign({}, props));
};
};
export var Menu = withMenuDesktop(BaseMenu);
Menu.displayName = getDisplayName(BaseMenu);