@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
74 lines • 4.03 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { shouldSplitPanelBeForcedToBottom } from '../split-panel/split-panel-forced-position';
export const CONTENT_PADDING = 2 * 24; // space-xl
export function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, activeGlobalDrawersSizes, activeAiDrawerSize, }) {
const activeNavigationWidth = navigationOpen ? navigationWidth : 0;
let resizableSpaceAvailable = placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth - activeAiDrawerSize;
const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);
const availableWidthForSplitPanel = resizableSpaceAvailable - activeDrawerSize;
const splitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({
isMobile,
availableWidthForSplitPanel,
});
const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : (splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom');
const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? (splitPanelSize !== null && splitPanelSize !== void 0 ? splitPanelSize : 0) : 0;
const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);
resizableSpaceAvailable -= sideSplitPanelSize;
const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;
const maxAiDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize + activeAiDrawerSize;
const maxGlobalDrawersSizes = Object.keys(activeGlobalDrawersSizes).reduce((acc, drawerId) => {
return {
...acc,
[drawerId]: resizableSpaceAvailable -
activeDrawerSize -
totalActiveGlobalDrawersSize +
activeGlobalDrawersSizes[drawerId],
};
}, {});
return {
splitPanelPosition: resolvedSplitPanelPosition,
splitPanelForcedPosition,
sideSplitPanelSize,
maxSplitPanelSize,
maxDrawerSize,
maxGlobalDrawersSizes,
totalActiveGlobalDrawersSize,
resizableSpaceAvailable,
maxAiDrawerSize,
};
}
export function computeVerticalLayout({ topOffset, hasVisibleToolbar, toolbarHeight, stickyNotifications, notificationsHeight, }) {
const toolbar = topOffset;
let notifications = topOffset;
let drawers = topOffset;
if (hasVisibleToolbar) {
notifications += toolbarHeight;
drawers += toolbarHeight;
}
let header = notifications;
if (stickyNotifications) {
header += notificationsHeight;
}
return { toolbar, notifications, header, drawers };
}
export function computeSplitPanelOffsets({ hasSplitPanel, splitPanelPosition, placement, splitPanelOpen, splitPanelFullHeight, splitPanelHeaderHeight, }) {
if (!hasSplitPanel || splitPanelPosition !== 'bottom') {
return {
stickyVerticalBottomOffset: placement.insetBlockEnd,
mainContentPaddingBlockEnd: undefined,
};
}
const mainContentBottomOffset = splitPanelOpen ? splitPanelFullHeight : splitPanelHeaderHeight;
return {
stickyVerticalBottomOffset: mainContentBottomOffset + placement.insetBlockEnd,
mainContentPaddingBlockEnd: mainContentBottomOffset,
};
}
export function getDrawerStyles(verticalOffsets, isMobile, placement, activeGlobalBottomDrawerSize = 0) {
var _a;
const drawerTopOffset = isMobile ? verticalOffsets.toolbar : ((_a = verticalOffsets.drawers) !== null && _a !== void 0 ? _a : placement.insetBlockStart);
const drawerHeight = `calc(100vh - ${drawerTopOffset}px - ${placement.insetBlockEnd}px - ${activeGlobalBottomDrawerSize}px)`;
return { drawerTopOffset, drawerHeight };
}
//# sourceMappingURL=compute-layout.js.map