@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.57 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 { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
import { getBaseProps } from '../internal/base-component';
import { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';
import { isDevelopment } from '../internal/is-development';
import { createWidgetizedComponent } from '../internal/widgets';
import { Header, NavigationItemsList } from './parts';
import { checkDuplicateHrefs, generateExpandableItemsMapping } from './util';
import styles from './styles.css.js';
export function SideNavigationImplementation({ header, itemsControl, activeHref, items = [], onFollow, onChange, __internalRootRef, ...props }) {
const baseProps = getBaseProps(props);
const isToolbar = useAppLayoutToolbarDesignEnabled();
const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);
if (isDevelopment) {
// This code should be wiped in production anyway.
// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => checkDuplicateHrefs(items), [items]);
}
const onChangeHandler = useCallback((item, expanded) => {
// generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.
fireNonCancelableEvent(onChange, { item, expanded: expanded, expandableParents: parentMap.get(item) });
}, [onChange, parentMap]);
const onFollowHandler = useCallback((item, sourceEvent) => {
fireCancelableEvent(onFollow, item, sourceEvent);
}, [onFollow]);
return (React.createElement("div", { ...baseProps, className: clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar']), ref: __internalRootRef },
header && (React.createElement(Header, { definition: header, activeHref: activeHref, fireChange: onChangeHandler, fireFollow: onFollowHandler })),
itemsControl && React.createElement("div", { className: styles['items-control'] }, itemsControl),
items && (React.createElement("div", { className: styles['list-container'] },
React.createElement(NavigationItemsList, { variant: "root", items: items, fireFollow: onFollowHandler, fireChange: onChangeHandler, activeHref: activeHref })))));
}
export const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);
//# sourceMappingURL=implementation.js.map