@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
47 lines • 2.73 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import InternalButtonDropdown from '../button-dropdown/internal';
import InternalIcon from '../icon/internal';
import { DATA_ATTR_FUNNEL_KEY, DATA_ATTR_RESOURCE_TYPE, FUNNEL_KEY_FUNNEL_NAME } from '../internal/analytics/selectors';
import { spinWhenOpen } from '../internal/styles/motion/utils';
import styles from './styles.css.js';
const metadataTypeAttribute = {
[DATA_ATTR_RESOURCE_TYPE]: 'true',
};
export const AllItemsDropdown = ({ items, onItemClick, onItemFollow }) => {
var _a;
return (React.createElement(React.Fragment, null,
React.createElement(InternalButtonDropdown, { items: items.map((item, index) => {
const isCurrentBreadcrumb = index === items.length - 1;
return {
id: index.toString(),
text: item.text,
href: isCurrentBreadcrumb ? undefined : item.href,
isCurrentBreadcrumb,
};
}), customTriggerBuilder: getDropdownTrigger((_a = items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.text), linkStyle: true, fullWidth: true, onItemClick: onItemClick, onItemFollow: onItemFollow, analyticsMetadataTransformer: metadata => {
var _a, _b;
if ((_a = metadata.detail) === null || _a === void 0 ? void 0 : _a.id) {
delete metadata.detail.id;
}
if ((_b = metadata.detail) === null || _b === void 0 ? void 0 : _b.position) {
metadata.detail.position = `${parseInt(metadata.detail.position, 10) + 1}`;
}
return metadata;
} }),
items.length > 1 && (React.createElement("span", { className: styles.hidden, ...metadataTypeAttribute }, items[1].text))));
};
const getDropdownTrigger = (currentPage) => ({ ariaLabel, triggerRef, testUtilsClass, isOpen, onClick }) => {
const metadataAttributes = {
[DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_FUNNEL_NAME,
};
return (React.createElement("button", { ref: triggerRef, ...metadataAttributes, className: clsx(styles['collapsed-button'], testUtilsClass), onClick: event => {
event.preventDefault();
onClick();
}, "aria-expanded": isOpen, "aria-haspopup": true, "aria-label": ariaLabel, formAction: "none" },
React.createElement(InternalIcon, { name: "caret-down-filled", className: spinWhenOpen(styles, 'button-icon', isOpen) }),
React.createElement("span", null, currentPage)));
};
//# sourceMappingURL=all-items-dropdown.js.map