ar-design
Version:
AR Design is a (react | nextjs) ui library.
100 lines (99 loc) • 4.64 kB
JavaScript
"use client";
import React, { memo, useEffect, useMemo, useRef } from "react";
import ReactDOM from "react-dom";
import { ARIcon } from "../../icons";
import { ExtractKey } from "./Helpers";
import { useTranslation } from "../../../libs/core/application/hooks";
function PropertiesPopup({ refs, states, methods, coordinate, config }) {
// refs
const _arTablePropertiesPopup = useRef(null);
// hooks
const { t } = useTranslation(String(config.locale ?? "tr"));
// methods
const handleClickOutSide = (event) => {
const target = event.target;
const clickedInsidePopup = _arTablePropertiesPopup.current && _arTablePropertiesPopup.current.contains(target);
const isOneOfButtons = target.closest('[data-properties-button="true"]');
if (!clickedInsidePopup && !isOneOfButtons)
handleClose();
};
const handleSort = useMemo(() => {
return (columnKey, direction) => {
if (!columnKey)
return;
states.sort.set((prev) => {
const index = prev.findIndex((s) => s.key === columnKey);
if (index !== -1)
return [{ key: columnKey, direction }];
return [{ key: columnKey, direction }];
});
};
}, []);
const handleKeys = (event) => {
const key = event.key;
if (key === "Escape")
handleClose();
};
const handleOpen = () => {
states.open.set(true);
methods.handleScroll();
};
const handleClose = () => {
states.open.set(false);
methods.handleScroll();
};
// 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);
}
};
}, []);
const currentKey = ExtractKey(states.sort.currentColumn?.key);
const currentSort = states.sort.get?.find((s) => s.key === currentKey);
return (states.open.get &&
ReactDOM.createPortal(React.createElement("div", { ref: _arTablePropertiesPopup, className: "ar-table-properties-popup", style: { top: coordinate.y, left: coordinate.x } },
React.createElement("ul", null,
currentSort && (!currentSort.direction || currentSort.direction === "desc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "asc") },
React.createElement("span", null,
React.createElement(ARIcon, { icon: "ArrowUp" })),
React.createElement("span", null, t("Table.Properties.Asc.Text")))),
currentSort && (!currentSort.direction || currentSort.direction === "asc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "desc") },
React.createElement("span", null,
React.createElement(ARIcon, { icon: "ArrowDown" })),
React.createElement("span", null, t("Table.Properties.Desc.Text")))),
currentSort && currentSort.direction && (React.createElement("li", { onClick: () => {
states.sort.set((prev) => prev.filter((s) => s.key !== currentKey));
states.open.set(false);
} },
React.createElement("span", null,
React.createElement(ARIcon, { icon: "ChevronExpand" })),
React.createElement("span", null, t("Table.Properties.ClearSort.Text")))))), document.body));
}
export default memo(PropertiesPopup);