@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
85 lines • 2.47 kB
TypeScript
import { AppLayoutPropsWithDefaults } from '../interfaces';
interface HorizontalLayoutInput {
navigationOpen: boolean;
navigationWidth: number;
placement: AppLayoutPropsWithDefaults['placement'];
minContentWidth: number;
activeDrawerSize: number;
splitPanelOpen: boolean;
splitPanelPosition: 'side' | 'bottom' | undefined;
splitPanelSize: number;
isMobile: boolean;
activeGlobalDrawersSizes: Record<string, number>;
activeAiDrawerSize: number;
}
export declare const CONTENT_PADDING: number;
export declare function computeHorizontalLayout({
navigationOpen,
navigationWidth,
placement,
minContentWidth,
activeDrawerSize,
splitPanelOpen,
splitPanelPosition,
splitPanelSize,
isMobile,
activeGlobalDrawersSizes,
activeAiDrawerSize
}: HorizontalLayoutInput): {
splitPanelPosition: "bottom" | "side";
splitPanelForcedPosition: boolean;
sideSplitPanelSize: number;
maxSplitPanelSize: number;
maxDrawerSize: number;
maxGlobalDrawersSizes: Record<string, number>;
totalActiveGlobalDrawersSize: number;
resizableSpaceAvailable: number;
maxAiDrawerSize: number;
};
interface VerticalLayoutInput {
topOffset: number;
hasVisibleToolbar: boolean;
toolbarHeight: number;
stickyNotifications: boolean;
notificationsHeight: number;
}
export interface VerticalLayoutOutput {
toolbar: number;
notifications: number;
header: number;
drawers: number;
}
export declare function computeVerticalLayout({
topOffset,
hasVisibleToolbar,
toolbarHeight,
stickyNotifications,
notificationsHeight
}: VerticalLayoutInput): VerticalLayoutOutput;
interface SplitPanelOffsetInput {
hasSplitPanel: boolean;
placement: AppLayoutPropsWithDefaults['placement'];
splitPanelPosition: 'bottom' | 'side';
splitPanelOpen: boolean;
splitPanelHeaderHeight: number;
splitPanelFullHeight: number;
}
export declare function computeSplitPanelOffsets({
hasSplitPanel,
splitPanelPosition,
placement,
splitPanelOpen,
splitPanelFullHeight,
splitPanelHeaderHeight
}: SplitPanelOffsetInput): {
stickyVerticalBottomOffset: number;
mainContentPaddingBlockEnd: undefined;
} | {
stickyVerticalBottomOffset: number;
mainContentPaddingBlockEnd: number;
};
export declare function getDrawerStyles(verticalOffsets: VerticalLayoutOutput, isMobile: boolean, placement: AppLayoutPropsWithDefaults['placement'], activeGlobalBottomDrawerSize?: number): {
drawerTopOffset: number;
drawerHeight: string;
};
export {};