@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
72 lines • 6.66 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 { useMergeRefs, useUniqueId } from '@awsui/component-toolkit/internal';
import { getAnalyticsLabelAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
import { getBaseProps } from '../internal/base-component';
import { ContainerHeaderContextProvider } from '../internal/context/container-header';
import { useModalContext } from '../internal/context/modal-context';
import { useMobile } from '../internal/hooks/use-mobile';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';
import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
import testStyles from './test-classes/styles.css.js';
export function InternalContainerAsSubstep(props) {
const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
const modalContext = useModalContext();
return (React.createElement(InternalContainer, { ...props, __subStepRef: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? { current: null } : subStepRef, __funnelSubStepProps: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? {} : funnelSubStepProps }));
}
export default function InternalContainer({ header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef, ...restProps }) {
var _a;
const isMobile = useMobile();
const isRefresh = useVisualRefresh();
const baseProps = getBaseProps(restProps);
const rootRef = useRef(null);
const headerRef = useRef(null);
const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableStickyMobile, __fullPage && isRefresh && !isMobile);
const contentId = useUniqueId();
const hasDynamicHeight = isRefresh && variant === 'full-page';
const mergedRef = useMergeRefs(rootRef, __internalRootRef);
const headerMergedRef = useMergeRefs(headerRef, __headerRef);
// The container is only sticky on mobile if it is the header for the table.
// In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.
const shouldHaveStickyStyles = isSticky && !isMobile;
const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
const mediaPosition = (_a = media === null || media === void 0 ? void 0 : media.position) !== null && _a !== void 0 ? _a : 'top';
return (React.createElement("div", { ...baseProps, ...__funnelSubStepProps, className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']], isRefresh && styles.refresh), ref: mergedRef, ...getAnalyticsLabelAttribute(`.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`), style: getRootStyles(style) },
hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top'
? { ...getMediaStyles(mediaPosition, style), height: (media === null || media === void 0 ? void 0 : media.height) || '' }
: { ...getMediaStyles(mediaPosition, style), width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
React.createElement("div", { id: contentId, ref: __subStepRef, className: clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height']) },
header && (React.createElement(ContainerHeaderContextProvider, null,
React.createElement(StickyHeaderContext.Provider, { value: { isStuck, isStuckAtBottom } },
React.createElement("div", { className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
[styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
[styles['header-sticky-enabled']]: isSticky,
[styles['header-dynamic-height']]: hasDynamicHeight,
[styles['header-stuck']]: isStuck,
[styles['with-paddings']]: !disableHeaderPaddings,
[styles['with-hidden-content']]: !children || __hiddenContent,
[styles['header-with-media']]: hasMedia,
[styles['header-full-page']]: __fullPage && isRefresh,
}), ref: headerMergedRef, style: {
...stickyStyles.style,
...getHeaderStyles(style),
} },
isStuck && !isMobile && isRefresh && __fullPage && React.createElement("div", { className: styles['header-cover'] }),
header)))),
React.createElement("div", { className: clsx(styles.content, fitHeight && styles['content-fit-height']) },
React.createElement("div", { className: clsx(styles['content-inner'], testStyles['content-inner'], {
[styles['with-paddings']]: !disableContentPaddings,
[styles['with-header']]: !!header,
}), style: getContentStyles(style) }, children)),
footer && (React.createElement("div", { className: clsx(styles.footer, {
[styles['with-divider']]: !__disableFooterDivider,
[styles['with-paddings']]: !disableFooterPaddings,
}), style: getFooterStyles(style) }, footer)))));
}
//# sourceMappingURL=internal.js.map