@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
99 lines • 5.59 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 { Transition } from '../../internal/components/transition';
import customCssProps from '../../internal/generated/custom-css-properties';
import { SPLIT_PANEL_MIN_WIDTH, SplitPanelProvider } from '../split-panel';
import { useAppLayoutInternals } from './context';
import styles from './styles.css.js';
/**
* If there is no Split Panel in the AppLayout context then the SplitPanel
* will pass through the AppLayout children without the context.
*/
function SplitPanel({ children }) {
const { footerHeight, handleSplitPanelClick, handleSplitPanelPreferencesChange, handleSplitPanelResize, headerHeight, isSplitPanelForcedPosition, isSplitPanelOpen, setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight, setSplitPanelToggle, splitPanelPosition, splitPanelRefs, splitPanelSize, } = useAppLayoutInternals();
const props = {
bottomOffset: 0,
getMaxHeight: () => {
const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;
// If the page is likely zoomed in at 200%, allow the split panel to fill the content area.
return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;
},
maxWidth: typeof document !== 'undefined' ? document.documentElement.clientWidth : Number.POSITIVE_INFINITY,
isForcedPosition: isSplitPanelForcedPosition,
isOpen: isSplitPanelOpen,
leftOffset: 0,
onPreferencesChange: handleSplitPanelPreferencesChange,
onResize: handleSplitPanelResize,
onToggle: handleSplitPanelClick,
position: splitPanelPosition,
reportSize: setSplitPanelReportedSize,
reportHeaderHeight: setSplitPanelReportedHeaderHeight,
rightOffset: 0,
size: splitPanelSize || 0,
topOffset: 0,
setSplitPanelToggle,
refs: splitPanelRefs,
};
return React.createElement(SplitPanelProvider, Object.assign({}, props), children);
}
/**
* This is the render function for the SplitPanel when it is in bottom position.
* The Split Panel container will be another row entry in the grid definition in
* the Layout component. The start and finish columns will be variable based
* on the presence and state of the Navigation and Tools components.
*/
function SplitPanelBottom() {
const { disableBodyScroll, hasOpenDrawer, navigationOpen, isSplitPanelOpen, splitPanel, splitPanelPosition, splitPanelReportedSize, splitPanelReportedHeaderHeight, } = useAppLayoutInternals();
if (!splitPanel) {
return null;
}
return (React.createElement(Transition, { in: isSplitPanelOpen !== null && isSplitPanelOpen !== void 0 ? isSplitPanelOpen : false, exit: false }, (state, transitionEventsRef) => (React.createElement("section", { className: clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {
[styles.animating]: state === 'entering',
[styles['disable-body-scroll']]: disableBodyScroll,
[styles['has-open-drawer']]: hasOpenDrawer,
[styles['is-navigation-open']]: navigationOpen,
[styles['is-split-panel-open']]: isSplitPanelOpen,
}), ref: transitionEventsRef, style: {
[customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,
[customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,
} }, splitPanelPosition === 'bottom' && splitPanel))));
}
/**
* This is the render function for the SplitPanel when it is side position.
* The Split Panel will not be within the grid defined in the Layout component
* but instead a direct child of the Tools component. The width constraints
* for this position are computed in the Tools component.
*/
/**
* This component has no opening animations because it causes lots of rerenders that makes the component lag. *
*/
function SplitPanelSide() {
const { isSplitPanelOpen, splitPanel, splitPanelPosition, splitPanelMaxWidth, splitPanelControlId, isToolsOpen, activeDrawerId, } = useAppLayoutInternals();
if (!splitPanel) {
return null;
}
return (React.createElement("section", { id: splitPanelControlId, "aria-hidden": !isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false, className: clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {
[styles['is-split-panel-open']]: isSplitPanelOpen,
[styles['has-open-drawer']]: !!activeDrawerId || isToolsOpen,
}), style: {
[customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,
[customCssProps.splitPanelMinWidth]: `${SPLIT_PANEL_MIN_WIDTH}px`,
} }, splitPanelPosition === 'side' && splitPanel));
}
/**
* This logic will determine what the Split Panel position should be. It reconciles the possibility
* of being in forced position with the current selected position in the settings.
*/
export function getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences) {
let splitPanelPosition = 'bottom';
if (!isSplitPanelForcedPosition && (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) === 'side') {
splitPanelPosition = 'side';
}
return splitPanelPosition;
}
SplitPanel.Bottom = SplitPanelBottom;
SplitPanel.Side = SplitPanelSide;
export default SplitPanel;
//# sourceMappingURL=split-panel.js.map