UNPKG

kupos-ui-components-lib

Version:

A reusable UI components package

330 lines (329 loc) 14.7 kB
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();