@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
34 lines • 1.84 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useCallback, useEffect, useMemo } from 'react';
import clsx from 'clsx';
import { getBaseProps } from '../internal/base-component/index.js';
import { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events/index';
import useScrollSpy from './use-scroll-spy.js';
import { renderNestedAnchors } from './utils';
import styles from './styles.css.js';
import testUtilsStyles from './test-classes/styles.css.js';
export default function InternalAnchorNavigation({ anchors, ariaLabelledby, onFollow, onActiveHrefChange, activeHref = '', __internalRootRef, scrollSpyOffset = 0, ...props }) {
const baseProps = getBaseProps(props);
const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);
const onFollowHandler = useCallback((anchor, sourceEvent) => {
fireCancelableEvent(onFollow, anchor, sourceEvent);
}, [onFollow]);
const currentActiveHref = useScrollSpy({
hrefs,
scrollSpyOffset,
activeHref,
});
useEffect(() => {
if (currentActiveHref) {
const newActiveAnchor = anchors.find(anchor => anchor.href === currentActiveHref);
fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);
}
}, [onActiveHrefChange, anchors, currentActiveHref]);
return (React.createElement("nav", { ...baseProps, ref: __internalRootRef, "aria-labelledby": ariaLabelledby, className: clsx(baseProps.className, styles.root, testUtilsStyles.root) },
React.createElement("ol", { className: clsx(styles['anchor-list'], testUtilsStyles['anchor-list']) }, renderNestedAnchors(anchors, {
onFollowHandler,
currentActiveHref,
}))));
}
//# sourceMappingURL=internal.js.map