@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
66 lines • 3.85 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import InternalIcon from '../../icon/internal';
import Tooltip from '../../internal/components/tooltip';
import { registerTooltip } from '../../internal/components/tooltip/registry';
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 [showPopover, setShowPopover] = useState(false);
const textRef = useRef(null);
const popoverContent = (React.createElement(Tooltip, { trackRef: textRef, value: item.text, size: "medium", onDismiss: () => setShowPopover(false) }));
useEffect(() => {
if (showPopover) {
return registerTooltip(() => {
setShowPopover(false);
});
}
}, [showPopover]);
return (React.createElement(React.Fragment, null,
React.createElement(Item, Object.assign({ ref: textRef, isLast: isLast, onFocus: () => {
setShowPopover(true);
}, onBlur: () => setShowPopover(false), onMouseEnter: () => {
setShowPopover(true);
}, onMouseLeave: () => setShowPopover(false), anchorAttributes: anchorAttributes }, itemAttributes), children),
showPopover && popoverContent));
};
const Item = React.forwardRef((_a, ref) => {
var { anchorAttributes, children, isLast } = _a, itemAttributes = __rest(_a, ["anchorAttributes", "children", "isLast"]);
return isLast ? (React.createElement("span", Object.assign({ ref: ref, className: styles.anchor }, itemAttributes), children)) : (React.createElement("a", Object.assign({ 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, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes), breadcrumbItem)),
!isLast ? (React.createElement("span", { className: styles.icon },
React.createElement(InternalIcon, { name: "angle-right" }))) : null));
}
//# sourceMappingURL=item.js.map