dce-reactkit 3.7.10 → 3.7.12

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

@@ -5,7 +5,6 @@
  */
 import React from 'react';
 import Variant from '../types/Variant';
-import ModalProps from './Modal/ModalProps';
 type Props = {
     children: React.ReactNode;
 };
@@ -62,25 +61,5 @@ 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/esm/types/components/Modal/index.d.ts

@@ -1,5 +1,6 @@
 /**
- * General use modal component
+ * 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';

package/dist/esm/types/constants/NUM_MODAL_PORTALS.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The number of modal portals that can be rendered at once.
+ * @author Gabe Abrams
+ */
+declare const NUM_MODAL_PORTALS = 50;
+export default NUM_MODAL_PORTALS;

package/dist/index.d.ts

@@ -18,6 +18,85 @@ declare enum Variant {
     Dark = "dark"
 }
 
+/**
+ * A wrapper for the entire React app that adds global functionality like
+ *   handling for fatal error messages, adds bootstrap support
+ * @author Gabe Abrams
+ */
+
+type Props$k = {
+    children: React$1.ReactNode;
+};
+/**
+ * Redirect to a new page
+ * @author Gabe Abrams
+ * @param url the url to redirect to
+ * @param destination the destination of the redirect, for example "YouTube"
+ *   and will be used in the following text: `Redirecting to ${destination}...`
+ */
+declare const leaveToURL: (url: string, destination: string) => Promise<void>;
+/**
+ * Show an alert modal with an "Okay" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ */
+declare const alert: (title: string, text: string) => Promise<undefined>;
+/**
+ * Show a confirmation modal with an "Okay" and a "Cancel" button
+ *   (with the option to customize the text of those buttons)
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ * @param [opts={}] additional options for the confirmation dialog
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm
+ *   button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel
+ *   button
+ * @returns true if the user confirmed
+ */
+declare const confirm: (title: string, text: string, opts?: {
+    confirmButtonText?: string;
+    confirmButtonVariant?: Variant;
+    cancelButtonText?: string;
+    cancelButtonVariant?: Variant;
+}) => Promise<boolean>;
+/**
+ * Show a fatal error message
+ * @author Gabe Abrams
+ * @param error the error to show
+ * @param [errorTitle] title of the error box
+ */
+declare const showFatalError: (error: any, errorTitle?: string) => Promise<void>;
+/**
+ * Add a handler for when a fatal error occurs (or when a session expiry occurs)
+ * @author Gabe Abrams
+ */
+declare const addFatalErrorHandler: (handler: () => void) => void;
+declare const AppWrapper: React$1.FC<Props$k>;
+
+/**
+ * Loading spinner/indicator
+ * @author Gabe Abrams
+ */
+declare const LoadingSpinner: () => JSX.Element;
+
+/**
+ * Displays an error
+ * @author Gabe Abrams
+ */
+
+type Props$j = {
+    error: any;
+    title?: string;
+    onClose?: () => void;
+    variant?: Variant;
+    icon?: IconProp;
+};
+declare const ErrorBox: React$1.FC<Props$j>;
+
 /**
  * Types of buttons in the modal
  * @author Gabe Abrams
@@ -99,86 +178,8 @@ type ModalProps = {
 };
 
 /**
- * A wrapper for the entire React app that adds global functionality like
- *   handling for fatal error messages, adds bootstrap support
- * @author Gabe Abrams
- */
-
-type Props$k = {
-    children: React$1.ReactNode;
-};
-/**
- * Redirect to a new page
- * @author Gabe Abrams
- * @param url the url to redirect to
- * @param destination the destination of the redirect, for example "YouTube"
- *   and will be used in the following text: `Redirecting to ${destination}...`
- */
-declare const leaveToURL: (url: string, destination: string) => Promise<void>;
-/**
- * Show an alert modal with an "Okay" button
- * @author Gabe Abrams
- * @param title the title text to display at the top of the alert
- * @param text the text to display in the alert
- */
-declare const alert: (title: string, text: string) => Promise<undefined>;
-/**
- * Show a confirmation modal with an "Okay" and a "Cancel" button
- *   (with the option to customize the text of those buttons)
- * @author Gabe Abrams
- * @param title the title text to display at the top of the alert
- * @param text the text to display in the alert
- * @param [opts={}] additional options for the confirmation dialog
- * @param [opts.confirmButtonText=Okay] the text of the confirm button
- * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm
- *   button
- * @param [opts.cancelButtonText=Cancel] the text of the cancel button
- * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel
- *   button
- * @returns true if the user confirmed
- */
-declare const confirm: (title: string, text: string, opts?: {
-    confirmButtonText?: string;
-    confirmButtonVariant?: Variant;
-    cancelButtonText?: string;
-    cancelButtonVariant?: Variant;
-}) => Promise<boolean>;
-/**
- * Show a fatal error message
- * @author Gabe Abrams
- * @param error the error to show
- * @param [errorTitle] title of the error box
- */
-declare const showFatalError: (error: any, errorTitle?: string) => Promise<void>;
-/**
- * Add a handler for when a fatal error occurs (or when a session expiry occurs)
- * @author Gabe Abrams
- */
-declare const addFatalErrorHandler: (handler: () => void) => void;
-declare const AppWrapper: React$1.FC<Props$k>;
-
-/**
- * Loading spinner/indicator
- * @author Gabe Abrams
- */
-declare const LoadingSpinner: () => JSX.Element;
-
-/**
- * Displays an error
- * @author Gabe Abrams
- */
-
-type Props$j = {
-    error: any;
-    title?: string;
-    onClose?: () => void;
-    variant?: Variant;
-    icon?: IconProp;
-};
-declare const ErrorBox: React$1.FC<Props$j>;
-
-/**
- * General use modal component
+ * The displayable modal component (this is the modal that's added to the
+ *   wrapper, not the one that the programmer renders)
  * @author Gabe Abrams
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.7.10",
+  "version": "3.7.12",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -33,7 +33,8 @@
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
     "express": "^x.x.x",
-    "react": "^x.x.x"
+    "react": "^x.x.x",
+    "react-dom": "^x.x.x"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",

package/src/components/AppWrapper.tsx

@@ -19,12 +19,11 @@ 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 ModalForWrapper from './Modal/ModalForWrapper';
+import ModalForWrapper from './Modal';
 
 // Import custom errors
 import ErrorWithCode from '../errors/ErrorWithCode';
@@ -38,6 +37,7 @@ import {
   isDarkModeOn,
 } from '../client/initClient';
 import waitMs from '../helpers/waitMs';
+import NUM_MODAL_PORTALS from '../constants/NUM_MODAL_PORTALS';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Props ------------------------------- */
@@ -359,99 +359,6 @@ 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 ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -558,13 +465,6 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   ] = useState<boolean>(false);
   setSessionHasExpired = setSessionHasExpiredInner;
 
-  // Modals
-  const [
-    modalsFromState,
-    setModalsInner,
-  ] = useState<ModalTuple[]>([]);
-  setModals = setModalsInner;
-
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -624,21 +524,19 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     );
   }
 
-  /* ---------- Custom Modals --------- */
-
-  // List of modals added outside reactkit via the Modal component
-  const customModals: React.ReactNode[] = [];
+  /* ------ Custom Modal Portals ------ */
 
-  // 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}
+  // Custom modal portals
+  const customModalPortals: React.ReactNode[] = [];
+  for (let i = 0; i < NUM_MODAL_PORTALS; i++) {
+    const portalId = `modal-portal-${i}`;
+    customModalPortals.push(
+      <div
+        key={portalId}
+        id={portalId}
       />,
     );
-  });
+  }
 
   /*----------------------------------------*/
   /* ---------------- Views --------------- */
@@ -801,8 +699,8 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
       {/* Modal */}
       {modal}
 
-      {/* Custom Modals */}
-      {customModals}
+      {/* Custom Modal Portals */}
+      {customModalPortals}
 
       {/* 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/ModalForWrapper';
+import Modal from './Modal';
 import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';