42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
|
|
import { useEffect, useRef } from 'react';
|
|
import { Row } from './components/Row/Row';
|
|
import styles from './Popup.module.css';
|
|
import { TAG_ADDR } from './constants';
|
|
|
|
export const Popup = ( {isOpen = false, setIsOpen} ) => {
|
|
|
|
useEffect(() => {
|
|
if (isOpen === true) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "";
|
|
}
|
|
},[isOpen]);
|
|
|
|
|
|
function onClickHandle(event) {
|
|
if (event.target !== event.currentTarget)
|
|
return;
|
|
setIsOpen(false);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={styles.container}
|
|
onClick={onClickHandle}
|
|
style={{ display: isOpen ? "flex" : "none" }}
|
|
>
|
|
<div className={styles.column}>
|
|
{TAG_ADDR.map(({tag, addr}, index) => (
|
|
<Row
|
|
key={index}
|
|
onClickTag={() => {setIsOpen(false)}}
|
|
tag={tag}
|
|
addr={addr}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |