@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
33 lines • 3.35 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 { createWidgetizedComponent } from '../../../internal/widgets';
import { ActiveDrawersContext } from '../../utils/visibility-context';
import { AppLayoutDrawerImplementation as AppLayoutDrawer, AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers, } from '../drawer';
import { AppLayoutBottomDrawerWrapper } from '../drawer/global-bottom-drawer';
import { AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide } from '../split-panel';
import { isWidgetReady } from '../state/invariants';
import sharedStyles from '../../resize/styles.css.js';
import styles from '../skeleton/styles.css.js';
export const AfterMainSlotImplementation = ({ appLayoutState, appLayoutProps }) => {
if (!isWidgetReady(appLayoutState)) {
return null;
}
const { navigationOpen, activeGlobalDrawersIds, expandedDrawerId, activeDrawer, splitPanelOpen, drawers, splitPanelPosition, activeGlobalBottomDrawerId, bottomDrawers, bottomDrawerReportedSize, } = appLayoutState.widgetizedState;
const drawerExpandedMode = !!expandedDrawerId;
const toolsOpen = !!activeDrawer;
const globalToolsOpen = !!(activeGlobalDrawersIds === null || activeGlobalDrawersIds === void 0 ? void 0 : activeGlobalDrawersIds.length);
return (React.createElement(React.Fragment, null,
!!bottomDrawers.length && (React.createElement("div", { className: styles['bottom-tool'] },
React.createElement(ActiveDrawersContext.Provider, { value: activeGlobalBottomDrawerId ? [activeGlobalBottomDrawerId] : [] },
React.createElement(AppLayoutBottomDrawerWrapper, { widgetizedState: appLayoutState.widgetizedState })))),
splitPanelPosition === 'side' && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'], drawerExpandedMode && styles.hidden) },
React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutState.appLayoutInternals, splitPanelInternals: appLayoutState.splitPanelInternals, bottomDrawerReportedSize: bottomDrawerReportedSize }, appLayoutProps.splitPanel))),
React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open'], drawerExpandedMode && styles.hidden) }, drawers && drawers.length > 0 && (React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutState.appLayoutInternals, bottomDrawerReportedSize: activeGlobalBottomDrawerId ? bottomDrawerReportedSize : 0 }))),
React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) },
React.createElement(ActiveDrawersContext.Provider, { value: activeGlobalDrawersIds !== null && activeGlobalDrawersIds !== void 0 ? activeGlobalDrawersIds : [] },
React.createElement(AppLayoutGlobalDrawers, { appLayoutInternals: appLayoutState.appLayoutInternals })))));
};
export const createWidgetizedAppLayoutAfterMainSlot = createWidgetizedComponent(AfterMainSlotImplementation);
//# sourceMappingURL=after-main-slot.js.map