@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
27 lines (26 loc) • 2.01 kB
JavaScript
import clsx from 'clsx';
import React, { useCallback, useContext } from 'react';
import styles from './styles.css.js';
import { hotspotContext } from '../annotation-context/context';
import PopoverBody from '../popover/body';
import PopoverContainer from '../popover/container';
import { fireNonCancelableEvent } from '../internal/events';
export function AnnouncementPopover(_a) {
var track = _a.track;
var _b = useContext(hotspotContext), announcementPopoverHeader = _b.announcementPopoverHeader, announcementPopoverBody = _b.announcementPopoverBody, onDismissAnnouncementPopover = _b.onDismissAnnouncementPopover, labelDismissAnnouncementPopover = _b.labelDismissAnnouncementPopover;
var onDismiss = useCallback(function () {
fireNonCancelableEvent(onDismissAnnouncementPopover);
}, [onDismissAnnouncementPopover]);
var stopEventPropagation = useCallback(function (event) {
event.stopPropagation();
}, []);
var dismissButtonRefCallback = useCallback(function (element) { return requestAnimationFrame(function () { return element === null || element === void 0 ? void 0 : element.focus(); }); }, []);
if (!announcementPopoverBody || !track.current) {
return null;
}
return (React.createElement("div", { onClick: stopEventPropagation },
React.createElement(PopoverContainer, { position: 'left', track: track.current, arrow: function (position) { return (React.createElement("div", { className: clsx(styles.arrow, styles["arrow-position-" + position]) },
React.createElement("div", { className: styles['arrow-outer'] }),
React.createElement("div", { className: styles['arrow-inner'] }))); } },
React.createElement(PopoverBody, { size: "medium", fixedWidth: false, dismissButton: true, dismissAriaLabel: labelDismissAnnouncementPopover, onDismiss: onDismiss, variant: "annotation", header: announcementPopoverHeader, dismissButtonRef: dismissButtonRefCallback }, announcementPopoverBody))));
}