@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
52 lines • 3.87 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 { nodeContains } from '@awsui/component-toolkit/dom';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import PopoverBody from '../../../popover/body';
import PopoverContainer from '../../../popover/container';
import { getBaseProps } from '../../base-component';
import popoverStyles from '../../../popover/styles.css.js';
import styles from './styles.css.js';
import testClasses from './test-classes/styles.css.js';
export default React.forwardRef(ChartPopover);
function ChartPopover({ position = 'right', size = 'medium', fixedWidth = false, dismissButton = false, dismissAriaLabel, children, footer, title, trackRef, getTrack, trackKey, onDismiss, container, minVisibleBlockSize, onMouseEnter, onMouseLeave, onBlur, ...restProps }, ref) {
const baseProps = getBaseProps(restProps);
const popoverObjectRef = useRef(null);
const popoverRef = useMergeRefs(popoverObjectRef, ref);
const clickFrameId = useRef(null);
const onMouseDown = () => {
// Indicate there was a click inside popover recently.
clickFrameId.current = requestAnimationFrame(() => (clickFrameId.current = null));
};
useEffect(() => {
if (popoverObjectRef.current) {
const document = popoverObjectRef.current.ownerDocument;
const onDocumentClick = (event) => {
// Dismiss popover unless there was a click inside within the last animation frame.
// Ignore clicks inside the chart as those are handled separately.
if (clickFrameId.current === null && !nodeContains(container, event.target)) {
onDismiss(true);
}
};
document.addEventListener('mousedown', onDocumentClick);
return () => {
document.removeEventListener('mousedown', onDocumentClick);
};
}
}, [container, onDismiss]);
// In chart popovers, dismiss button is present when they are pinned, so both values are equivalent.
const isPinned = dismissButton;
return (React.createElement("div", { ...baseProps, className: clsx(popoverStyles.root, styles.root, baseProps.className), ref: popoverRef, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onBlur: onBlur,
// The tabIndex makes it so that clicking inside popover assigns this element as blur target.
// That is necessary in charts to ensure the blur target is within the chart and no cleanup is needed.
tabIndex: -1 },
React.createElement(PopoverContainer, { size: size, fixedWidth: fixedWidth, position: position, trackRef: trackRef, getTrack: getTrack, trackKey: trackKey, minVisibleBlockSize: minVisibleBlockSize, arrow: position => (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'] }))), keepPosition: true, allowVerticalOverflow: true, allowScrollToFit: isPinned, hoverArea: true },
React.createElement(PopoverBody, { dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: React.createElement("span", { className: testClasses.header }, title), onDismiss: onDismiss, overflowVisible: "content", className: styles['popover-body'], variant: "chart" },
React.createElement("div", { className: testClasses.body }, children),
footer && React.createElement("div", { className: clsx(testClasses.footer, styles.footer) }, footer)))));
}
//# sourceMappingURL=index.js.map