Retention report UI updates.

This commit is contained in:
Mike Cao 2023-08-17 03:21:20 -07:00
parent 9b8fa08d82
commit 2c8996b68f
12 changed files with 110 additions and 93 deletions

View file

@ -1,29 +1,11 @@
import { createPortal } from 'react-dom';
import { useDocumentClick, useKeyDown } from 'react-basics';
import classNames from 'classnames';
import styles from './PopupForm.module.css';
export function PopupForm({ element, className, children, onClose }) {
const { right, top } = element.getBoundingClientRect();
const style = { position: 'absolute', left: right, top };
useKeyDown('Escape', onClose);
useDocumentClick(e => {
if (e.target !== element && !element?.parentElement?.contains(e.target)) {
onClose();
}
});
const handleClick = e => {
e.stopPropagation();
};
return createPortal(
<div className={classNames(styles.form, className)} style={style} onClick={handleClick}>
export function PopupForm({ className, style, children }) {
return (
<div className={classNames(styles.form, className)} style={style}>
{children}
</div>,
document.body,
</div>
);
}