@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
43 lines (42 loc) • 2.61 kB
JavaScript
import React, { useEffect } from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
import Icon from '../../icon';
import ItemsList from '../items-list';
import MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';
var MobileExpandableCategoryElement = function (_a) {
var _b, _c, _d, _e;
var item = _a.item, onItemActivate = _a.onItemActivate, highlightedItem = _a.highlightedItem, expandedItem = _a.expandedItem, disabled = _a.disabled, onItemClick = _a.onItemClick;
var highlighted = item === highlightedItem;
var expanded = item === expandedItem;
var triggerRef = React.useRef(null);
var triggerClickHandler = function (e) {
if (!disabled) {
e.preventDefault();
onItemActivate(item);
}
};
useEffect(function () {
if (highlighted && triggerRef.current) {
triggerRef.current.focus();
}
}, [highlighted]);
var trigger = item.text && (React.createElement("p", { onClick: triggerClickHandler, className: clsx(styles.header, (_b = {}, _b[styles.disabled] = disabled, _b), styles['expandable-header'], (_c = {},
_c[styles.highlighted] = highlighted,
_c[styles['rolled-down']] = expanded,
_c)), "data-testid": item.id, tabIndex: item.disabled ? undefined : highlighted ? 0 : -1, ref: triggerRef },
item.text,
React.createElement("span", { className: clsx(styles['expand-icon'], (_d = {},
_d[styles['expand-icon-up']] = expanded,
_d)) },
React.createElement(Icon, { name: "caret-down-filled" }))));
return (React.createElement("li", { className: clsx(styles.category, styles.expandable, (_e = {},
_e[styles.expanded] = expanded,
_e[styles.disabled] = disabled,
_e[styles.highlighted] = highlighted || expanded,
_e[styles.expandable] = true,
_e)), role: "menuitem", "aria-haspopup": true, "aria-expanded": expanded, "aria-disabled": disabled ? 'true' : undefined },
React.createElement(MobileExpandableGroup, { open: expanded, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, expandedItem: expandedItem, highlightedItem: highlightedItem, categoryDisabled: disabled, onItemClick: onItemClick, hasCategoryHeader: true }))))));
};
export default MobileExpandableCategoryElement;