@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
94 lines • 9.18 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef } from 'react';
import { Transition } from 'react-transition-group';
import clsx from 'clsx';
import { useResizeObserver } from '@awsui/component-toolkit/internal';
import { createWidgetizedComponent } from '../../../internal/widgets';
import { ToolbarSkeleton } from '../skeleton/skeleton-parts';
import { ToolbarSlot } from '../skeleton/slots';
import { ToolbarBreadcrumbsSection, ToolbarContainer } from '../skeleton/toolbar-container';
import { DrawerTriggers } from './drawer-triggers';
import TriggerButton from './trigger-button';
import sharedStyles from '../../resize/styles.css.js';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from './styles.css.js';
export function AppLayoutToolbarImplementation({ appLayoutInternals,
// the value could be undefined if this component is loaded as a widget by a different app layout version
// not testable in a single-version setup
toolbarProps = {}, }) {
var _a, _b, _c;
const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, setToolbarHeight, aiDrawer, activeAiDrawer, onActiveAiDrawerChange, } = appLayoutInternals;
const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, globalDrawersFocusControl, globalDrawers, activeGlobalDrawersIds, onActiveGlobalDrawersChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, expandedDrawerId, setExpandedDrawerId, aiDrawerFocusRef, onActiveGlobalBottomDrawerChange, activeGlobalBottomDrawerId, bottomDrawersFocusRef, bottomDrawers, } = toolbarProps;
const drawerExpandedMode = !!expandedDrawerId;
const ref = useRef(null);
const aiDrawerTransitionRef = useRef(null);
const activeAiDrawerId = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.id;
useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));
useEffect(() => {
return () => {
setToolbarHeight(0);
};
// unmount effect only
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const anyPanelOpenInMobile = !!isMobile &&
(!!activeDrawerId ||
!!(activeGlobalDrawersIds === null || activeGlobalDrawersIds === void 0 ? void 0 : activeGlobalDrawersIds.length) ||
!!activeAiDrawerId ||
!!activeGlobalBottomDrawerId ||
(!!navigationOpen && !!hasNavigation));
useEffect(() => {
if (anyPanelOpenInMobile) {
document.body.classList.add(styles['block-body-scroll']);
}
else {
document.body.classList.remove(styles['block-body-scroll']);
}
return () => {
document.body.classList.remove(styles['block-body-scroll']);
};
}, [anyPanelOpenInMobile]);
const navLandmarkAttributes = navigationOpen
? { role: 'presentation' }
: { role: 'navigation', 'aria-label': ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation };
return (React.createElement(ToolbarSlot, { ref: ref, className: clsx(styles['universal-toolbar'], (aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger) && styles['with-ai-drawer'], testutilStyles.toolbar, {
[testutilStyles['mobile-bar']]: isMobile,
}), style: {
insetBlockStart: verticalOffsets.toolbar,
} },
React.createElement(Transition, { in: !!((aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger) && !activeAiDrawerId), timeout: { enter: 0, exit: 165 }, mountOnEnter: true, unmountOnExit: true, nodeRef: aiDrawerTransitionRef }, state => {
var _a, _b, _c;
return (React.createElement("div", { className: clsx(!!((_a = aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger) === null || _a === void 0 ? void 0 : _a.customIcon) && styles['universal-toolbar-ai-custom'], [
sharedStyles['with-motion-horizontal'],
]), style: {
opacity: ['entering', 'exiting'].includes(state) ? 0 : 1,
} },
React.createElement(TriggerButton, { ariaLabel: (_b = aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.triggerButton, ariaExpanded: !!activeAiDrawerId, iconName: aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger.iconName, iconSvg: aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger.iconSvg, customSvg: aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger.customIcon, className: testutilStyles['ai-drawer-toggle'], onClick: () => {
var _a;
if (setExpandedDrawerId) {
setExpandedDrawerId(null);
}
onActiveAiDrawerChange === null || onActiveAiDrawerChange === void 0 ? void 0 : onActiveAiDrawerChange((_a = aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.id) !== null && _a !== void 0 ? _a : null, { initiatedByUserAction: true });
}, ref: aiDrawerFocusRef, selected: !drawerExpandedMode && !!activeAiDrawerId, disabled: anyPanelOpenInMobile, variant: ((_c = aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger) === null || _c === void 0 ? void 0 : _c.customIcon) ? 'custom' : 'circle', hasTooltip: true, testId: `awsui-app-layout-trigger-${aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.id}`, isForPreviousActiveDrawer: true })));
}),
React.createElement(ToolbarContainer, { hasAiDrawer: !!(aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger) },
hasNavigation && (React.createElement("nav", { ...navLandmarkAttributes, className: clsx(styles['universal-toolbar-nav']) },
React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: !drawerExpandedMode && navigationOpen, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => {
if (setExpandedDrawerId) {
setExpandedDrawerId(null);
}
if (navigationOpen && expandedDrawerId) {
return;
}
onNavigationToggle === null || onNavigationToggle === void 0 ? void 0 : onNavigationToggle(!navigationOpen);
}, ref: navigationFocusRef, selected: !drawerExpandedMode && navigationOpen, disabled: anyPanelOpenInMobile }))),
(breadcrumbs || discoveredBreadcrumbs) && (React.createElement(ToolbarBreadcrumbsSection, { ownBreadcrumbs: appLayoutInternals.breadcrumbs, discoveredBreadcrumbs: appLayoutInternals.discoveredBreadcrumbs, includeTestUtils: true })),
((drawers === null || drawers === void 0 ? void 0 : drawers.length) ||
(globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.length) ||
(bottomDrawers === null || bottomDrawers === void 0 ? void 0 : bottomDrawers.length) ||
(hasSplitPanel && (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed))) && (React.createElement("div", { className: clsx(styles['universal-toolbar-drawers']) },
React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null, drawers: (_b = drawers === null || drawers === void 0 ? void 0 : drawers.filter(item => !!item.trigger)) !== null && _b !== void 0 ? _b : [], drawersFocusRef: drawersFocusRef, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed) ? splitPanelToggleProps : undefined, splitPanelFocusRef: splitPanelFocusRef, onSplitPanelToggle: onSplitPanelToggle, disabled: anyPanelOpenInMobile, globalDrawersFocusControl: globalDrawersFocusControl, bottomDrawersFocusRef: bottomDrawersFocusRef, globalDrawers: (_c = globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.filter(item => !!item.trigger)) !== null && _c !== void 0 ? _c : [], activeGlobalDrawersIds: activeGlobalDrawersIds !== null && activeGlobalDrawersIds !== void 0 ? activeGlobalDrawersIds : [], onActiveGlobalDrawersChange: onActiveGlobalDrawersChange, expandedDrawerId: expandedDrawerId, setExpandedDrawerId: setExpandedDrawerId, bottomDrawers: bottomDrawers, onActiveGlobalBottomDrawerChange: onActiveGlobalBottomDrawerChange, activeGlobalBottomDrawerId: activeGlobalBottomDrawerId }))))));
}
export const AppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation, ToolbarSkeleton);
//# sourceMappingURL=index.js.map