@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
103 lines • 7.7 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useState } from 'react';
import clsx from 'clsx';
import { useUniqueId } from '@awsui/component-toolkit/internal';
import { isLinkItem } from '../../../button-dropdown/utils/utils';
import InternalIcon from '../../../icon/internal';
import { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';
import { spinWhenOpen } from '../../../internal/styles/motion/utils';
import { useNavigate } from './router';
import styles from '../../styles.css.js';
const ListItem = ({ children, startIcon, endIcon }) => {
return (React.createElement(React.Fragment, null,
startIcon && React.createElement("span", { className: styles['overflow-menu-list-item-icon'] }, startIcon),
React.createElement("span", { className: styles['overflow-menu-list-item-text'] }, children),
endIcon && endIcon));
};
const LinkItem = forwardRef(({ children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }, ref) => {
const anchorTarget = target !== null && target !== void 0 ? target : (external ? '_blank' : undefined);
const anchorRel = rel !== null && rel !== void 0 ? rel : (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);
const role = !href ? 'button' : undefined;
return (React.createElement("a", { ref: ref, onClick: onClick, className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-link'], context && styles[`overflow-menu-control-${context}`]), role: role, tabIndex: 0, href: href, target: anchorTarget, rel: anchorRel, ...(testId ? { 'data-testid': testId } : {}) },
React.createElement(ListItem, { startIcon: startIcon, endIcon: endIcon }, children)));
});
const ButtonItem = forwardRef(({ children, startIcon, endIcon, onClick, testId }, ref) => {
return (React.createElement("button", { ref: ref, className: styles['overflow-menu-control'], onClick: onClick, ...(typeof testId === 'string' ? { 'data-testid': testId } : {}) },
React.createElement(ListItem, { startIcon: startIcon, endIcon: endIcon }, children)));
});
const NavigationItem = forwardRef(({ startIcon, children, index, testId, ...definition }, ref) => {
const navigate = useNavigate();
return (React.createElement(ButtonItem, { ref: ref, startIcon: startIcon, endIcon: React.createElement(InternalIcon, { name: "angle-right" }), testId: testId, onClick: () => navigate('dropdown-menu', {
definition,
headerText: definition.text || definition.title,
headerSecondaryText: definition.description,
utilityIndex: index,
}) }, children));
});
const ExpandableItem = ({ children, onItemClick, ...definition }) => {
const [expanded, setExpanded] = useState(false);
const headerId = useUniqueId('overflow-menu-item');
return (React.createElement(React.Fragment, null,
React.createElement("button", { className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger']), onClick: () => setExpanded(value => !value), "aria-expanded": expanded },
React.createElement(ListItem, { endIcon: React.createElement("span", { className: spinWhenOpen(styles, 'icon', expanded) },
React.createElement(InternalIcon, { name: "caret-down-filled" })) },
React.createElement("span", { id: headerId }, children))),
expanded && (React.createElement("ul", { className: clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu']), "aria-labelledby": headerId }, definition.items.map((item, index) => {
const isGroup = typeof item.items !== 'undefined';
return (React.createElement("li", { key: index, className: clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`]) }, dropdownComponentFactory(item, isGroup, onItemClick)));
})))));
};
function utilityComponentFactory(utility, index, ref) {
const label = utility.text || utility.title;
const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;
const startIcon = hasIcon && (React.createElement(InternalIcon, { name: utility.iconName, url: utility.iconUrl, alt: utility.iconAlt, svg: utility.iconSvg }));
switch (utility.type) {
case 'button': {
const handleClick = (event) => {
var _a;
if (Boolean(utility.href) && isPlainLeftClick(event)) {
fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);
}
fireCancelableEvent(utility.onClick, {}, event);
(_a = utility.onClose) === null || _a === void 0 ? void 0 : _a.call(utility);
};
const content = (React.createElement(React.Fragment, null,
label,
utility.external && (React.createElement(React.Fragment, null,
' ',
React.createElement("span", { "aria-label": utility.externalIconAriaLabel, role: utility.externalIconAriaLabel ? 'img' : undefined },
React.createElement(InternalIcon, { name: "external", size: "normal" }))))));
if (!utility.href) {
return (React.createElement(ButtonItem, { ref: ref, startIcon: startIcon, onClick: handleClick, testId: `__${index}` }, content));
}
return (React.createElement(LinkItem, { ref: ref, startIcon: startIcon, href: utility.href, external: utility.external, target: utility.target, rel: utility.rel, testId: `__${index}`, onClick: handleClick }, content));
}
case 'menu-dropdown': {
return (React.createElement(NavigationItem, { ref: ref, startIcon: startIcon, index: index, ...utility, testId: `__${index}` }, label));
}
}
}
function dropdownComponentFactory(item, expandable, onItemClick) {
const label = item.text;
const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;
const isLink = isLinkItem(item);
const startIcon = hasIcon && (React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, alt: item.iconAlt, svg: item.iconSvg }));
if (expandable) {
return (React.createElement(ExpandableItem, { ...item, onItemClick: onItemClick }, label));
}
return (React.createElement(LinkItem, { startIcon: startIcon, href: isLink ? item.href : undefined, external: isLink ? item.external : undefined, context: "dropdown-menu", testId: item.id, onClick: event => onItemClick(event, item) },
label,
isLink && item.external && (React.createElement(React.Fragment, null,
' ',
React.createElement("span", { "aria-label": item.externalIconAriaLabel, role: item.externalIconAriaLabel ? 'img' : undefined },
React.createElement(InternalIcon, { name: "external", size: "normal" }))))));
}
export const UtilityMenuItem = forwardRef(({ index, ...props }, ref) => {
return (React.createElement("li", { className: clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`]) }, utilityComponentFactory(props, index, ref)));
});
export const SubmenuItem = (props) => {
const expandable = typeof props.items !== 'undefined';
return (React.createElement("li", { className: clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-submenu`], expandable && styles[`overflow-menu-list-item-expandable`]) }, dropdownComponentFactory(props, expandable, props.onClick)));
};
//# sourceMappingURL=menu-item.js.map