@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
56 lines • 4.46 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { useCurrentMode } from '@awsui/component-toolkit/internal';
import InternalGrid from '../grid/internal';
import { getBaseProps } from '../internal/base-component';
import customCssProps from '../internal/generated/custom-css-properties';
import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import { highContrastHeaderClassName } from '../internal/utils/content-header-utils';
import styles from './styles.css.js';
import testutilStyles from './test-classes/styles.css.js';
const halfGeckoMaxCssLength = ((1 << 30) - 1) / 120;
// CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).
// Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.
export default function InternalContentLayout(_a) {
var { children, disableOverlap, header, headerVariant = 'default', headerBackgroundStyle, __internalRootRef, maxContentWidth = Number.MAX_VALUE, breadcrumbs, notifications, defaultPadding, secondaryHeader } = _a, rest = __rest(_a, ["children", "disableOverlap", "header", "headerVariant", "headerBackgroundStyle", "__internalRootRef", "maxContentWidth", "breadcrumbs", "notifications", "defaultPadding", "secondaryHeader"]);
const mainRef = useRef(null);
const mergedRef = useMergeRefs(mainRef, __internalRootRef);
const baseProps = getBaseProps(rest);
const isVisualRefresh = useVisualRefresh();
const mode = useCurrentMode(mainRef);
const overlapElement = useDynamicOverlap();
const isOverlapDisabled = !children || disableOverlap;
const contentHeaderClassName = headerVariant === 'high-contrast' && isVisualRefresh ? highContrastHeaderClassName : '';
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.layout, {
[styles['is-overlap-disabled']]: isOverlapDisabled,
[styles['is-visual-refresh']]: isVisualRefresh,
[styles['has-header']]: !!header,
[styles['default-padding']]: !!defaultPadding,
[styles['has-notifications']]: !!notifications,
}), style: {
[customCssProps.contentLayoutMaxContentWidth]: maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,
}, ref: mergedRef }),
React.createElement("div", { className: clsx(styles.background, { [styles['has-default-background']]: !headerBackgroundStyle }, contentHeaderClassName), ref: overlapElement }, headerBackgroundStyle && (React.createElement("div", { className: styles['header-background'], style: {
background: typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,
} }))),
notifications && (React.createElement("div", { className: clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName) }, notifications)),
breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, contentHeaderClassName) }, breadcrumbs)),
header && !secondaryHeader && (React.createElement("div", { className: clsx(styles['header-wrapper'], testutilStyles.header, contentHeaderClassName, {
[styles['with-divider']]: headerVariant === 'divider',
}) }, header)),
header && secondaryHeader && (React.createElement("div", { className: clsx(styles['header-wrapper'], {
[styles['with-divider']]: headerVariant === 'divider',
}) },
React.createElement(InternalGrid, { gridDefinition: [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }] },
React.createElement("div", { className: clsx(testutilStyles.header, contentHeaderClassName) }, header),
React.createElement("div", { className: testutilStyles['secondary-header'] }, secondaryHeader)))),
React.createElement("div", { className: clsx(styles.content, {
[styles['with-divider']]: headerVariant === 'divider',
}) }, children)));
}
//# sourceMappingURL=internal.js.map