@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
53 lines • 4.53 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useContext } from 'react';
import clsx from 'clsx';
import { useUniqueId } from '@awsui/component-toolkit/internal';
import { getAnalyticsLabelAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { StickyHeaderContext } from '../container/use-sticky-header';
import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../internal/analytics/selectors';
import { getBaseProps } from '../internal/base-component';
import { CollectionLabelContext } from '../internal/context/collection-label-context';
import { useContainerHeader } from '../internal/context/container-header';
import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
import { useMobile } from '../internal/hooks/use-mobile';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import { useTableIntegration } from './analytics/use-table-integration';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
export default function InternalHeader({ variant, headingTagOverride, children, actions, counter, description, info, __internalRootRef, __disableActionsWrapping, __headingTagRef, __headingTagTabIndex, ...restProps }) {
const isMobile = useMobile();
const HeadingTag = headingTagOverride !== null && headingTagOverride !== void 0 ? headingTagOverride : (variant === 'awsui-h1-sticky' ? 'h1' : variant);
const { isStuck } = useContext(StickyHeaderContext);
const baseProps = getBaseProps(restProps);
const isRefresh = useVisualRefresh();
const assignHeaderId = useContext(CollectionLabelContext).assignId;
const isInContainer = useContainerHeader();
const headingId = useUniqueId('heading');
useTableIntegration(counter);
if (assignHeaderId !== undefined) {
assignHeaderId(headingId);
}
// If is mobile there is no need to have the dynamic variant because it's scrolled out of view
const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';
const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;
return (React.createElement("div", { ...baseProps, className: clsx(styles.root, baseProps.className, styles[`root-variant-${variantOverride}`], isRefresh && styles.refresh, !actions && [styles[`root-no-actions`]], description && [styles[`root-has-description`]]), ref: __internalRootRef },
React.createElement("div", { className: clsx(styles.main, styles[`main-variant-${variantOverride}`], isRefresh && styles.refresh, __disableActionsWrapping && [styles['no-wrap']]) },
React.createElement("div", { className: clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh) },
React.createElement(HeadingTag, { className: clsx(styles.heading, styles[`heading-variant-${variantOverride}`]), ref: __headingTagRef, tabIndex: __headingTagTabIndex, ...getAnalyticsLabelAttribute(`.${analyticsSelectors['heading-text']}`) },
React.createElement("span", { ...(isInContainer ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {}), className: clsx(styles['heading-text'], analyticsSelectors['heading-text'], styles[`heading-text-variant-${variantOverride}`]), id: headingId }, children),
counter !== undefined && React.createElement("span", { className: styles.counter },
" ",
counter)),
info && (React.createElement(InfoLinkLabelContext.Provider, { value: headingId },
React.createElement("span", { className: styles['virtual-space'] }, " \u00A0"),
React.createElement("span", { className: styles.info }, info)))),
actions && (React.createElement("div", { className: clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh, !__disableActionsWrapping && [styles['actions-centered']]) }, actions))),
React.createElement(Description, { variantOverride: variantOverride }, description)));
}
export function Description({ children, variantOverride }) {
const isRefresh = useVisualRefresh();
return ((children && (React.createElement("p", { className: clsx(styles.description, styles[`description-variant-${variantOverride}`], isRefresh && styles.refresh) }, children))) ||
null);
}
//# sourceMappingURL=internal.js.map