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 4x 4x 4x 4x 4x 4x 2x 4x 2x 2x 4x 4x | import React, { FC, useEffect, useRef, useState } from 'react';
const styles = require('./FilterPopup.module.css')
import { Button, Loading } from 'ag-ems-ui-library';
import { useTranslation } from 'react-i18next';
import { scrollLock, scrollUnlock } from '../../helpers/scrollLock';
export const FilterPopupTab: FC<{
current?: boolean;
onClick?: () => void;
}> = ({
current,
onClick,
children
}) => {
return (
<button className={`${styles.FilterPopupTab} ${current ? styles.current : ''}`} onClick={onClick}>
{children}
</button>
);
};
export const FilterPopupTabs = ({ children }) => {
return <div className={styles.FilterPopupTabs}>{children}</div>;
};
export const FilterPopup: FC<{
isOpen?: boolean;
onClose?: () => void;
confirmHandler?: () => void;
cancelHandler?: () => void;
confirmText?: string;
cancelText?: string;
cancelButton?: boolean;
text?: string;
loading?: boolean;
}> = ({
isOpen = false,
onClose,
confirmHandler,
cancelHandler,
confirmText,
cancelText,
cancelButton = true,
text,
loading,
children
}) => {
const [open, setOpen] = useState(isOpen);
const ref = useRef<HTMLDivElement>(null);
const { t } = useTranslation();
useEffect(() => {
setOpen(isOpen);
}, [isOpen]);
useEffect(() => {
Iif (open) {
scrollLock();
setTimeout(() => {
ref.current && ref.current.classList.add(styles.open);
}, 50);
} else {
scrollUnlock();
}
}, [open]);
const closeHandler = () => {
ref.current && ref.current.classList.remove(styles.open);
setTimeout(() => {
setOpen(false);
onClose && onClose();
}, 500);
};
return open ? (
<div className={`${styles.FilterPopup}`} ref={ref}>
<div className={styles.FilterPopupContainer}>
<div className={styles.FilterPopupContent}>
{children}
</div>
<div className={styles.FilterPopupControls}>
<div className={styles.FilterPopupControlsText}>
{loading ? <Loading color='#007c00' size={30}/> : text && <p>{text}</p>}
</div>
{cancelButton && <Button
value={cancelText ? cancelText : t('reset')}
sizing="md"
variant="ghost"
rounded={true}
onClick={cancelHandler}
/>}
<Button
value={confirmText ? confirmText : t('done')}
sizing="md"
variant="primary"
rounded={true}
onClick={confirmHandler}
/>
</div>
</div>
</div>
) : null;
}; |