@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
42 lines • 2.21 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 { highContrastHeaderClassName } from '../../internal/utils/content-header-utils';
import { useAppLayoutInternals } from './context';
import testutilStyles from '../test-classes/styles.css.js';
import styles from './styles.css.js';
export default function Notifications() {
const { notifications } = useAppLayoutInternals();
if (!notifications) {
return null;
}
return React.createElement(NotificationsImplementation, null);
}
function NotificationsImplementation() {
var _a;
const { ariaLabels, hasDrawerViewportOverlay, notifications, setNotificationsHeight, stickyNotifications, headerVariant, hasNotificationsContent, } = useAppLayoutInternals();
const ref = useRef(null);
useResizeObserver(ref, entry => setNotificationsHeight(entry.contentBoxHeight));
useEffect(() => {
return () => {
setNotificationsHeight(0);
};
// unmount effect only
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
/**
* The notificationsElement ref is assigned to an inner div to prevent internal bottom margin
* from affecting the calculated height, which is used for sticky elements below.
*/
return (React.createElement("div", { role: "region", "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.notifications, {
[styles['sticky-notifications']]: stickyNotifications,
[styles['has-notification-content']]: hasNotificationsContent,
[styles.unfocusable]: hasDrawerViewportOverlay,
[highContrastHeaderClassName]: headerVariant === 'high-contrast',
[styles['high-contrast']]: headerVariant === 'high-contrast',
}, testutilStyles.notifications) },
React.createElement("div", { ref: ref }, notifications)));
}
//# sourceMappingURL=notifications.js.map