kupos-ui-components-lib
Version:
A reusable UI components package
330 lines (329 loc) • 14.7 kB
JavaScript
import ReactDOM from "react-dom";
class ModalEventManager {
constructor() { }
static getInstance() {
if (!ModalEventManager.instance) {
ModalEventManager.instance = new ModalEventManager();
}
return ModalEventManager.instance;
}
showPopup(popupProps) {
try {
if (typeof window !== "undefined" && window.document) {
// If React components are provided, use React rendering
if (popupProps.children || popupProps.modalBody) {
this.showReactPopup(popupProps);
}
else {
this.createAndShowPopup(popupProps);
}
}
else {
console.log("Would show popup with:", popupProps);
if (typeof alert === "function") {
if (typeof popupProps.body === "string") {
alert(popupProps.body || "Popup would show here");
}
else {
alert("Popup would show here");
}
}
}
}
catch (err) {
console.error("Error showing popup:", err);
try {
if (typeof popupProps.body === "string") {
alert(popupProps.body || "Popup would show here");
}
else {
alert("Popup would show here");
}
}
catch (e) {
console.error("Alert fallback also failed");
}
}
}
createAndShowPopup(popupProps) {
const popupContainer = document.createElement("div");
popupContainer.id = "popup-container-" + Date.now();
popupContainer.style.position = "fixed";
popupContainer.style.top = "0";
popupContainer.style.left = "0";
popupContainer.style.width = "100%";
popupContainer.style.height = "100%";
popupContainer.style.display = "flex";
popupContainer.style.alignItems = "center";
popupContainer.style.justifyContent = "center";
popupContainer.style.zIndex = "9999";
// Create overlay
const overlay = document.createElement("div");
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
// Create popup content
const content = document.createElement("div");
content.style.backgroundColor = "white";
content.style.borderRadius = "20px";
content.style.padding = "2.5rem";
content.style.maxWidth = "500px";
content.style.margin = "0 auto";
content.style.position = "relative";
content.style.zIndex = "10";
content.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
// Icon if provided
if (popupProps.icon || popupProps.modalIcon) {
const iconContainer = document.createElement("div");
iconContainer.style.textAlign = "center";
iconContainer.style.marginBottom = "16px";
const icon = document.createElement("img");
icon.src = popupProps.icon || popupProps.modalIcon || "";
icon.style.width = "75px";
icon.style.height = "75px";
iconContainer.appendChild(icon);
content.appendChild(iconContainer);
}
// Title if provided
if (popupProps.title || popupProps.modalTitle) {
const title = document.createElement("div");
title.style.textAlign = "center";
title.style.color = "#333";
title.style.fontWeight = "bold";
title.style.marginBottom = "16px";
title.style.fontSize = "16px";
title.textContent = popupProps.title || popupProps.modalTitle || "";
content.appendChild(title);
}
// Message
const message = document.createElement("div");
message.style.textAlign = "center";
message.style.color = "#333";
message.style.marginBottom = "24px";
message.style.fontSize = "13.33px";
if (typeof popupProps.body === "string") {
message.textContent = popupProps.body || "";
}
// Primary button
const primaryButton = document.createElement("button");
primaryButton.style.width = "100%";
primaryButton.style.padding = "12px 24px";
primaryButton.style.backgroundColor = popupProps.primaryButtonBgColor || "#ff8f45";
primaryButton.style.color = popupProps.primaryButtonTextColor || "white";
primaryButton.style.border = "none";
primaryButton.style.borderRadius = "10px";
primaryButton.style.fontSize = "16px";
primaryButton.style.marginBottom = "12px";
primaryButton.style.cursor = "pointer";
primaryButton.textContent = popupProps.primaryButtonText || "CONTINUAR";
const closePopup = () => {
if (popupContainer && popupContainer.parentNode) {
popupContainer.parentNode.removeChild(popupContainer);
}
};
primaryButton.onclick = e => {
e.preventDefault();
e.stopPropagation();
if (popupProps.onPrimaryButtonClick)
popupProps.onPrimaryButtonClick();
closePopup();
};
content.appendChild(message);
const showPrimaryButton = popupProps.showPrimaryButton !== false &&
popupProps.showButton1 !== false;
if (showPrimaryButton) {
content.appendChild(primaryButton);
}
const showSecondaryButton = (popupProps.secondaryButtonText || popupProps.buttonText2) &&
popupProps.showSecondaryButton !== false &&
popupProps.showButton2 !== false;
if (showSecondaryButton) {
const secondaryButton = document.createElement("button");
secondaryButton.style.width = "100%";
secondaryButton.style.padding = "12px 24px";
secondaryButton.style.backgroundColor = popupProps.secondaryButtonBgColor || "#fef1ec";
secondaryButton.style.color = popupProps.secondaryButtonTextColor || "#ff8f45";
secondaryButton.style.border = "none";
secondaryButton.style.borderRadius = "10px";
secondaryButton.style.fontSize = "16px";
secondaryButton.style.cursor = "pointer";
secondaryButton.textContent =
popupProps.secondaryButtonText || popupProps.buttonText2 || "CANCEL";
secondaryButton.onclick = e => {
e.preventDefault();
e.stopPropagation();
if (popupProps.onSecondaryButtonClick)
popupProps.onSecondaryButtonClick();
else if (popupProps.onButtonClick2)
popupProps.onButtonClick2();
closePopup();
};
content.appendChild(secondaryButton);
}
overlay.onclick = e => {
e.preventDefault();
e.stopPropagation();
closePopup();
};
popupContainer.appendChild(overlay);
popupContainer.appendChild(content);
document.body.appendChild(popupContainer);
}
showModal(modalProps) {
this.showPopup(modalProps);
}
showReactPopup(popupProps) {
console.warn("React popup implementation not fully supported in this environment.");
// Use basic DOM for now
const popupContainer = document.createElement("div");
popupContainer.id = "popup-container-" + Date.now();
popupContainer.style.position = "fixed";
popupContainer.style.top = "0";
popupContainer.style.left = "0";
popupContainer.style.width = "100%";
popupContainer.style.height = "100%";
popupContainer.style.display = "flex";
popupContainer.style.alignItems = "center";
popupContainer.style.justifyContent = "center";
popupContainer.style.zIndex = "9999";
// Create overlay
const overlay = document.createElement("div");
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
// Create popup content
const content = document.createElement("div");
content.style.backgroundColor = "white";
content.style.borderRadius = "20px";
content.style.padding = "2.5rem";
content.style.maxWidth = "500px";
content.style.margin = "0 auto";
content.style.position = "relative";
content.style.zIndex = "10";
content.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
const closePopup = () => {
if (popupContainer && popupContainer.parentNode) {
popupContainer.parentNode.removeChild(popupContainer);
}
};
// Add icon if available
if (popupProps.icon || popupProps.modalIcon) {
const iconContainer = document.createElement("div");
iconContainer.style.textAlign = "center";
iconContainer.style.marginBottom = "16px";
const icon = document.createElement("img");
icon.src = popupProps.icon || popupProps.modalIcon || "";
icon.style.width = "75px";
icon.style.height = "75px";
iconContainer.appendChild(icon);
content.appendChild(iconContainer);
}
// Add title if available
if (popupProps.title || popupProps.modalTitle) {
const title = document.createElement("div");
title.style.textAlign = "center";
title.style.color = "#333";
title.style.fontWeight = "bold";
title.style.marginBottom = "16px";
title.style.fontSize = "16px";
title.textContent = popupProps.title || popupProps.modalTitle || "";
content.appendChild(title);
}
// Create a container for React components
const reactContainer = document.createElement("div");
reactContainer.style.textAlign = "center";
reactContainer.style.color = "#333";
reactContainer.style.marginBottom = "24px";
reactContainer.style.fontSize = "13.33px";
content.appendChild(reactContainer);
// Render React components into the container
try {
if (popupProps.children || popupProps.modalBody) {
// Determine which React content to render
const reactContent = popupProps.children || popupProps.modalBody;
// Use React DOM rendering API
// @ts-ignore - Ignoring TypeScript error since ReactDOM.render exists at runtime
ReactDOM.render(reactContent, reactContainer);
}
else {
// Fallback message if no React components are provided
reactContainer.textContent =
popupProps.body || "Popup content would show here";
}
}
catch (error) {
console.error("Error rendering React component:", error);
reactContainer.textContent = "Error rendering React component";
}
const showPrimaryButton = popupProps.showPrimaryButton !== false &&
popupProps.showButton1 !== false;
if (showPrimaryButton) {
const primaryButton = document.createElement("button");
primaryButton.style.width = "100%";
primaryButton.style.padding = "12px 24px";
primaryButton.style.backgroundColor = popupProps.primaryButtonBgColor || "#ff8f45";
primaryButton.style.color = popupProps.primaryButtonTextColor || "white";
primaryButton.style.border = "none";
primaryButton.style.borderRadius = "10px";
primaryButton.style.fontSize = "16px";
primaryButton.style.marginBottom = "12px";
primaryButton.style.cursor = "pointer";
primaryButton.textContent =
popupProps.primaryButtonText || popupProps.buttonText1 || "CONTINUAR";
primaryButton.onclick = e => {
e.preventDefault();
e.stopPropagation();
if (popupProps.onPrimaryButtonClick)
popupProps.onPrimaryButtonClick();
else if (popupProps.onButtonClick1)
popupProps.onButtonClick1();
closePopup();
};
content.appendChild(primaryButton);
}
const showSecondaryButton = (popupProps.secondaryButtonText || popupProps.buttonText2) &&
popupProps.showSecondaryButton !== false &&
popupProps.showButton2 !== false;
if (showSecondaryButton) {
const secondaryButton = document.createElement("button");
secondaryButton.style.width = "100%";
secondaryButton.style.padding = "12px 24px";
secondaryButton.style.backgroundColor = popupProps.secondaryButtonBgColor || "#fef1ec";
secondaryButton.style.color = popupProps.secondaryButtonTextColor || "#ff8f45";
secondaryButton.style.border = "none";
secondaryButton.style.borderRadius = "10px";
secondaryButton.style.fontSize = "16px";
secondaryButton.style.cursor = "pointer";
secondaryButton.textContent =
popupProps.secondaryButtonText || popupProps.buttonText2 || "CANCEL";
secondaryButton.onclick = e => {
e.preventDefault();
e.stopPropagation();
if (popupProps.onSecondaryButtonClick)
popupProps.onSecondaryButtonClick();
else if (popupProps.onButtonClick2)
popupProps.onButtonClick2();
closePopup();
};
content.appendChild(secondaryButton);
}
// Allow closing by clicking overlay
overlay.onclick = e => {
e.preventDefault();
e.stopPropagation();
closePopup();
};
// Assemble and add to body
popupContainer.appendChild(overlay);
popupContainer.appendChild(content);
// Add to document body
document.body.appendChild(popupContainer);
}
}
export default ModalEventManager.getInstance();