@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
55 lines • 3.33 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef, useState } from 'react';
import clsx from 'clsx';
import InternalIcon from '../../icon/internal';
import Tooltip from '../../internal/components/tooltip';
import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
import { getEventDetail } from '../utils';
import { FunnelBreadcrumbItem } from './funnel';
import styles from './styles.css.js';
const BreadcrumbItemWithPopover = ({ item, isLast, anchorAttributes, itemAttributes, children, }) => {
const [showTooltip, setShowTooltip] = useState(false);
const textRef = useRef(null);
return (React.createElement(Item, { ref: textRef, isLast: isLast, onFocus: () => {
setShowTooltip(true);
}, onBlur: () => setShowTooltip(false), onMouseEnter: () => {
setShowTooltip(true);
}, onMouseLeave: () => setShowTooltip(false), anchorAttributes: anchorAttributes, ...itemAttributes },
children,
showTooltip && (React.createElement(Tooltip, { trackRef: textRef, value: item.text, size: "medium", onDismiss: () => setShowTooltip(false) }))));
};
const Item = React.forwardRef(({ anchorAttributes, children, isLast, ...itemAttributes }, ref) => {
return isLast ? (React.createElement("span", { ref: ref, className: styles.anchor, ...itemAttributes }, children)) : (React.createElement("a", { ref: ref, className: styles.anchor, ...itemAttributes, ...anchorAttributes }, children));
});
export function BreadcrumbItem({ item, itemIndex, totalCount, onClick, onFollow, isGhost = false, isTruncated = false, }) {
const isLast = itemIndex === totalCount - 1;
const preventDefault = (event) => event.preventDefault();
const onClickHandler = (event) => {
if (isPlainLeftClick(event)) {
fireCancelableEvent(onFollow, getEventDetail(item), event);
}
fireCancelableEvent(onClick, getEventDetail(item), event);
};
const anchorAttributes = {
href: item.href || '#',
onClick: isLast ? preventDefault : onClickHandler,
tabIndex: 0,
};
const itemAttributes = {};
if (isGhost) {
anchorAttributes.tabIndex = -1;
}
if (isLast && !isGhost) {
itemAttributes['aria-current'] = 'page';
itemAttributes['aria-disabled'] = true;
itemAttributes.tabIndex = 0;
itemAttributes.role = 'link';
}
const breadcrumbItem = (React.createElement(FunnelBreadcrumbItem, { className: styles.text, itemIndex: itemIndex, totalCount: totalCount, text: item.text, disableAnalytics: isGhost }));
return (React.createElement("div", { className: clsx(!isGhost && styles.breadcrumb, isGhost && styles['ghost-breadcrumb'], isLast && styles.last) },
isTruncated && !isGhost ? (React.createElement(BreadcrumbItemWithPopover, { item: item, isLast: isLast, anchorAttributes: anchorAttributes, itemAttributes: itemAttributes }, breadcrumbItem)) : (React.createElement(Item, { isLast: isLast, anchorAttributes: anchorAttributes, ...itemAttributes }, breadcrumbItem)),
!isLast ? (React.createElement("span", { className: styles.icon },
React.createElement(InternalIcon, { name: "angle-right" }))) : null));
}
//# sourceMappingURL=item.js.map