react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
234 lines • 8.42 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, useEffect, useMemo, useRef } from 'react';
import { cn } from '@bem-react/classname';
import { useComponentRegistry } from '../../lib/di';
import { mergeRefsAsCallback } from '../../lib/mergeRefs';
import { flatMap } from '../../lib/flatMap';
import { setRefValue } from '../../lib/setRefValue';
import { useIsomorphicLayoutEffect as useLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
import './Menu.css';
export var isGroup = function (item) {
return 'items' in item;
};
export var getTextOfItem = function (item) {
return 'textContent' in item ? item.textContent : item.content;
};
export var isAvailableItem = function (item) {
return item !== undefined && !item.disabled && !item.hidden;
};
/**
* Return flat item array
* @param isRemoveHiddenGroups while `true` ignore items from hidden groups
*/
export var flattenItems = function (items, isRemoveHiddenGroups) {
if (isRemoveHiddenGroups === void 0) {
isRemoveHiddenGroups = false;
}
return flatMap(items, function (item) {
if (!isGroup(item)) {
return item;
}
return item.hidden && isRemoveHiddenGroups ? [] : flattenItems(item.items);
});
};
/**
* Return flat item array without items from hidden groups
*/
export var flattenItemsWithoutEmptyGroups = function (items) {
return flattenItems(items, true);
};
var counter = function (init) {
if (init === void 0) {
init = 0;
}
return function () {
return init++;
};
};
export var cnMenu = cn('Menu');
export var Menu = function (_a) {
var className = _a.className,
items = _a.items,
disabled = _a.disabled,
isRenderHidden = _a.isRenderHidden,
isFocused = _a.isFocused,
setFocus = _a.setFocus,
cursorIndex = _a.cursorIndex,
setCursorIndex = _a.setCursorIndex,
onPick = _a.onPick,
innerRef = _a.innerRef,
cursorRefExternal = _a.cursorRef,
cursorIdRefExternal = _a.cursorIdRef,
addonBefore = _a.addonBefore,
addonAfter = _a.addonAfter,
props = __rest(_a, ["className", "items", "disabled", "isRenderHidden", "isFocused", "setFocus", "cursorIndex", "setCursorIndex", "onPick", "innerRef", "cursorRef", "cursorIdRef", "addonBefore", "addonAfter"]);
var menuRef = useRef(null);
var cursorRef = useRef(null);
var flatItems = useMemo(function () {
return flattenItemsWithoutEmptyGroups(items);
}, [items]);
/**
* Pick item pointed by cursor
*/
var pick = useCallback(function () {
if (disabled || cursorIndex === undefined || onPick === undefined) return;
var item = flatItems[cursorIndex];
if (isAvailableItem(item)) {
onPick(item.id, cursorIndex);
}
}, [disabled, cursorIndex, onPick, flatItems]);
/**
* Set new cursor index
*/
var setupCursor = useCallback(function (index) {
if (disabled || setCursorIndex === undefined) return;
if (index === -1) {
setCursorIndex(index);
} else {
var item = flatItems[index];
if (isAvailableItem(item)) {
setCursorIndex(index);
}
}
}, [disabled, setCursorIndex, flatItems]);
// Scroll to cursor
useLayoutEffect(function () {
var scrollContainer = menuRef.current;
var cursorElm = cursorRef.current;
if (scrollContainer && cursorElm) {
var itemStart = cursorElm.offsetTop - scrollContainer.offsetTop;
var itemEnd = itemStart + cursorElm.offsetHeight;
// If item fully fits in scrollContainer
if (scrollContainer.clientHeight > cursorElm.offsetHeight) {
var viewPortStart = scrollContainer.scrollTop;
var viewPortEnd = viewPortStart + scrollContainer.clientHeight;
if (viewPortStart > itemStart) {
scrollContainer.scrollTop = itemStart;
} else if (viewPortEnd < itemEnd) {
scrollContainer.scrollTop = itemEnd - scrollContainer.clientHeight;
}
} else {
scrollContainer.scrollTop = itemStart;
}
}
}, [cursorIndex]);
// Control cursor by focus
useEffect(function () {
if (isFocused) {
// Find and set cursor
if (cursorIndex === undefined || cursorIndex === -1) {
var cursor = flatItems.findIndex(isAvailableItem);
setupCursor(cursor);
}
} else {
// Reset cursor
setupCursor(-1);
}
// must update only by change `isFocused`
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isFocused]);
var setItemHover = function (hovered, index) {
return function () {
setupCursor(hovered && index !== undefined ? index : -1);
};
};
// Keep actual `cursorIdRefExternal` value
var refToCursorIdRef = useRef();
refToCursorIdRef.current = cursorIdRefExternal;
// Clean `cursorIdRefExternal` with unmount
useEffect(function () {
return function () {
if (refToCursorIdRef.current === undefined) return;
setRefValue(refToCursorIdRef.current, null);
};
}, []);
var cursorIdRef = useRef(null);
// Update `cursorIdRefExternal`
useEffect(function () {
var _a;
// Skip empty ref
if (cursorIdRefExternal === undefined) return;
// Clean when cursor is not exist
if (cursorIndex === -1) {
setRefValue(cursorIdRefExternal, null);
return;
}
var id = (_a = cursorIdRef === null || cursorIdRef === void 0 ? void 0 : cursorIdRef.current) !== null && _a !== void 0 ? _a : null;
setRefValue(cursorIdRefExternal, id);
}, [cursorIdRefExternal, cursorIdRef, cursorIndex, items]);
var renderItems = function (_a, itemIndexCounter, keyIndexCounter, isHiddenAll) {
var Group = _a.Group,
Item = _a.Item;
if (isHiddenAll === void 0) {
isHiddenAll = false;
}
return function (item) {
var keyIndex = keyIndexCounter();
if (isGroup(item)) {
var isHidden_1 = item.hidden || isHiddenAll;
return isHidden_1 && !isRenderHidden ? undefined : ( /*#__PURE__*/React.createElement(Group, {
title: item.title,
key: keyIndex,
hidden: isHidden_1
}, item.items.map(renderItems({
Group: Group,
Item: Item
}, itemIndexCounter, keyIndexCounter, isHidden_1))));
}
var itemIndex = itemIndexCounter();
var isCurrentCursor = cursorIndex !== undefined && cursorIndex === itemIndex;
var isDisabled = item.disabled || disabled;
var isHidden = item.hidden || isHiddenAll;
return isHidden && !isRenderHidden ? undefined : ( /*#__PURE__*/React.createElement(Item, {
idRef: isCurrentCursor ? cursorIdRef : undefined,
raw: item.raw,
addonProps: item.addonProps,
key: keyIndex,
disabled: isDisabled,
hidden: isHidden,
cursor: isCurrentCursor,
innerRef: isCurrentCursor ? mergeRefsAsCallback(cursorRef, cursorRefExternal) : undefined,
onMouseEnter: setItemHover(true, itemIndex),
onMouseLeave: setItemHover(false),
onClick: isAvailableItem(item) ? pick : undefined
}, item.content));
};
};
var itemIndexCounter = counter();
var keyIndexCounter = counter();
var _b = useComponentRegistry(cnMenu()),
Container = _b.Container,
Group = _b.Group,
Item = _b.Item;
return /*#__PURE__*/React.createElement("div", __assign({
role: "listbox",
"aria-disabled": disabled
}, props, {
ref: mergeRefsAsCallback(menuRef, innerRef),
className: cnMenu({
disabled: disabled,
focused: isFocused
}, [className])
}), addonBefore, /*#__PURE__*/React.createElement(Container, null, items.map(renderItems({
Group: Group,
Item: Item
}, itemIndexCounter, keyIndexCounter))), addonAfter);
};
Menu.displayName = cnMenu();