@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
23 lines • 1.61 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useCallback } from 'react';
import clsx from 'clsx';
import { isPlainLeftClick } from '../../internal/events';
import { checkSafeUrl } from '../../internal/utils/check-safe-url';
import styles from '../styles.css.js';
import testUtilsStyles from '../test-classes/styles.css.js';
export const AnchorItem = ({ anchor, onFollow, isActive, index, children }) => {
checkSafeUrl('AnchorNavigation', anchor.href);
const onClick = useCallback((event) => {
if (isPlainLeftClick(event)) {
onFollow(anchor, event);
}
}, [onFollow, anchor]);
const activeItemClasses = clsx(styles['anchor-item--active'], testUtilsStyles['anchor-item--active']);
return (React.createElement("li", { "data-itemid": `anchor-item-${index + 1}`, className: clsx(styles['anchor-item'], isActive && activeItemClasses) },
React.createElement("a", { onClick: onClick, className: clsx(styles['anchor-link'], testUtilsStyles['anchor-link'], isActive && styles['anchor-link--active']), ...(isActive ? { 'aria-current': true } : {}), href: anchor.href },
React.createElement("span", { className: clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text']), style: { paddingInlineStart: `${anchor.level * 16 + 2}px` } }, anchor.text),
anchor.info && (React.createElement("span", { className: clsx(styles['anchor-link-info'], testUtilsStyles['anchor-link-info']) }, anchor.info))),
children));
};
//# sourceMappingURL=index.js.map