@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
31 lines • 2 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import { useResizeObserver } from '@awsui/component-toolkit/internal';
import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
import { NotificationsSlot } from '../skeleton/slots';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from './styles.css.js';
export function AppLayoutNotificationsImplementation({ appLayoutInternals, children, }) {
const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;
const [hasNotificationsContent, setHasNotificationsContent] = useState(false);
const rootRef = useRef(null);
useResizeObserver(rootRef, entry => {
const hasContent = entry.contentBoxHeight > 0;
setNotificationsHeight(hasContent ? entry.borderBoxHeight : 0);
setHasNotificationsContent(hasContent);
});
useEffect(() => {
return () => {
setNotificationsHeight(0);
};
// unmount effect only
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (React.createElement(NotificationsSlot, { ref: rootRef, className: clsx(appLayoutInternals.headerVariant === 'high-contrast' && highContrastHeaderClassName, stickyNotifications && styles['sticky-notifications'], hasNotificationsContent && styles['has-notifications-content'], appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']), style: {
insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,
} },
React.createElement("div", { className: testutilStyles.notifications, role: "region", "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications }, children)));
}
//# sourceMappingURL=index.js.map