@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
66 lines • 3.96 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import clsx from 'clsx';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { useMobile } from '../../../internal/hooks/use-mobile';
import globalVars from '../../../internal/styles/global-vars';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from '../skeleton/styles.css.js';
const contentTypeCustomWidths = ['dashboard', 'cards', 'table'];
export const useSkeletonSlotsAttributes = (hasToolbar, appLayoutProps, appLayoutState) => {
var _a, _b, _c;
const { isNested, activeDrawerSize, navigationOpen, verticalOffsets, splitPanelOffsets, activeDrawer, expandedDrawerId, activeAiDrawer, activeGlobalBottomDrawerId, } = (_a = appLayoutState.widgetizedState) !== null && _a !== void 0 ? _a : {};
const { contentType, placement, maxContentWidth, navigationWidth, minContentWidth, disableContentPaddings } = appLayoutProps;
const isMobile = useMobile();
const toolsOpen = !!activeDrawer;
const drawerExpandedMode = !!expandedDrawerId;
const aiDrawerExpandedMode = expandedDrawerId === (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.id);
const bottomDrawerExpandedMode = expandedDrawerId === activeGlobalBottomDrawerId;
const anyPanelOpen = navigationOpen || toolsOpen;
const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
const wrapperElAttributes = {
className: clsx(styles.root, testutilStyles.root, {
[styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
[styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
[styles['drawer-expanded-mode']]: drawerExpandedMode,
[styles['ai-drawer-expanded-mode']]: aiDrawerExpandedMode,
[styles['bottom-drawer-expanded-mode']]: bottomDrawerExpandedMode,
}),
style: {
minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
[customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
[customCssProps.navigationWidth]: `${navigationWidth}px`,
[customCssProps.toolsWidth]: `${activeDrawerSize}px`,
},
};
const mainElAttributes = {
className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'], drawerExpandedMode && styles.hidden),
};
const contentWrapperElAttributes = {
className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }),
style: {
paddingBlockEnd: splitPanelOffsets === null || splitPanelOffsets === void 0 ? void 0 : splitPanelOffsets.mainContentPaddingBlockEnd,
...(hasToolbar || !isNested
? {
[globalVars.stickyVerticalTopOffset]: `${(_b = verticalOffsets === null || verticalOffsets === void 0 ? void 0 : verticalOffsets.header) !== null && _b !== void 0 ? _b : 0}px`,
[globalVars.stickyVerticalBottomOffset]: `${(_c = splitPanelOffsets === null || splitPanelOffsets === void 0 ? void 0 : splitPanelOffsets.stickyVerticalBottomOffset) !== null && _c !== void 0 ? _c : 0}px`,
}
: {}),
...(!isMobile ? { minWidth: `${minContentWidth}px` } : {}),
},
};
const contentHeaderElAttributes = {
className: styles['content-header'],
};
const contentElAttributes = {
className: clsx(styles.content, testutilStyles.content),
};
return {
wrapperElAttributes,
mainElAttributes,
contentWrapperElAttributes,
contentHeaderElAttributes,
contentElAttributes,
};
};
//# sourceMappingURL=use-skeleton-slots-attributes.js.map