@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
62 lines • 4.27 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import { useResizeObserver } from '@awsui/component-toolkit/internal';
import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
import { useSplitPanelContext } from '../internal/context/split-panel-context';
import * as tokens from '../internal/generated/styles/tokens';
import { useMobile } from '../internal/hooks/use-mobile';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import sharedStyles from '../app-layout/resize/styles.css.js';
import styles from './styles.css.js';
import testUtilStyles from './test-classes/styles.css.js';
export function SplitPanelContentBottom({ closeBehavior, baseProps, isOpen, splitPanelRef, cappedSize, header, resizeHandle, children, appLayoutMaxWidth, panelHeaderId, ariaLabel, onToggle, hasCustomElements, }) {
const isRefresh = useVisualRefresh();
const isToolbar = useAppLayoutToolbarDesignEnabled();
const { bottomOffset, leftOffset, rightOffset, disableContentPaddings, contentWrapperPaddings, reportHeaderHeight, headerHeight: headerBlockSize, animationDisabled, } = useSplitPanelContext();
const isMobile = useMobile();
const headerRef = useRef(null);
useResizeObserver(headerRef, entry => {
const visibleHeaderSize = closeBehavior === 'hide' && !isOpen ? 0 : entry.borderBoxHeight;
reportHeaderHeight(visibleHeaderSize);
});
useEffect(() => {
// report empty height when unmounting the panel
return () => reportHeaderHeight(0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const centeredMaxWidthClasses = clsx({
[styles['pane-bottom-center-align']]: isRefresh,
[styles['pane-bottom-content-nav-padding']]: contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedNav,
[styles['pane-bottom-content-tools-padding']]: contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedTools,
});
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.drawer, styles['position-bottom'], testUtilStyles.root, {
[sharedStyles['with-motion-vertical']]: !animationDisabled,
[testUtilStyles['open-position-bottom']]: isOpen,
[styles['drawer-closed']]: !isOpen,
[styles['drawer-clickable']]: !hasCustomElements,
[styles['drawer-mobile']]: isMobile,
[styles['drawer-disable-content-paddings']]: disableContentPaddings,
[styles.refresh]: isRefresh,
[styles['with-toolbar']]: isToolbar,
[styles.hidden]: closeBehavior === 'hide' && !isOpen,
}), onClick: () => !isOpen && !hasCustomElements && onToggle(), style: {
insetBlockEnd: bottomOffset,
insetInlineStart: leftOffset,
insetInlineEnd: rightOffset,
blockSize: isOpen
? cappedSize
: closeBehavior === 'hide'
? 0
: isToolbar && headerBlockSize !== undefined
? `calc(${headerBlockSize}px + ${tokens.borderPanelTopWidth})`
: undefined,
}, ref: splitPanelRef }, closeBehavior === 'hide' && !isOpen ? null : (React.createElement(React.Fragment, null,
isOpen && React.createElement("div", { className: styles['slider-wrapper-bottom'] }, resizeHandle),
React.createElement("div", { className: styles['drawer-content-bottom'], "aria-labelledby": panelHeaderId, "aria-label": ariaLabel, role: "region" },
React.createElement("div", { className: clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses), ref: headerRef }, header),
React.createElement("div", { className: clsx(styles['content-bottom'], centeredMaxWidthClasses), "aria-hidden": !isOpen },
React.createElement("div", { className: clsx({ [styles['content-bottom-max-width']]: isRefresh }), style: appLayoutMaxWidth }, children)))))));
}
//# sourceMappingURL=bottom.js.map