ar-design
Version:
AR Design is a (react | nextjs) ui library.
59 lines (58 loc) • 2.41 kB
JavaScript
"use client";
import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
const FilterPopup = ({ children, refs, states, coordinate }) => {
// refs
const _arTableFilterPopup = useRef(null);
// methods
const handleClickOutSide = (event) => {
const target = event.target;
const clickedInsidePopup = _arTableFilterPopup.current && _arTableFilterPopup.current.contains(target);
const isOneOfButtons = refs.buttons.current.some((button) => button === target || button?.contains(target));
if (!clickedInsidePopup && !isOneOfButtons)
handleClose();
};
const handleKeys = (event) => {
const key = event.key;
if (key === "Escape")
states.open.set(false);
};
const handleOpen = () => states.open.set(true);
const handleClose = () => states.open.set(false);
// useEffects
useEffect(() => {
refs.buttons.current.map((button) => {
if (button)
button.addEventListener("click", handleOpen);
});
return () => {
refs.buttons.current.map((button) => {
if (button)
button.removeEventListener("click", handleOpen);
});
};
}, [refs.buttons]);
useEffect(() => {
const firstFilterButton = refs.buttons.current[0];
if (firstFilterButton) {
const rect = firstFilterButton.getBoundingClientRect();
coordinate.x = rect.left;
coordinate.y = rect.top + rect.height;
}
if (refs.tableContent.current) {
refs.tableContent.current.addEventListener("scroll", handleClose);
}
document.addEventListener("click", handleClickOutSide);
document.addEventListener("keydown", handleKeys);
return () => {
document.removeEventListener("click", handleClickOutSide);
document.removeEventListener("keydown", handleKeys);
if (refs.tableContent.current) {
refs.tableContent.current.removeEventListener("scroll", handleClose);
}
};
}, []);
return (states.open.get &&
ReactDOM.createPortal(React.createElement("div", { ref: _arTableFilterPopup, className: "ar-table-filter-popup", style: { top: coordinate.y, left: coordinate.x } }, children), document.body));
};
export default FilterPopup;