dce-reactkit 3.5.13 → 3.6.1

package/src/components/LogReviewer.tsx

@@ -52,7 +52,7 @@ import ButtonInputGroup from './ButtonInputGroup';
 import IntelliTable from './IntelliTable';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Props
@@ -177,7 +177,7 @@ type AdvancedFilterState = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                  Style                                 */
+/* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 const style = `
@@ -265,7 +265,7 @@ const style = `
 `;
 
 /*------------------------------------------------------------------------*/
-/*                                Constants                               */
+/* ------------------------------ Constants ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const columns: IntelliTableColumn[] = [
@@ -456,7 +456,7 @@ const columns: IntelliTableColumn[] = [
 ];
 
 /*------------------------------------------------------------------------*/
-/*                            Static Functions                            */
+/* -------------------------- Static Functions -------------------------- */
 /*------------------------------------------------------------------------*/
 
 /**
@@ -523,7 +523,7 @@ const genHumanReadableName = (machineReadableName: string) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                  State                                 */
+/* -------------------------------- State ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 /* -------- State Definition -------- */
@@ -722,12 +722,12 @@ const reducer = (state: State, action: Action): State => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const LogReviewer: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -746,7 +746,7 @@ const LogReviewer: React.FC<Props> = (props) => {
   ].forEach((partialContextMap) => {
     Object.keys(partialContextMap).forEach((context) => {
       // Add context
-      contextMap[context] = partialContextMap[context];
+      contextMap[context] = (partialContextMap as any)[context];
 
       // If context has children, add an "uncategorized" subcontext
       if (typeof contextMap[context] !== 'string') {
@@ -764,7 +764,7 @@ const LogReviewer: React.FC<Props> = (props) => {
     LogBuiltInMetadata.Target,
   ].forEach((partialTargetMap) => {
     Object.keys(partialTargetMap).forEach((target) => {
-      targetMap[target] = partialTargetMap[target];
+      targetMap[target] = (partialTargetMap as any)[target];
     });
   });
 
@@ -875,7 +875,7 @@ const LogReviewer: React.FC<Props> = (props) => {
   } = state;
 
   /*------------------------------------------------------------------------*/
-  /*                           Component Functions                          */
+  /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
   /**
@@ -892,8 +892,7 @@ const LogReviewer: React.FC<Props> = (props) => {
     const toLoad: { year: number, month: number }[] = [];
 
     // Loop through dates
-    let year = newDateFilterState.startDate.year;
-    let month = newDateFilterState.startDate.month;
+    let { year, month } = newDateFilterState.startDate;
     while (
       // Earlier year
       (year < newDateFilterState.endDate.year)
@@ -913,7 +912,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           month,
         });
       }
-      
+
       // Increment
       month += 1;
       if (month > 12) {
@@ -983,7 +982,7 @@ const LogReviewer: React.FC<Props> = (props) => {
   };
 
   /*------------------------------------------------------------------------*/
-  /*                           Lifecycle Functions                          */
+  /* ------------------------- Lifecycle Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
   /**
@@ -999,11 +998,11 @@ const LogReviewer: React.FC<Props> = (props) => {
   );
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   // Body that will be filled with the contents of the panel
@@ -1023,7 +1022,7 @@ const LogReviewer: React.FC<Props> = (props) => {
 
   if (!loading) {
     /*----------------------------------------*/
-    /*                 Filters                */
+    /* --------------- Filters -------------- */
     /*----------------------------------------*/
 
     // Filter toggle
@@ -1610,7 +1609,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   placeholder="e.g. 104985"
                   onChange={(e) => {
                     const { value } = e.target;
-                    // Only update if value contains only numbers  
+                    // Only update if value contains only numbers
                     if (/^\d+$/.test(value)) {
                       advancedFilterState.userId = (
                         (e.target.value)
@@ -1700,7 +1699,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   placeholder="e.g. 15948"
                   onChange={(e) => {
                     const { value } = e.target;
-                    // Only update if value contains only numbers  
+                    // Only update if value contains only numbers
                     if (/^\d+$/.test(value)) {
                       advancedFilterState.courseId = (
                         (e.target.value)
@@ -1878,7 +1877,7 @@ const LogReviewer: React.FC<Props> = (props) => {
       Object.keys(logMap[year]).forEach((month) => {
         logMap[year][month].forEach((log) => {
           /* ----------- Date Filter ---------- */
-          
+
           // Before start date
           if (
             // Previous year
@@ -2200,7 +2199,7 @@ const LogReviewer: React.FC<Props> = (props) => {
     });
 
     /*----------------------------------------*/
-    /*                  Data                  */
+    /* ---------------- Data ---------------- */
     /*----------------------------------------*/
 
     // Nothing to show notice
@@ -2279,7 +2278,7 @@ const LogReviewer: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component

package/src/components/Modal.tsx

@@ -1,3 +1,8 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/destructuring-assignment */
+
 /**
  * A generic popup modal
  * @author Gabe Abrams
@@ -15,8 +20,13 @@ import ModalButtonType from '../types/ModalButtonType';
 import ModalSize from '../types/ModalSize';
 import ModalType from '../types/ModalType';
 
+// Import shared helpers
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
+import { isDarkModeOn } from '../client/initClient';
+
 /*------------------------------------------------------------------------*/
-/*                                Constants                               */
+/* ------------------------------ Constants ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Constants
@@ -60,52 +70,75 @@ const modalTypeToModalButtonTypes: {
   ],
 };
 
-// Button type styling and labels
-const ModalButtonTypeToLabelAndVariant = {
-  [ModalButtonType.Okay]: {
-    label: 'Okay',
-    variant: Variant.Dark,
-  },
-  [ModalButtonType.Cancel]: {
-    label: 'Cancel',
-    variant: Variant.Secondary,
-  },
-  [ModalButtonType.Yes]: {
-    label: 'Yes',
-    variant: Variant.Dark,
-  },
-  [ModalButtonType.No]: {
-    label: 'No',
-    variant: Variant.Secondary,
-  },
-  [ModalButtonType.Abandon]: {
-    label: 'Abandon Changes',
-    variant: Variant.Warning,
-  },
-  [ModalButtonType.GoBack]: {
-    label: 'Go Back',
-    variant: Variant.Secondary,
-  },
-  [ModalButtonType.Continue]: {
-    label: 'Continue',
-    variant: Variant.Dark,
-  },
-  [ModalButtonType.ImSure]: {
-    label: 'I am sure',
-    variant: Variant.Warning,
-  },
-  [ModalButtonType.Delete]: {
-    label: 'Yes, Delete',
-    variant: Variant.Danger,
-  },
-  [ModalButtonType.Confirm]: {
-    label: 'Confirm',
-    variant: Variant.Dark,
-  },
+/**
+ * Get button type styling and labels
+ * @author Gabe Abrams
+ * @returns map of button type to label and variant
+ */
+const getModalButtonTypeToLabelAndVariant = () => {
+  const dark = isDarkModeOn();
+  return {
+    [ModalButtonType.Okay]: {
+      label: 'Okay',
+      variant: (
+        dark
+          ? Variant.Light
+          : Variant.Dark
+      ),
+    },
+    [ModalButtonType.Cancel]: {
+      label: 'Cancel',
+      variant: Variant.Secondary,
+    },
+    [ModalButtonType.Yes]: {
+      label: 'Yes',
+      variant: (
+        dark
+          ? Variant.Light
+          : Variant.Dark
+      ),
+    },
+    [ModalButtonType.No]: {
+      label: 'No',
+      variant: Variant.Secondary,
+    },
+    [ModalButtonType.Abandon]: {
+      label: 'Abandon Changes',
+      variant: Variant.Warning,
+    },
+    [ModalButtonType.GoBack]: {
+      label: 'Go Back',
+      variant: Variant.Secondary,
+    },
+    [ModalButtonType.Continue]: {
+      label: 'Continue',
+      variant: (
+        dark
+          ? Variant.Light
+          : Variant.Dark
+      ),
+    },
+    [ModalButtonType.ImSure]: {
+      label: 'I am sure',
+      variant: Variant.Warning,
+    },
+    [ModalButtonType.Delete]: {
+      label: 'Yes, Delete',
+      variant: Variant.Danger,
+    },
+    [ModalButtonType.Confirm]: {
+      label: 'Confirm',
+      variant: (
+        dark
+          ? Variant.Light
+          : Variant.Dark
+      ),
+    },
+  };
 };
 
 /*------------------------------------------------------------------------*/
-/*                                  Style                                 */
+/* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 const style = `
@@ -173,7 +206,7 @@ const style = `
 `;
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 type Props = {
@@ -234,12 +267,12 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const Modal: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -256,9 +289,6 @@ const Modal: React.FC<Props> = (props) => {
 
   /* -------------- State ------------- */
 
-  // If true, the modal is shown
-  const [visible, setVisible] = useState(false);
-
   // True if animation is in use
   const [animatingIn, setAnimatingIn] = useState(true);
   const [animatingPop, setAnimatingPop] = useState(false);
@@ -267,7 +297,7 @@ const Modal: React.FC<Props> = (props) => {
   const mounted = useRef(false);
 
   /*------------------------------------------------------------------------*/
-  /*                           Lifecycle Functions                          */
+  /* ------------------------- Lifecycle Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
   /**
@@ -278,14 +308,12 @@ const Modal: React.FC<Props> = (props) => {
     () => {
       (async () => {
         // Set defaults
-        setVisible(false);
         setAnimatingIn(true);
         setAnimatingPop(false);
         // Wait for animation
         await waitMs(MS_TO_ANIMATE);
         // Update to state after animated in
         if (mounted.current) {
-          setVisible(true);
           setAnimatingIn(false);
         }
       })();
@@ -298,49 +326,48 @@ const Modal: React.FC<Props> = (props) => {
   );
 
   /*------------------------------------------------------------------------*/
-  /*                           Component Functions                          */
+  /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
   /**
    * Handles the closing of the modal
    * @author Gabe Abrams
-   * @param ModalButtonType the button that was clicked when closing the
+   * @param modalButtonType the button that was clicked when closing the
    *   modal
    */
-  const handleClose = async (ModalButtonType: ModalButtonType) => {
+  const handleClose = async (modalButtonType: ModalButtonType) => {
     // Don't close if no handler
     if (!onClose) {
       return;
     }
 
-    onClose(ModalButtonType);
+    onClose(modalButtonType);
   };
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
-  /*----------------------------------------*/
-  /*                 Footer                 */
-  /*----------------------------------------*/
-
   // Get list of buttons for this modal type
   const ModalButtonTypes: ModalButtonType[] = modalTypeToModalButtonTypes[type] ?? [];
 
+  // Get map of button type to label and variant
+  const ModalButtonTypeToLabelAndVariant = getModalButtonTypeToLabelAndVariant();
+
   // Create buttons
-  const buttons = ModalButtonTypes.map((ModalButtonType: ModalButtonType, i) => {
+  const buttons = ModalButtonTypes.map((modalButtonType: ModalButtonType, i) => {
     // Get default style
     let {
       label,
       variant,
-    } = ModalButtonTypeToLabelAndVariant[ModalButtonType];
+    } = ModalButtonTypeToLabelAndVariant[modalButtonType];
 
     // Override with customizations
-    const newLabel = props[`${ModalButtonType}Label`];
+    const newLabel = props[`${modalButtonType}Label`];
     if (newLabel) {
       label = newLabel;
     }
-    const newVariant = props[`${ModalButtonType}Variant`];
+    const newVariant = props[`${modalButtonType}Variant`];
     if (newVariant) {
       variant = newVariant;
     }
@@ -351,11 +378,11 @@ const Modal: React.FC<Props> = (props) => {
     // Create the button
     return (
       <button
-        key={ModalButtonType}
+        key={modalButtonType}
         type="button"
-        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
+        className={`Modal-${modalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
         onClick={() => {
-          handleClose(ModalButtonType);
+          handleClose(modalButtonType);
         }}
       >
         {label}
@@ -387,7 +414,7 @@ const Modal: React.FC<Props> = (props) => {
   // Render the modal
   return (
     <div
-      className={`modal show modal-dialog-scrollable modal-dialog-centered`}
+      className="modal show modal-dialog-scrollable modal-dialog-centered"
       tabIndex={-1}
       style={{
         zIndex: (
@@ -430,8 +457,36 @@ const Modal: React.FC<Props> = (props) => {
           zIndex: 5000000002,
         }}
       >
-        <div className="modal-content">
-          <div className="modal-header">
+        <div
+          className="modal-content"
+          style={{
+            borderColor: (
+              isDarkModeOn()
+                ? 'gray'
+                : undefined
+            ),
+          }}
+        >
+          <div
+            className="modal-header"
+            style={{
+              color: (
+                isDarkModeOn()
+                  ? 'white'
+                  : undefined
+              ),
+              backgroundColor: (
+                isDarkModeOn()
+                  ? '#444'
+                  : undefined
+              ),
+              borderBottom: (
+                isDarkModeOn()
+                  ? '0.1rem solid gray'
+                  : undefined
+              ),
+            }}
+          >
             <h5
               className="modal-title"
               style={{
@@ -454,12 +509,45 @@ const Modal: React.FC<Props> = (props) => {
             )}
           </div>
           {children && (
-            <div className="modal-body">
+            <div
+              className="modal-body"
+              style={{
+                color: (
+                  isDarkModeOn()
+                    ? 'white'
+                    : undefined
+                ),
+                backgroundColor: (
+                  isDarkModeOn()
+                    ? '#444'
+                    : undefined
+                ),
+              }}
+            >
               {children}
             </div>
           )}
           {footer && (
-            <div className="modal-footer pt-1 pb-1">
+            <div
+              className="modal-footer pt-1 pb-1"
+              style={{
+                color: (
+                  isDarkModeOn()
+                    ? 'white'
+                    : undefined
+                ),
+                backgroundColor: (
+                  isDarkModeOn()
+                    ? '#444'
+                    : undefined
+                ),
+                borderTop: (
+                  isDarkModeOn()
+                    ? '0.1rem solid gray'
+                    : undefined
+                ),
+              }}
+            >
               {footer}
             </div>
           )}
@@ -470,7 +558,7 @@ const Modal: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 export default Modal;

package/src/components/PopFailureMark.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Props definition
@@ -21,7 +21,7 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                  Style                                 */
+/* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 const style = `
@@ -110,12 +110,12 @@ const style = `
 `;
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const PopFailureMark: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -128,11 +128,11 @@ const PopFailureMark: React.FC<Props> = (props) => {
   } = props;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   return (
@@ -164,7 +164,7 @@ const PopFailureMark: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component

package/src/components/PopPendingMark.tsx

@@ -11,7 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHourglass } from '@fortawesome/free-solid-svg-icons';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Props definition
@@ -25,7 +25,7 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                  Style                                 */
+/* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 const style = `
@@ -83,12 +83,12 @@ const style = `
 `;
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const PopPendingMark: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -101,11 +101,11 @@ const PopPendingMark: React.FC<Props> = (props) => {
   } = props;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   return (
@@ -134,7 +134,7 @@ const PopPendingMark: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component