dce-reactkit 3.7.8 → 3.7.10-beta.0

package/dist/cjs/types/components/AppWrapper.d.ts

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import Variant from '../types/Variant';
+import ModalProps from './Modal/ModalProps';
 type Props = {
     children: React.ReactNode;
 };
@@ -61,5 +62,25 @@ export declare const addFatalErrorHandler: (handler: () => void) => void;
  * @author Gabe Abrams
  */
 export declare const showSessionExpiredMessage: () => Promise<void>;
+/**
+ * Add a modal to the screen
+ * @author Gabe Abrams
+ * @param id the uniqueId of the modal
+ * @param props the props for the modal
+ */
+export declare const addModal: (id: number, props: ModalProps) => Promise<void>;
+/**
+ * Update a modal on the screen by id (if it exists) with new props
+ * @author Gabe Abrams
+ * @param id the uniqueId of the modal
+ * @param props the new props for the modal
+ */
+export declare const updateModal: (id: number, props: ModalProps) => Promise<void>;
+/**
+ * Remove a modal from the screen by id (if it exists)
+ * @author Gabe Abrams
+ * @param id the uniqueId of the modal
+ */
+export declare const removeModal: (id: number) => Promise<void>;
 declare const AppWrapper: React.FC<Props>;
 export default AppWrapper;

package/dist/cjs/types/components/Modal/ModalForWrapper.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The displayable modal component (this is the modal that's added to the
+ *   wrapper, not the one that the programmer renders)
+ * @author Gabe Abrams
+ */
+import React from 'react';
+import ModalProps from './ModalProps';
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/cjs/types/components/{Modal.d.ts → Modal/ModalProps.d.ts}

@@ -1,13 +1,14 @@
+/// <reference types="react" />
+import Variant from '../../types/Variant';
+import ModalButtonType from '../../types/ModalButtonType';
+import ModalSize from '../../types/ModalSize';
+import ModalType from '../../types/ModalType';
 /**
- * A generic popup modal
+ * Props for the Modal component
  * @author Gabe Abrams
  */
-import React from 'react';
-import Variant from '../types/Variant';
-import ModalButtonType from '../types/ModalButtonType';
-import ModalSize from '../types/ModalSize';
-import ModalType from '../types/ModalType';
-type Props = {
+type ModalProps = {
+    key?: string;
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -37,5 +38,4 @@ type Props = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props>;
-export default Modal;
+export default ModalProps;

package/dist/cjs/types/components/Modal/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * General use modal component
+ * @author Gabe Abrams
+ */
+import React from 'react';
+import ModalProps from './ModalProps';
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/cjs/types/index.d.ts

@@ -1,7 +1,7 @@
 import AppWrapper, { alert, confirm, showFatalError, addFatalErrorHandler, leaveToURL } from './components/AppWrapper';
 import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
-import Modal from './components/Modal';
+import Modal from './components/Modal/ModalForWrapper';
 import TabBox from './components/TabBox';
 import RadioButton from './components/RadioButton';
 import CheckboxButton from './components/CheckboxButton';

package/dist/esm/index.js

@@ -387,7 +387,7 @@ const getModalButtonTypeToLabelAndVariant = () => {
 /* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
 const style$a = `
-  .Modal-backdrop {
+  .ModalForWrapper-backdrop {
     position: fixed;
     top: 0;
     left: 0;
@@ -395,7 +395,7 @@ const style$a = `
     height: 200vh;
     background-color: rgba(0, 0, 0, 0.7);
   }
-  .Modal-fading-in {
+  .ModalForWrapper-fading-in {
     animation-name: Modal-fading-in;
     animation-duration: ${Math.floor(MS_TO_ANIMATE * 2)}ms;
     animation-iteration-count: 1;
@@ -410,7 +410,7 @@ const style$a = `
       opacity: 1;
     }
   }
-  .Modal-animating-in {
+  .ModalForWrapper-animating-in {
     animation-name: Modal-animating-in;
     animation-duration: ${MS_TO_ANIMATE}ms;
     animation-iteration-count: 1;
@@ -427,14 +427,14 @@ const style$a = `
       opacity: 1;
     }
   }
-  .Modal-animating-pop {
-    animation-name: Modal-animating-pop;
+  .ModalForWrapper-animating-pop {
+    animation-name: ModalForWrapper-animating-pop;
     animation-duration: ${MS_TO_ANIMATE}ms;
     animation-iteration-count: 1;
     animation-fill-mode: both;
     animation-timing-function: ease-in-out;
   }
-  @keyframes Modal-animating-pop {
+  @keyframes ModalForWrapper-animating-pop {
     0% {
       transform: scale(1);
       opacity: 1;
@@ -448,10 +448,6 @@ const style$a = `
       opacity: 1;
     }
   }
-
-  .modal-dialog-scrollable {
-    height: 100% !important;
-  }
 `;
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Component ----------------------------- */
@@ -531,7 +527,7 @@ const Modal = (props) => {
         // Check if this button is last
         const last = (i === ModalButtonTypes.length - 1);
         // Create the button
-        return (React__default.createElement("button", { key: modalButtonType, type: "button", className: `Modal-${modalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`, onClick: () => {
+        return (React__default.createElement("button", { key: modalButtonType, type: "button", className: `ModalForWrapper-${modalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`, onClick: () => {
                 handleClose(modalButtonType);
             } }, label));
     });
@@ -543,11 +539,11 @@ const Modal = (props) => {
     let animationClass = '';
     let backdropAnimationClass = '';
     if (animatingIn) {
-        animationClass = 'Modal-animating-in';
-        backdropAnimationClass = 'Modal-fading-in';
+        animationClass = 'ModalForWrapper-animating-in';
+        backdropAnimationClass = 'ModalForWrapper-fading-in';
     }
     else if (animatingPop) {
-        animationClass = 'Modal-animating-pop';
+        animationClass = 'ModalForWrapper-animating-pop';
     }
     // Render the modal
     return (React__default.createElement("div", { className: "modal show", tabIndex: -1, style: {
@@ -560,7 +556,7 @@ const Modal = (props) => {
             right: 0,
         } },
         React__default.createElement("style", null, style$a),
-        React__default.createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
+        React__default.createElement("div", { className: `ModalForWrapper-backdrop ${backdropAnimationClass}`, style: {
                 zIndex: 5000000003,
             }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                 // Skip if exit via backdrop not allowed
@@ -599,7 +595,7 @@ const Modal = (props) => {
                     React__default.createElement("h5", { className: "modal-title", style: {
                             fontWeight: 'bold',
                         } }, title),
-                    (onClose && !dontShowXButton) && (React__default.createElement("button", { type: "button", className: "Modal-x-button btn-close", "aria-label": "Close", style: {
+                    (onClose && !dontShowXButton) && (React__default.createElement("button", { type: "button", className: "ModalForWrapper-x-button btn-close", "aria-label": "Close", style: {
                             backgroundColor: (isDarkModeOn()
                                 ? 'white'
                                 : undefined),
@@ -1109,6 +1105,8 @@ const AppWrapper = (props) => {
     // Session expired
     const [sessionHasExpired, setSessionHasExpiredInner,] = useState(false);
     setSessionHasExpired = setSessionHasExpiredInner;
+    // Modals
+    const [modalsFromState, setModalsInner,] = useState([]);
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
@@ -1136,6 +1134,14 @@ const AppWrapper = (props) => {
                 }
             }, dontAllowBackdropExit: true }, confirmInfo.text));
     }
+    /* ---------- Custom Modals --------- */
+    // List of modals added outside reactkit via the Modal component
+    const customModals = [];
+    // Add custom modals
+    modalsFromState.forEach((modalTuple) => {
+        var _a;
+        customModals.push(React__default.createElement(Modal, Object.assign({ key: String((_a = modalTuple.props.key) !== null && _a !== void 0 ? _a : modalTuple.id) }, modalTuple.props)));
+    });
     /*----------------------------------------*/
     /* ---------------- Views --------------- */
     /*----------------------------------------*/
@@ -1200,10 +1206,12 @@ const AppWrapper = (props) => {
           background-color: white;
           color: black;
           border: 0.1rem solid black;
+          pointer-events: none;
         }
         div[data-popper-placement="top"] .tooltip-arrow::before {
           border-top-color: white !important;
           transform: translate(0, -0.05rem);
+          pointer-events: none;
         }
       `
         : `
@@ -1211,10 +1219,12 @@ const AppWrapper = (props) => {
           background-color: black;
           color: black;
           border: 0.1rem solid white;
+          pointer-events: none;
         }
         div[data-popper-placement="top"] .tooltip-arrow::before {
           border-top-color: black !important;
           transform: translate(0, -0.05rem);
+          pointer-events: none;
         }
       `);
     /*----------------------------------------*/
@@ -1224,6 +1234,7 @@ const AppWrapper = (props) => {
         React__default.createElement("style", null, style$9),
         React__default.createElement("style", null, tooltipStyle),
         modal,
+        customModals,
         body));
 };