@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
63 lines • 2.99 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useAppLayoutFlagEnabled } from '../../../app-layout/utils/feature-flags';
import { AppLayoutVisibilityContext, BreadcrumbsSlotContext, } from '../../../app-layout/visual-refresh-toolbar/contexts';
import { metrics } from '../../metrics';
import { awsuiPluginsInternal } from '../api';
function useSetGlobalBreadcrumbsImplementation({ __disableGlobalization, ...props }) {
var _a, _b;
const { isInToolbar } = (_a = useContext(BreadcrumbsSlotContext)) !== null && _a !== void 0 ? _a : {};
const isLayoutVisible = (_b = useContext(AppLayoutVisibilityContext)) !== null && _b !== void 0 ? _b : true;
const registrationRef = useRef();
const [registered, setRegistered] = useState(false);
useEffect(() => {
if (isInToolbar || __disableGlobalization || !isLayoutVisible) {
return;
}
const registration = awsuiPluginsInternal.breadcrumbs.registerBreadcrumbs(props, isRegistered => {
setRegistered(isRegistered !== null && isRegistered !== void 0 ? isRegistered : true);
if (isRegistered) {
const breadcrumbs = props.items.map(item => item.text).join(' > ');
metrics.sendOpsMetricObject('awsui-global-breadcrumbs-used', { breadcrumbs });
}
});
registrationRef.current = registration;
return () => {
registration.cleanup();
};
// subsequent prop changes are handled by another effect
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isInToolbar, __disableGlobalization, isLayoutVisible]);
useLayoutEffect(() => {
var _a;
(_a = registrationRef.current) === null || _a === void 0 ? void 0 : _a.update(props);
});
return registered;
}
export function useSetGlobalBreadcrumbs(props) {
// avoid additional side effects when this feature is not active
if (!useAppLayoutFlagEnabled()) {
return false;
}
// getGlobalFlag() value does not change without full page reload
// eslint-disable-next-line react-hooks/rules-of-hooks
return useSetGlobalBreadcrumbsImplementation(props);
}
export function useGetGlobalBreadcrumbs(enabled) {
const [discoveredBreadcrumbs, setDiscoveredBreadcrumbs] = useState(null);
useEffect(() => {
if (!enabled) {
return;
}
const unregisterAppLayout = awsuiPluginsInternal.breadcrumbs.registerAppLayout(breadcrumbs => {
setDiscoveredBreadcrumbs(breadcrumbs);
});
return () => {
unregisterAppLayout === null || unregisterAppLayout === void 0 ? void 0 : unregisterAppLayout();
setDiscoveredBreadcrumbs(null);
};
}, [enabled]);
return discoveredBreadcrumbs;
}
//# sourceMappingURL=use-global-breadcrumbs.js.map