@wecodesolutions/shared-react-components-ts 0.15.0 → 0.16.0

package/dist/components/popup/Popup.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+interface PopupProps {
+    /** Controls whether the modal is visible or not */
+    isOpen: boolean;
+    /** Called when the user clicks outside the modal or on a close button */
+    onClose: () => void;
+    /** The content to show inside the modal */
+    children: ReactNode;
+}
+export declare const Popup: FC<PopupProps>;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.0",
+  "version": "0.16.0",
   "name": "@wecodesolutions/shared-react-components-ts",
   "publishConfig": {
     "access": "public"

package/src/components/popup/Popup.module.css

@@ -0,0 +1,31 @@
+.modal_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* Semi-transparent black background to block the page */
+  background-color: rgba(0, 0, 0, 0.5);
+  /* Place on top of other elements */
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal_container {
+  background: #fff;
+  border-radius: 4px;
+  padding: 15px;
+  max-width: 90%;
+  /* If on desktop, you can also add a max width or any design you like */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Simple close button (optional) */
+.close_button {
+  display: block;
+  margin-top: 16px;
+  padding: 8px 16px;
+  cursor: pointer;
+}

package/src/components/popup/Popup.tsx

@@ -0,0 +1,39 @@
+import React, { FC, ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './Popup.module.css'; // We'll define some basic styles in a separate file
+
+interface PopupProps {
+  /** Controls whether the modal is visible or not */
+  isOpen: boolean;
+  /** Called when the user clicks outside the modal or on a close button */
+  onClose: () => void;
+  /** The content to show inside the modal */
+  children: ReactNode;
+}
+
+export const Popup: FC<PopupProps> = ({ isOpen, onClose, children }) => {
+  // If the modal is not open, don't render anything
+  if (!isOpen) return null;
+
+  return ReactDOM.createPortal(
+    <div className={styles.modal_overlay} onClick={onClose}>
+      {/* 
+          Stop the click from bubbling up to the overlay, 
+          so a click inside the modal doesn't close it.
+       */}
+      <div
+        className={styles.modal_container}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Render the consumer’s content */}
+        {children}
+
+        {/* Example close button (optional) */}
+        <button className={styles.close_button} onClick={onClose}>
+          Close
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+};