@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
48 lines • 4.33 kB
JavaScript
// 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 { createWidgetizedComponent } from '../../../internal/widgets';
import { ActiveDrawersContext } from '../../utils/visibility-context';
import { AppLayoutGlobalAiDrawerImplementation } from '../drawer/global-ai-drawer';
import { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';
import { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';
import { isWidgetReady } from '../state/invariants';
import { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../toolbar';
import sharedStyles from '../../resize/styles.css.js';
import styles from '../skeleton/styles.css.js';
export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, appLayoutProps }) => {
const wasAiDrawerOpenRef = useRef(false);
if (!isWidgetReady(appLayoutState)) {
return (React.createElement(BeforeMainSlotSkeleton, { toolbarProps: toolbarProps, appLayoutProps: appLayoutProps, appLayoutState: appLayoutState }));
}
const { activeDrawer, navigationOpen, navigation, expandedDrawerId, setExpandedDrawerId, navigationAnimationDisabled, activeAiDrawerId, aiDrawerExpandedMode, aiDrawer, activeAiDrawerSize, minAiDrawerSize, maxAiDrawerSize, onActiveAiDrawerResize, aiDrawerFocusControl, ariaLabels, isMobile, drawersOpenQueue, onActiveAiDrawerChange, activeAiDrawer, bottomDrawerReportedSize, } = appLayoutState.widgetizedState;
const drawerExpandedMode = !!expandedDrawerId;
const toolsOpen = !!activeDrawer;
// Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar
const drawerExpandedModeInChildLayout = !!(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.expandedDrawerId);
const { __embeddedViewMode: embeddedViewMode } = appLayoutProps;
return (React.createElement(React.Fragment, null,
!!toolbarProps && !embeddedViewMode && !aiDrawerExpandedMode && (React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutState.appLayoutInternals, toolbarProps: toolbarProps })),
aiDrawer && (React.createElement("div", { className: clsx(styles['ai-drawer'], (drawerExpandedMode || drawerExpandedModeInChildLayout) && !aiDrawerExpandedMode && styles.hidden) },
React.createElement(ActiveDrawersContext.Provider, { value: activeAiDrawer ? [activeAiDrawer.id] : [] }, (!!activeAiDrawerId || ((aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.preserveInactiveContent) && wasAiDrawerOpenRef.current)) && (React.createElement(React.Fragment, null,
(wasAiDrawerOpenRef.current = true),
React.createElement(AppLayoutGlobalAiDrawerImplementation, { show: !!activeAiDrawerId, activeAiDrawer: aiDrawer !== null && aiDrawer !== void 0 ? aiDrawer : null, appLayoutInternals: appLayoutState.appLayoutInternals, aiDrawerProps: {
activeAiDrawerSize: activeAiDrawerSize,
minAiDrawerSize: minAiDrawerSize,
maxAiDrawerSize: maxAiDrawerSize,
aiDrawer: aiDrawer,
ariaLabels,
aiDrawerFocusControl,
isMobile,
drawersOpenQueue,
onActiveAiDrawerChange,
onActiveDrawerResize: ({ size }) => onActiveAiDrawerResize(size),
expandedDrawerId,
setExpandedDrawerId,
} })))))),
navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'], (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden) },
React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutState.appLayoutInternals, bottomDrawerReportedSize: bottomDrawerReportedSize })))));
};
export const createWidgetizedAppLayoutBeforeMainSlot = createWidgetizedComponent(BeforeMainSlotImplementation, BeforeMainSlotSkeleton);
//# sourceMappingURL=before-main-slot.js.map