ar-design
Version:
AR Design is a (react | nextjs) ui library.
52 lines (51 loc) • 2.47 kB
JavaScript
"use client";
import React, { useEffect, useRef, useState } from "react";
import "../../../assets/css/components/form/button-action/button-action.css";
import Button from "../button";
const ButtonAction = ({ buttons }) => {
// refs
const _arButtonAction = useRef(null);
const _list = useRef(null);
// states
const [open, setOpen] = useState(false);
const [coordinateX, setCoordinatX] = useState(0);
const [coordinateY, setCoordinatY] = useState(0);
// methods
const handleClickOutSide = (event) => {
const target = event.target;
if (_arButtonAction.current && !_arButtonAction.current.contains(target))
setOpen(false);
};
const handleKeys = (event) => {
const key = event.key;
if (key === "Escape")
setOpen(false);
};
const handleResizeEvent = () => setOpen(false);
// useEffects
useEffect(() => {
if (open) {
document.addEventListener("click", handleClickOutSide);
document.addEventListener("keydown", handleKeys);
window.addEventListener("resize", handleResizeEvent);
}
return () => {
document.removeEventListener("click", handleClickOutSide);
document.removeEventListener("keydown", handleKeys);
window.removeEventListener("resize", handleResizeEvent);
};
}, [open]);
return (React.createElement("div", { ref: _arButtonAction, className: "ar-button-action" },
React.createElement(Button, { variant: "borderless", status: "information", border: { radius: "none" }, icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => {
if (!_arButtonAction.current || !_list.current)
return;
const wrapper = _arButtonAction.current.getBoundingClientRect();
const confirm = _list.current.getBoundingClientRect();
setCoordinatX(wrapper.left - confirm.width - 60);
setCoordinatY(wrapper.top);
setOpen((prev) => !prev);
} }),
React.createElement("span", { ref: _list, className: `list ${open ? "opened" : "closed"}`, style: { top: coordinateY, left: coordinateX } }, buttons.map((button) => (React.createElement(Button, { variant: "borderless", status: "dark", onClick: button.onClick }, button.text))))));
};
ButtonAction.displayName = "ButtonAction";
export default ButtonAction;