ar-design
Version:
AR Design is a (react | nextjs) ui library.
85 lines (84 loc) • 3.92 kB
JavaScript
"use client";
import React, { useContext, useEffect, useRef, useState } from "react";
import "../../../assets/css/components/feedback/popup/popup.css";
import Button from "../../form/button";
import ReactDOM from "react-dom";
import { NotificationContext } from "../../../libs/core/application/contexts/Notification";
import { ARIcon } from "../../icons";
const Popup = ({ title, message, status, isOpen, buttons }) => {
// contexts
const { setIsPopupOpen } = useContext(NotificationContext);
// refs
const _arNotificationPopupWrapper = useRef(null);
const _arNotificationPopup = useRef(null);
// states
const _notificaitonPopupWrapperClassName = ["ar-notification-popup-wrapper"];
const [className, setClassName] = useState(["ar-notification-popup", ""]);
// methods
const buttonStatus = () => {
switch (status) {
case "success":
return "success";
case "warning":
return "warning";
case "information":
return "information";
case "error":
return "danger";
default:
return "light";
}
};
const buttonIcons = () => {
switch (status) {
case "success":
return React.createElement(ARIcon, { icon: "Success", fill: "transparent", stroke: "var(--white)", size: 48 });
case "warning":
return React.createElement(ARIcon, { icon: "Warning", fill: "transparent", stroke: "var(--white)", size: 48 });
case "information":
return "information";
case "error":
return React.createElement(ARIcon, { icon: "CloseCircle", fill: "transparent", stroke: "var(--white)", size: 48 });
default:
return "light";
}
};
// useEffects
useEffect(() => {
setClassName((prev) => {
const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
return updated;
});
if (isOpen)
document.body.style.overflow = "hidden";
return () => {
document.body.style.removeProperty("overflow");
};
}, [isOpen]);
return (isOpen &&
ReactDOM.createPortal(React.createElement("div", { ref: _arNotificationPopupWrapper, className: _notificaitonPopupWrapperClassName.map((c) => c).join(" ") },
React.createElement("div", { className: "ar-notification-popup-bg", onMouseDown: (event) => {
event.stopPropagation();
const target = event.target;
if (_arNotificationPopup.current && !_arNotificationPopup.current.contains(target)) {
setClassName((prev) => {
const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
return updated;
});
}
} }),
React.createElement("div", { ref: _arNotificationPopup, className: className.map((c) => c).join(" ") },
React.createElement("div", { className: `icon ${status}` }, buttonIcons()),
React.createElement("div", { className: "content" },
React.createElement("span", { className: `title ${status}` },
title,
"!"),
React.createElement("span", { className: "message" }, message)),
React.createElement(Button, { variant: "filled", status: buttonStatus(), onClick: () => {
(() => buttons?.okay?.onClick && buttons.okay?.onClick())();
(() => {
setIsPopupOpen && setIsPopupOpen((prev) => !prev);
})();
} }, buttons?.okay?.text ?? "Tamam"))), document.body));
};
export default Popup;