@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
211 lines (210 loc) • 8.29 kB
JavaScript
import { __assign } from "tslib";
import { useCallback, useState } from 'react';
import { useHighlightedOption } from '../../internal/components/options-list/utils/use-highlight-option';
import { useOpenState } from '../../internal/components/options-list/utils/use-open-state';
import { fireKeyboardEvent, fireNonCancelableEvent } from '../../internal/events';
import { KeyCode } from '../../internal/keycode';
import { getHighlightableItems, isItemGroup, isLinkItem } from './utils';
export var useButtonDropdown = function (_a) {
var items = _a.items, onItemClick = _a.onItemClick, hasExpandableGroups = _a.hasExpandableGroups, _b = _a.isInRestrictedView, isInRestrictedView = _b === void 0 ? false : _b, _c = _a.isChild, isChild = _c === void 0 ? false : _c, usingMouse = _a.usingMouse;
var _d = useState(), expandedItem = _d[0], setExpandedItem = _d[1];
var _e = useState(!isChild), allowKeyboardNavigation = _e[0], setAllowKeyboardNavigation = _e[1];
var _f = useHighlightedOption({
options: getHighlightableItems(items, hasExpandableGroups, isInRestrictedView, expandedItem),
isInteractive: function (item) {
return !!item && !item.disabled;
}
}), highlightedItem = _f.highlightedOption, moveHighlight = _f.moveHighlight, resetHighlight = _f.resetHighlight, goHome = _f.goHome, setHighlightedIndex = _f.setHighlightedIndex, highlightedIndex = _f.highlightedIndex;
var _g = useOpenState({
resetHighlight: resetHighlight
}), isOpen = _g.isOpen, closeDropdown = _g.closeDropdown, toggleDropdown = _g.toggleDropdown;
var closeExpanded = function () {
setExpandedItem(undefined);
};
var activateGroup = function (group) {
if (expandedItem && isInRestrictedView) {
var expandedIndex = items.indexOf(expandedItem);
if (highlightedIndex > expandedIndex) {
var newHighlightedIndex = highlightedIndex - expandedItem.items.length;
setHighlightedIndex(newHighlightedIndex);
}
}
setExpandedItem(expandedItem !== group ? group : undefined);
};
var onItemActivate = function (item, event) {
if (isItemGroup(item)) {
activateGroup(item);
}
else {
if (onItemClick) {
fireNonCancelableEvent(onItemClick, __assign({ id: item.id || 'undefined' }, (isLinkItem(item) && { event: event })));
}
closeDropdown();
}
};
var verticalNavigation = function (direction, isSecondaryFocus, e) {
if (!isOpen && !highlightedItem) {
return;
}
if (!isChild && expandedItem && allowKeyboardNavigation && !isInRestrictedView) {
setExpandedItem(undefined);
}
if (isChild && !allowKeyboardNavigation) {
toggleDropdown();
return;
}
if (!isSecondaryFocus) {
moveHighlight(direction);
}
e.preventDefault();
};
var openAndSelectFirst = function (e) {
toggleDropdown();
moveHighlight(1);
e.preventDefault();
};
var actOnMobileExpandableDropdown = function (e, isSecondaryFocus) {
if (!highlightedItem) {
openAndSelectFirst(e);
return;
}
if (isSecondaryFocus) {
closeDropdown();
closeExpanded();
return;
}
if (highlightedItem && !isLinkItem(highlightedItem)) {
onItemActivate(highlightedItem, e);
}
};
var toggleExpandableCategory = function (e) {
if (!highlightedItem) {
setAllowKeyboardNavigation(!allowKeyboardNavigation);
openAndSelectFirst(e);
}
else {
onItemActivate(highlightedItem, e);
}
};
var actOnParentDropdown = function (e, isSecondaryFocus) {
if (!highlightedItem) {
if (isOpen) {
toggleDropdown();
}
else {
openAndSelectFirst(e);
}
return;
}
if (isSecondaryFocus) {
setAllowKeyboardNavigation(!allowKeyboardNavigation);
resetHighlight();
closeDropdown();
closeExpanded();
return;
}
if (isItemGroup(highlightedItem)) {
setAllowKeyboardNavigation(!allowKeyboardNavigation);
}
if (highlightedItem && !isLinkItem(highlightedItem)) {
onItemActivate(highlightedItem, e);
}
};
var activate = function (e, isSecondaryFocus) {
usingMouse.current = false;
if (!highlightedItem || !isLinkItem(highlightedItem)) {
e.preventDefault();
}
if (isInRestrictedView) {
actOnMobileExpandableDropdown(e, isSecondaryFocus);
return;
}
if (isChild) {
toggleExpandableCategory(e);
return;
}
actOnParentDropdown(e, isSecondaryFocus);
};
var useKeyboardDownHandler = function (moveHighlight) {
return useCallback(function (e) {
var isCategoryHeader = !!expandedItem && expandedItem === highlightedItem;
var isSecondaryFocus = !isInRestrictedView && isCategoryHeader;
switch (e.detail.keyCode) {
case KeyCode.down: {
verticalNavigation(1, isSecondaryFocus, e);
break;
}
case KeyCode.up: {
verticalNavigation(-1, isSecondaryFocus, e);
break;
}
case KeyCode.space: {
usingMouse.current = false;
e.preventDefault();
break;
}
case KeyCode.enter: {
activate(e, isSecondaryFocus);
break;
}
case KeyCode.left:
case KeyCode.right: {
if (highlightedItem && isItemGroup(highlightedItem)) {
setAllowKeyboardNavigation(!allowKeyboardNavigation);
onItemActivate(highlightedItem, e);
}
else if (isChild) {
moveHighlight(1);
setAllowKeyboardNavigation(!allowKeyboardNavigation);
}
e.preventDefault();
break;
}
case KeyCode.escape: {
toggleDropdown();
closeExpanded();
e.preventDefault();
break;
}
case KeyCode.tab: {
closeDropdown();
closeExpanded();
break;
}
}
}, [moveHighlight, highlightedItem, usingMouse]);
};
var useKeyboardUpHandler = function (moveHighlight) {
return useCallback(function (e) {
var isCategoryHeader = !!expandedItem && expandedItem === highlightedItem;
var isSecondaryFocus = !isInRestrictedView && isCategoryHeader;
switch (e.detail.keyCode) {
case KeyCode.space: {
activate(e, isSecondaryFocus);
break;
}
}
}, [moveHighlight, highlightedItem, usingMouse]);
};
var handleKeyDown = useKeyboardDownHandler(moveHighlight);
var onKeyDown = function (event) { return fireKeyboardEvent(handleKeyDown, event); };
var handleKeyUp = useKeyboardUpHandler(moveHighlight);
var onKeyUp = function (event) { return fireKeyboardEvent(handleKeyUp, event); };
var onTriggerClick = function () {
setAllowKeyboardNavigation(true);
};
return {
isOpen: isOpen,
highlightedItem: highlightedItem,
handleKeyDown: handleKeyDown,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onItemActivate: onItemActivate,
expandedItem: expandedItem,
toggleDropdown: toggleDropdown,
closeExpanded: closeExpanded,
resetHighlight: resetHighlight,
goHome: goHome,
onTriggerClick: onTriggerClick
};
};