@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
88 lines • 5.75 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
'use client';
import React from 'react';
import { useMergeRefs, warnOnce } from '@awsui/component-toolkit/internal';
import { applyDefaults } from '../app-layout/defaults';
import { useAppLayoutPlacement } from '../app-layout/utils/use-app-layout-placement';
import AppLayoutToolbarInternal from '../app-layout/visual-refresh-toolbar';
import { AppLayoutToolbarPublicContext } from '../app-layout/visual-refresh-toolbar/contexts';
import { useInternalI18n } from '../i18n/context';
import { getBaseProps } from '../internal/base-component';
import useBaseComponent from '../internal/hooks/use-base-component';
import { useControllable } from '../internal/hooks/use-controllable';
import { useMobile } from '../internal/hooks/use-mobile';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import { isDevelopment } from '../internal/is-development';
import { applyDisplayName } from '../internal/utils/apply-display-name';
const AppLayoutToolbar = React.forwardRef(({ contentType = 'default', headerSelector = '#b #h', footerSelector = '#b #f', navigationWidth = 280, toolsWidth = 290, maxContentWidth, minContentWidth, navigationOpen: controlledNavigationOpen, onNavigationChange: controlledOnNavigationChange, analyticsMetadata, ...rest }, ref) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
const isRefresh = useVisualRefresh();
if (!isRefresh) {
throw new Error(`AppLayoutToolbar component is not supported in the Classic theme. Please switch to the Refresh theme. For more details, refer to the documentation.`);
}
if (isDevelopment) {
if (rest.toolsOpen && rest.toolsHide) {
warnOnce('AppLayoutToolbar', `You have enabled both the \`toolsOpen\` prop and the \`toolsHide\` prop. This is not supported. Set \`toolsOpen\` to \`false\` when you set \`toolsHide\` to \`true\`.`);
}
}
const { __internalRootRef } = useBaseComponent('AppLayoutToolbar', {
props: {
contentType,
disableContentPaddings: rest.disableContentPaddings,
navigationWidth,
navigationHide: rest.navigationHide,
toolsHide: rest.toolsHide,
toolsWidth,
maxContentWidth,
minContentWidth,
stickyNotifications: rest.stickyNotifications,
disableContentHeaderOverlap: rest.disableContentHeaderOverlap,
navigationTriggerHide: rest.navigationTriggerHide,
},
metadata: {
drawersCount: (_b = (_a = rest.drawers) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : null,
hasContentHeader: !!rest.contentHeader,
},
}, analyticsMetadata);
const isMobile = useMobile();
const i18n = useInternalI18n('app-layout');
const ariaLabels = {
navigation: i18n('ariaLabels.navigation', (_c = rest.ariaLabels) === null || _c === void 0 ? void 0 : _c.navigation),
navigationClose: i18n('ariaLabels.navigationClose', (_d = rest.ariaLabels) === null || _d === void 0 ? void 0 : _d.navigationClose),
navigationToggle: i18n('ariaLabels.navigationToggle', (_e = rest.ariaLabels) === null || _e === void 0 ? void 0 : _e.navigationToggle),
notifications: i18n('ariaLabels.notifications', (_f = rest.ariaLabels) === null || _f === void 0 ? void 0 : _f.notifications),
tools: i18n('ariaLabels.tools', (_g = rest.ariaLabels) === null || _g === void 0 ? void 0 : _g.tools),
toolsClose: i18n('ariaLabels.toolsClose', (_h = rest.ariaLabels) === null || _h === void 0 ? void 0 : _h.toolsClose),
toolsToggle: i18n('ariaLabels.toolsToggle', (_j = rest.ariaLabels) === null || _j === void 0 ? void 0 : _j.toolsToggle),
drawers: i18n('ariaLabels.drawers', (_k = rest.ariaLabels) === null || _k === void 0 ? void 0 : _k.drawers),
drawersOverflow: i18n('ariaLabels.drawersOverflow', (_l = rest.ariaLabels) === null || _l === void 0 ? void 0 : _l.drawersOverflow),
drawersOverflowWithBadge: i18n('ariaLabels.drawersOverflowWithBadge', (_m = rest.ariaLabels) === null || _m === void 0 ? void 0 : _m.drawersOverflowWithBadge),
};
const { navigationOpen: defaultNavigationOpen, ...restDefaults } = applyDefaults(contentType, { maxContentWidth, minContentWidth }, isRefresh);
const [navigationOpen = false, setNavigationOpen] = useControllable(controlledNavigationOpen, controlledOnNavigationChange, isMobile ? false : defaultNavigationOpen, { componentName: 'AppLayoutToolbar', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' });
const onNavigationChange = (event) => {
setNavigationOpen(event.detail.open);
controlledOnNavigationChange === null || controlledOnNavigationChange === void 0 ? void 0 : controlledOnNavigationChange(event);
};
const [rootRef, placement] = useAppLayoutPlacement(headerSelector, footerSelector);
// This re-builds the props including the default values
const props = {
contentType,
navigationWidth,
toolsWidth,
navigationOpen,
onNavigationChange,
...restDefaults,
...rest,
ariaLabels,
placement,
};
const baseProps = getBaseProps(rest);
return (React.createElement(AppLayoutToolbarPublicContext.Provider, { value: true },
React.createElement("div", { ref: useMergeRefs(__internalRootRef, rootRef), ...baseProps },
React.createElement(AppLayoutToolbarInternal, { ref: ref, ...props }))));
});
applyDisplayName(AppLayoutToolbar, 'AppLayoutToolbar');
export default AppLayoutToolbar;
//# sourceMappingURL=index.js.map