dce-reactkit 3.7.9 → 3.7.10-beta.1

package/src/components/AppWrapper.tsx

@@ -19,11 +19,12 @@ import ModalButtonType from '../types/ModalButtonType';
 import ModalType from '../types/ModalType';
 import Variant from '../types/Variant';
 import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
+import ModalProps from './Modal/ModalProps';
 
 // Import shared components
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
-import Modal from './Modal';
+import ModalForWrapper from './Modal/ModalForWrapper';
 
 // Import custom errors
 import ErrorWithCode from '../errors/ErrorWithCode';
@@ -358,6 +359,99 @@ export const showSessionExpiredMessage = async () => {
   }
 };
 
+/*----------------------------------------*/
+/* --------------- Modals --------------- */
+/*----------------------------------------*/
+
+// Modal tuple with id and props
+type ModalTuple = {
+  // Unique id
+  id: number,
+  // Modal props
+  props: ModalProps,
+};
+
+// Stored copies of setters
+let setModals: (modals: ModalTuple[]) => void;
+
+// Stored copies of modals
+let modals: ModalTuple[] = [];
+
+/**
+ * Add a modal to the screen
+ * @author Gabe Abrams
+ * @param id the uniqueId of the modal
+ * @param props the props for the modal
+ */
+export const addModal = async (
+  id: number,
+  props: ModalProps,
+) => {
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return !!setModals;
+  });
+
+  // Add modal
+  modals.push({
+    id,
+    props,
+  });
+
+  // Update modals
+  setModals(modals);
+};
+
+/**
+ * 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 const updateModal = async (
+  id: number,
+  props: ModalProps,
+) => {
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return !!setModals;
+  });
+
+  // Update modal
+  modals = modals.map((modal) => {
+    if (modal.id === id) {
+      return {
+        id,
+        props,
+      };
+    }
+    return modal;
+  });
+
+  // Update modals
+  setModals(modals);
+};
+
+/**
+ * Remove a modal from the screen by id (if it exists)
+ * @author Gabe Abrams
+ * @param id the uniqueId of the modal
+ */
+export const removeModal = async (id: number) => {
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return !!setModals;
+  });
+
+  // Remove modal
+  modals = modals.filter((modal) => {
+    return modal.id !== id;
+  });
+
+  // Update modals
+  setModals(modals);
+};
+
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -464,6 +558,13 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   ] = useState<boolean>(false);
   setSessionHasExpired = setSessionHasExpiredInner;
 
+  // Modals
+  const [
+    modalsFromState,
+    setModalsInner,
+  ] = useState<ModalTuple[]>([]);
+  setModals = setModalsInner;
+
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -479,7 +580,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   if (alertInfo) {
     modal = (
-      <Modal
+      <ModalForWrapper
         key={`alert-${alertInfo.title}-${alertInfo.text}`}
         title={alertInfo.title}
         type={ModalType.Okay}
@@ -493,7 +594,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         onTopOfOtherModals
       >
         {alertInfo.text}
-      </Modal>
+      </ModalForWrapper>
     );
   }
 
@@ -501,7 +602,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   if (confirmInfo) {
     modal = (
-      <Modal
+      <ModalForWrapper
         key={`confirm-${confirmInfo.title}-${confirmInfo.text}`}
         title={confirmInfo.title}
         type={ModalType.OkayCancel}
@@ -518,10 +619,26 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         dontAllowBackdropExit
       >
         {confirmInfo.text}
-      </Modal>
+      </ModalForWrapper>
     );
   }
 
+  /* ---------- Custom Modals --------- */
+
+  // List of modals added outside reactkit via the Modal component
+  const customModals: React.ReactNode[] = [];
+
+  // Add custom modals
+  modalsFromState.forEach((modalTuple) => {
+    customModals.push(
+      <ModalForWrapper
+        key={String(modalTuple.props.key ?? modalTuple.id)}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...modalTuple.props}
+      />,
+    );
+  });
+
   /*----------------------------------------*/
   /* ---------------- Views --------------- */
   /*----------------------------------------*/
@@ -641,10 +758,12 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
           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;
         }
       `
       : `
@@ -652,10 +771,12 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
           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;
         }
       `
   );
@@ -679,6 +800,9 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
       {/* Modal */}
       {modal}
 
+      {/* Custom Modals */}
+      {customModals}
+
       {/* Body */}
       {body}
     </>

package/src/components/IntelliTable.tsx

@@ -26,7 +26,7 @@ import roundToNumDecimals from '../helpers/roundToNumDecimals';
 import genCSV from '../helpers/genCSV';
 
 // Import shared components
-import Modal from './Modal';
+import Modal from './Modal/ModalForWrapper';
 import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';

package/src/components/{Modal.tsx → Modal/ModalForWrapper.tsx}

@@ -4,7 +4,8 @@
 /* eslint-disable react/destructuring-assignment */
 
 /**
- * A generic popup modal
+ * The displayable modal component (this is the modal that's added to the
+ *   wrapper, not the one that the programmer renders)
  * @author Gabe Abrams
  */
 
@@ -12,18 +13,19 @@
 import React, { useState, useEffect, useRef } from 'react';
 
 // Import other components
-import waitMs from '../helpers/waitMs';
+import waitMs from '../../helpers/waitMs';
 
 // Import types
-import Variant from '../types/Variant';
-import ModalButtonType from '../types/ModalButtonType';
-import ModalSize from '../types/ModalSize';
-import ModalType from '../types/ModalType';
+import Variant from '../../types/Variant';
+import ModalButtonType from '../../types/ModalButtonType';
+import ModalSize from '../../types/ModalSize';
+import ModalType from '../../types/ModalType';
+import ModalProps from './ModalProps';
 
 // Import shared helpers
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
-import { isDarkModeOn } from '../client/initClient';
+import { isDarkModeOn } from '../../client/initClient';
 
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Constants ----------------------------- */
@@ -142,7 +144,7 @@ const getModalButtonTypeToLabelAndVariant = () => {
 /*------------------------------------------------------------------------*/
 
 const style = `
-  .Modal-backdrop {
+  .ModalForWrapper-backdrop {
     position: fixed;
     top: 0;
     left: 0;
@@ -150,7 +152,7 @@ const style = `
     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;
@@ -165,7 +167,7 @@ const style = `
       opacity: 1;
     }
   }
-  .Modal-animating-in {
+  .ModalForWrapper-animating-in {
     animation-name: Modal-animating-in;
     animation-duration: ${MS_TO_ANIMATE}ms;
     animation-iteration-count: 1;
@@ -182,14 +184,14 @@ const style = `
       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;
@@ -205,74 +207,11 @@ const style = `
   }
 `;
 
-/*------------------------------------------------------------------------*/
-/* -------------------------------- Types ------------------------------- */
-/*------------------------------------------------------------------------*/
-
-type Props = {
-  // Type of the modal
-  type?: ModalType,
-  // Size of the modal
-  size?: ModalSize,
-  // Title of the modal (if excluded, no header)
-  title?: React.ReactNode,
-  // The body of the modal
-  children?: React.ReactNode,
-  // Handler to call when modal is closed (if excluded, not closable)
-  onClose?: (type: ModalButtonType) => void,
-  // If true, don't allow the user to click the backdrop to exit
-  dontAllowBackdropExit?: boolean,
-  // If true, don't show the "X" close button
-  dontShowXButton?: boolean,
-  // Custom label for "okay" button
-  okayLabel?: string,
-  // Custom variant for "okay" button
-  okayVariant?: Variant,
-  // Custom label for "cancel" button
-  cancelLabel?: string,
-  // Custom variant for "cancel" button
-  cancelVariant?: Variant,
-  // Custom label for "yes" button
-  yesLabel?: string,
-  // Custom variant for "yes" button
-  yesVariant?: Variant,
-  // Custom label for "no" button
-  noLabel?: string,
-  // Custom variant for "no" button
-  noVariant?: Variant,
-  // Custom label for "abandon" button
-  abandonLabel?: string,
-  // Custom variant for "abandon" button
-  abandonVariant?: Variant,
-  // Custom label for "goBack" button
-  goBackLabel?: string,
-  // Custom variant for "goBack" button
-  goBackVariant?: Variant,
-  // Custom label for "continue" button
-  continueLabel?: string,
-  // Custom variant for "continue" button
-  continueVariant?: Variant,
-  // Custom label for "imSure" button
-  imSureLabel?: string,
-  // Custom variant for "imSure" button
-  imSureVariant?: Variant,
-  // Custom label for "delete" button
-  deleteLabel?: string,
-  // Custom variant for "delete" button
-  deleteVariant?: Variant,
-  // Custom label for "confirm" button
-  confirmLabel?: string,
-  // Custom variant for "confirm" button
-  confirmVariant?: Variant,
-  // True if modal should be on top of other modals
-  onTopOfOtherModals?: boolean,
-};
-
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
-const Modal: React.FC<Props> = (props) => {
+const Modal: React.FC<ModalProps> = (props) => {
   /*------------------------------------------------------------------------*/
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -383,7 +322,7 @@ const Modal: React.FC<Props> = (props) => {
       <button
         key={modalButtonType}
         type="button"
-        className={`Modal-${modalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
+        className={`ModalForWrapper-${modalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
         onClick={() => {
           handleClose(modalButtonType);
         }}
@@ -408,10 +347,10 @@ const Modal: React.FC<Props> = (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
@@ -433,7 +372,7 @@ const Modal: React.FC<Props> = (props) => {
     >
       <style>{style}</style>
       <div
-        className={`Modal-backdrop ${backdropAnimationClass}`}
+        className={`ModalForWrapper-backdrop ${backdropAnimationClass}`}
         style={{
           zIndex: 5000000003,
         }}
@@ -502,7 +441,7 @@ const Modal: React.FC<Props> = (props) => {
             {(onClose && !dontShowXButton) && (
               <button
                 type="button"
-                className="Modal-x-button btn-close"
+                className="ModalForWrapper-x-button btn-close"
                 aria-label="Close"
                 style={{
                   backgroundColor: (

package/src/components/Modal/ModalProps.ts

@@ -0,0 +1,72 @@
+// Import types
+import Variant from '../../types/Variant';
+import ModalButtonType from '../../types/ModalButtonType';
+import ModalSize from '../../types/ModalSize';
+import ModalType from '../../types/ModalType';
+
+/**
+ * Props for the Modal component
+ * @author Gabe Abrams
+ */
+type ModalProps = {
+  // Key of the modal
+  key?: string,
+  // Type of the modal
+  type?: ModalType,
+  // Size of the modal
+  size?: ModalSize,
+  // Title of the modal (if excluded, no header)
+  title?: React.ReactNode,
+  // The body of the modal
+  children?: React.ReactNode,
+  // Handler to call when modal is closed (if excluded, not closable)
+  onClose?: (type: ModalButtonType) => void,
+  // If true, don't allow the user to click the backdrop to exit
+  dontAllowBackdropExit?: boolean,
+  // If true, don't show the "X" close button
+  dontShowXButton?: boolean,
+  // Custom label for "okay" button
+  okayLabel?: string,
+  // Custom variant for "okay" button
+  okayVariant?: Variant,
+  // Custom label for "cancel" button
+  cancelLabel?: string,
+  // Custom variant for "cancel" button
+  cancelVariant?: Variant,
+  // Custom label for "yes" button
+  yesLabel?: string,
+  // Custom variant for "yes" button
+  yesVariant?: Variant,
+  // Custom label for "no" button
+  noLabel?: string,
+  // Custom variant for "no" button
+  noVariant?: Variant,
+  // Custom label for "abandon" button
+  abandonLabel?: string,
+  // Custom variant for "abandon" button
+  abandonVariant?: Variant,
+  // Custom label for "goBack" button
+  goBackLabel?: string,
+  // Custom variant for "goBack" button
+  goBackVariant?: Variant,
+  // Custom label for "continue" button
+  continueLabel?: string,
+  // Custom variant for "continue" button
+  continueVariant?: Variant,
+  // Custom label for "imSure" button
+  imSureLabel?: string,
+  // Custom variant for "imSure" button
+  imSureVariant?: Variant,
+  // Custom label for "delete" button
+  deleteLabel?: string,
+  // Custom variant for "delete" button
+  deleteVariant?: Variant,
+  // Custom label for "confirm" button
+  confirmLabel?: string,
+  // Custom variant for "confirm" button
+  confirmVariant?: Variant,
+  // True if modal should be on top of other modals
+  onTopOfOtherModals?: boolean,
+};
+
+export default ModalProps;

package/src/components/Modal/index.tsx

@@ -0,0 +1,105 @@
+/**
+ * General use modal component
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { useEffect, useRef } from 'react';
+
+// Import shared types
+import ModalProps from './ModalProps';
+
+// Import helpers from AppWrapper
+import { addModal, removeModal, updateModal } from '../AppWrapper';
+
+/*------------------------------------------------------------------------*/
+/* --------------------------- Static Helpers --------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Next unique id
+let nextUniqueId = 0;
+
+/**
+ * Get a new unique id for this modal
+ * @author Gabe Abrams
+ * @returns new unique id
+ */
+const getNextUniqueId = (): number => {
+  // eslint-disable-next-line no-plusplus
+  return nextUniqueId++;
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const Modal: React.FC<ModalProps> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Refs -------------- */
+
+  // Initialize refs
+  const id = useRef<number>(getNextUniqueId());
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------- Lifecycle Functions ------------------------ */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Mount: add to app wrapper
+   * @author Gabe Abrams
+   */
+  useEffect(
+    () => {
+      addModal(id.current, props);
+    },
+    [],
+  );
+
+  /**
+   * Update: update modal props in app wrapper when props change
+   * @author Gabe Abrams
+   */
+  useEffect(
+    () => {
+      // Update modal props
+      updateModal(id.current, props);
+    },
+    [props],
+  );
+
+  /**
+   * Unmount: remove from app wrapper when unmounting
+   * @author Gabe Abrams
+   */
+  useEffect(
+    () => {
+      return () => {
+        // Remove modal
+        removeModal(id.current);
+      };
+    },
+    [],
+  );
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  return (
+    <div className="Modal-shell d-none" />
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------- Wrap Up ------------------------------ */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default Modal;