Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 4x 4x | import React, { FC, useEffect, useRef } from 'react';
import { scrollLock, scrollUnlock } from '../../helpers/scrollLock';
import { Button } from 'ag-ems-ui-library';
import { useTranslation } from 'react-i18next';
const styles = require('./Filter.module.css');
export const FilterPopover: FC<{
isOpen: boolean;
onClose?: () => void;
confirmHandler?: () => void;
cancelHandler?: () => void;
confirmText?: string;
cancelText?: string;
text?: string;
}> = ({
isOpen,
onClose,
confirmHandler,
cancelHandler,
confirmText,
cancelText,
text,
children
}) => {
const { t } = useTranslation();
const ref = useRef<HTMLDivElement>(null);
const contentRef = useRef<HTMLDivElement>(null);
useEffect(() => {
isOpen ? show() : hide();
}, [isOpen]);
const show = () => {
if (ref.current && contentRef.current) {
scrollLock();
ref.current.classList.add(styles.open);
const clientRect = ref.current.parentElement!.getBoundingClientRect();
const contentClientRect = contentRef.current.getBoundingClientRect();
let top = `${clientRect.bottom + 1}px`;
let bottom = `auto`;
let left = `${clientRect.left}px`;
let right = `auto`;
if (clientRect.bottom + 1 + contentClientRect.height > window.innerHeight) {
top = `auto`;
bottom = `0`;
}
if (clientRect.left + contentClientRect.width > window.innerWidth) {
left = `auto`;
right = `0`;
}
contentRef.current.style.top = top;
contentRef.current.style.bottom = bottom;
contentRef.current.style.left = left;
contentRef.current.style.right = right;
}
};
const hide = () => {
if (ref.current) {
scrollUnlock();
ref.current.classList.remove(styles.open);
}
};
const confirm = () => {
confirmHandler && confirmHandler();
};
const stopPropagation = evt => evt.stopPropagation();
return (
<div className={styles.FilterPopover} ref={ref}>
<div className={styles.FilterOverlay} onClick={onClose}>
<div className={styles.FilterPopoverContent} ref={contentRef} onClick={stopPropagation}>
{children}
{(cancelHandler || confirmHandler) && <div className={styles.FilterPopoverControls}>
{text && <p>{text}</p>}
{cancelHandler && <Button
value={cancelText ? cancelText : t('reset')}
sizing="xs"
variant="ghost"
rounded={true}
onClick={cancelHandler}
/>}
{confirmHandler && <Button
value={confirmText ? confirmText : t('done')}
sizing="xs"
variant="primary"
rounded={true}
onClick={confirm}
/>}
</div>}
</div>
</div>
</div>
);
};
|