@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
43 lines • 3.61 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 { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import VisualContext from '../../../internal/components/visual-context';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { AppLayoutAfterMainSlot, AppLayoutBeforeMainSlot, AppLayoutBottomContentSlot, AppLayoutTopContentSlot, } from '../internal';
import { isWidgetReady } from '../state/invariants';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from './styles.css.js';
const componentAnalyticsMetadata = {
name: 'awsui.AppLayoutToolbar',
label: {
selector: 'h1',
root: 'body',
},
};
export const SkeletonLayout = ({ registered, appLayoutProps, appLayoutState, toolbarProps, skeletonSlotsAttributes, }) => {
var _a, _b, _c, _d, _e;
const { contentHeader, content, navigationWidth } = appLayoutProps;
const mergedProps = {
toolbarProps,
appLayoutProps,
appLayoutState,
};
const { wrapperElAttributes, mainElAttributes, contentWrapperElAttributes, contentHeaderElAttributes, contentElAttributes, } = skeletonSlotsAttributes;
const isWidgetLoaded = isWidgetReady(appLayoutState);
return (React.createElement(VisualContext, { contextName: "app-layout-toolbar" },
React.createElement("div", { ...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }), ref: appLayoutState.rootRef, "data-awsui-app-layout-widget-loaded": isWidgetLoaded, ...wrapperElAttributes, className: (_a = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.className) !== null && _a !== void 0 ? _a : clsx(styles.root, testutilStyles.root), style: (_b = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.style) !== null && _b !== void 0 ? _b : {
blockSize: `calc(100vh - ${appLayoutProps.placement.insetBlockStart + appLayoutProps.placement.insetBlockEnd}px)`,
[customCssProps.navigationWidth]: `${navigationWidth}px`,
} },
React.createElement(AppLayoutBeforeMainSlot, { ...mergedProps }),
React.createElement("main", { ...mainElAttributes, className: (_c = mainElAttributes === null || mainElAttributes === void 0 ? void 0 : mainElAttributes.className) !== null && _c !== void 0 ? _c : styles['main-landmark'] },
React.createElement(AppLayoutTopContentSlot, { ...mergedProps }),
React.createElement("div", { ...contentWrapperElAttributes, className: (_d = contentWrapperElAttributes === null || contentWrapperElAttributes === void 0 ? void 0 : contentWrapperElAttributes.className) !== null && _d !== void 0 ? _d : clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings }) },
contentHeader && React.createElement("div", { ...contentHeaderElAttributes }, contentHeader),
React.createElement("div", { ...contentElAttributes, className: (_e = contentElAttributes === null || contentElAttributes === void 0 ? void 0 : contentElAttributes.className) !== null && _e !== void 0 ? _e : testutilStyles.content }, registered ? content : null)),
React.createElement(AppLayoutBottomContentSlot, { ...mergedProps })),
React.createElement(AppLayoutAfterMainSlot, { ...mergedProps }))));
};
//# sourceMappingURL=index.js.map