@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
67 lines • 4.39 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import customCssProps from '../../internal/generated/custom-css-properties';
import { useGlobalScrollPadding } from '../utils/use-global-scroll-padding';
import { useAppLayoutInternals } from './context';
import testutilStyles from '../test-classes/styles.css.js';
import styles from './styles.css.js';
/**
* The layoutElement ref will be used by the resize observers to calculate the offset from
* the top and bottom of the viewport based on the header and footer elements. This is to
* ensure the Layout component minimum height will fill 100% of the viewport less those
* cumulative heights.
*/
export default function Layout({ children }) {
const { breadcrumbs, contentHeader, contentType, disableBodyScroll, disableContentPaddings, drawersTriggerCount, footerHeight, hasNotificationsContent, hasOpenDrawer, headerHeight, isBackgroundOverlapDisabled, isMobile, navigationOpen, layoutElement, layoutWidth, mainOffsetLeft, maxContentWidth, minContentWidth, navigationHide, notificationsHeight, __embeddedViewMode, splitPanelPosition, splitPanelDisplayed, } = useAppLayoutInternals();
useGlobalScrollPadding(headerHeight);
// Determine the first content child so the gap will vertically align with the trigger buttons
const contentFirstChild = getContentFirstChild(breadcrumbs, contentHeader, hasNotificationsContent, isMobile);
// Content gaps on the left and right are used with the minmax function in the CSS grid column definition
const hasContentGapLeft = navigationOpen || navigationHide;
const hasContentGapRight = drawersTriggerCount === 0 || hasOpenDrawer;
return (React.createElement("main", { className: clsx(styles.layout, styles[`content-first-child-${contentFirstChild}`], styles[`content-type-${contentType}`], styles[`split-panel-position-${splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom'}`], {
[styles['disable-body-scroll']]: disableBodyScroll,
[testutilStyles['disable-body-scroll-root']]: disableBodyScroll,
[styles['disable-content-paddings']]: disableContentPaddings,
[styles['has-breadcrumbs']]: breadcrumbs && !isMobile,
[styles['has-content-gap-left']]: hasContentGapLeft,
[styles['has-content-gap-right']]: hasContentGapRight,
[styles['has-header']]: contentHeader,
[styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,
[styles['has-split-panel']]: splitPanelDisplayed,
[styles['is-overlap-disabled']]: isBackgroundOverlapDisabled,
[styles['is-hide-mobile-toolbar']]: __embeddedViewMode,
[styles['has-left-toggles-gutter']]: !(isMobile || navigationHide || navigationOpen),
[styles['has-right-toggles-gutter']]: !isMobile && !hasContentGapRight,
}, testutilStyles.root), ref: layoutElement, style: {
[customCssProps.headerHeight]: `${headerHeight}px`,
[customCssProps.footerHeight]: `${footerHeight}px`,
[customCssProps.layoutWidth]: `${layoutWidth}px`,
[customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,
...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),
...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),
[customCssProps.notificationsHeight]: `${notificationsHeight}px`,
} }, children));
}
/*
The Notifications, Breadcrumbs, Header, and Main are all rendered in the center
column of the grid layout. Any of these could be the first child to render in the
content area if the previous siblings do not exist. The grid gap before the first
child will be different to ensure vertical alignment with the trigger buttons.
*/
function getContentFirstChild(breadcrumbs, contentHeader, hasNotificationsContent, isMobile) {
let contentFirstChild = 'main';
if (hasNotificationsContent) {
contentFirstChild = 'notifications';
}
else if (breadcrumbs && !isMobile) {
contentFirstChild = 'breadcrumbs';
}
else if (contentHeader) {
contentFirstChild = 'header';
}
return contentFirstChild;
}
//# sourceMappingURL=layout.js.map