@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
36 lines • 2.04 kB
JavaScript
import { __rest } from "tslib";
// 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(_a) {
var { anchors, ariaLabelledby, onFollow, onActiveHrefChange, activeHref = '', __internalRootRef = null, scrollSpyOffset = 0 } = _a, props = __rest(_a, ["anchors", "ariaLabelledby", "onFollow", "onActiveHrefChange", "activeHref", "__internalRootRef", "scrollSpyOffset"]);
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", Object.assign({}, 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