react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
62 lines • 2.59 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, { useMemo } from 'react';
import { withHOCConstructor } from '../../../lib/compose';
import { useInlineKeyboardSearch } from '../../../hooks/behavior/useInlineKeyboardSearch';
import { getTextOfItem, flattenItemsWithoutEmptyGroups, isAvailableItem } from '../Menu';
var defaultPredicate = function (searchText, item) {
// Skip disabled and hidden items
if (!isAvailableItem(item)) return false;
var itemText = getTextOfItem(item);
// Skip items which not contain text
if (itemText === undefined) return false;
var substr = itemText.slice(0, searchText.length);
return substr.toLowerCase() === searchText.toLowerCase();
};
/**
* HOC to search items by input while focus.
*
* It search by item text, that may be `content` or `textContent`
*/
export var withInlineSearch = withHOCConstructor({}, function (Menu) {
return function (_a) {
var inlineSearch = _a.inlineSearch,
inlineSearchPredicate = _a.inlineSearchPredicate,
props = __rest(_a, ["inlineSearch", "inlineSearchPredicate"]);
var items = props.items,
cursorIndex = props.cursorIndex,
setCursorIndex = props.setCursorIndex,
isFocused = props.isFocused,
disabled = props.disabled;
var flattenItems = useMemo(function () {
return flattenItemsWithoutEmptyGroups(items);
}, [items]);
var enableInlineSearch = !disabled && !!inlineSearch && !!isFocused;
var searchPredicate = inlineSearchPredicate || defaultPredicate;
useInlineKeyboardSearch({
enabled: enableInlineSearch,
items: flattenItems,
cursor: cursorIndex !== null && cursorIndex !== void 0 ? cursorIndex : -1,
setCursor: setCursorIndex,
predicate: searchPredicate,
loop: true
});
return /*#__PURE__*/React.createElement(Menu, __assign({}, props));
};
});