ar-design
Version:
AR Design is a (react | nextjs) ui library.
99 lines (98 loc) • 5.1 kB
JavaScript
"use client";
import React, { useContext, useEffect, useRef, useState } from "react";
import "../../../assets/css/components/feedback/popup-confirm/styles.css";
import Button from "../../form/button";
import ReactDOM from "react-dom";
import { NotificationContext } from "../../../libs/core/application/contexts/Notification";
import { ARIcon } from "../../icons";
import Row from "../../data-display/grid-system/row/Row";
import Column from "../../data-display/grid-system/column/Column";
const PopupConfirm = ({ title, message, status, isOpen, buttons, onConfirm }) => {
// 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 buttonColor = () => {
switch (status) {
case "success":
case "save":
return "green";
case "warning":
return "orange";
case "information":
return "cyan";
case "error":
case "delete":
return "red";
default:
return "light";
}
};
const buttonIcons = () => {
switch (status) {
case "success":
return React.createElement(ARIcon, { icon: "CheckAll", fill: "var(--success)", size: 24 });
case "save":
return React.createElement(ARIcon, { icon: "Floppy-Fill", fill: "var(--success)", size: 24 });
case "warning":
return React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--warning)", size: 24 });
case "information":
return React.createElement(ARIcon, { icon: "Information-Circle-Fill", fill: "var(--information)", size: 24 });
case "error":
return React.createElement(ARIcon, { icon: "XCircle-Fill", fill: "var(--danger)", size: 24 });
case "delete":
return React.createElement(ARIcon, { icon: "Trash-Fill", fill: "var(--danger)", size: 24 });
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("div", { className: "footer" },
React.createElement(Row, null,
React.createElement(Column, { size: buttons?.cancel ? 6 : 12 },
React.createElement(Button, { color: buttonColor(), onClick: (event) => {
buttons?.okay?.onClick?.(event);
onConfirm?.(true);
setIsPopupOpen?.((prev) => !prev);
}, fullWidth: true }, buttons?.okay?.children ?? "Tamam")),
buttons?.cancel && (React.createElement(Column, { size: 6 },
React.createElement(Button, { variant: "outlined", color: buttons.cancel.color ?? "gray", onClick: (event) => {
buttons?.cancel?.onClick?.(event);
onConfirm?.(false);
setIsPopupOpen?.((prev) => !prev);
}, fullWidth: true }, buttons.cancel.children ?? "Vazgeç"))))))), document.body));
};
export default PopupConfirm;