@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
40 lines (39 loc) • 2.95 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import { getBaseProps } from '../../base-component';
import Box from '../../../box';
import PopoverContainer from '../../../popover/container';
import PopoverBody from '../../../popover/body';
import popoverStyles from '../../../popover/styles.css.js';
import { nodeContains } from '../../utils/dom';
import SeriesMarker from '../chart-series-marker';
import styles from './styles.css.js';
export default function ChartPopover(_a) {
var _b;
var _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.fixedWidth, fixedWidth = _e === void 0 ? false : _e, _f = _a.dismissButton, dismissButton = _f === void 0 ? false : _f, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, series = _a.series, trigger = _a.trigger, onDismiss = _a.onDismiss, segmentsRef = _a.segmentsRef, restProps = __rest(_a, ["position", "size", "fixedWidth", "dismissButton", "dismissAriaLabel", "children", "series", "trigger", "onDismiss", "segmentsRef"]);
var baseProps = getBaseProps(restProps);
var popoverRef = useRef(null);
useEffect(function () {
var onDocumentClick = function (event) {
if (event.target &&
!nodeContains(popoverRef.current, event.target) &&
!nodeContains(segmentsRef, event.target)) {
onDismiss();
}
};
document.addEventListener('click', onDocumentClick);
return function () {
document.removeEventListener('click', onDocumentClick);
};
}, []);
return (React.createElement("span", __assign({}, baseProps, { className: clsx(popoverStyles.root, styles.root, baseProps.className, (_b = {}, _b[styles.dismissable] = dismissButton, _b)), ref: popoverRef }),
React.createElement("span", { "aria-live": dismissButton ? undefined : 'polite', "aria-atomic": dismissButton ? undefined : true },
React.createElement(PopoverContainer, { position: position, track: trigger, arrow: function (position) { return (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles["arrow-position-" + position]) },
React.createElement("div", { className: popoverStyles['arrow-outer'] }),
React.createElement("div", { className: popoverStyles['arrow-inner'] }))); } },
React.createElement(PopoverBody, { size: size, fixedWidth: fixedWidth, dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, returnFocus: false, header: series && (React.createElement(Box, { className: styles.header, variant: "strong" },
React.createElement(SeriesMarker, { color: series.color, type: series.markerType }),
" ",
series.label)), onDismiss: onDismiss }, children)))));
}