dce-reactkit 2.0.9 → 2.0.12

package/src/components/AppWrapper.tsx

@@ -16,6 +16,9 @@ import { setSessionExpiryHandler } from '../helpers/visitServerEndpoint';
 // Import shared types
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
+// Import shared components
+import Modal from './Modal';
+
 // Import custom errors
 import ErrorWithCode from '../errors/ErrorWithCode';
 
@@ -36,6 +39,84 @@ type Props = {
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
 
+/*----------------------------------------*/
+/*                  Alert                 */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setAlertInfo: (info: { title: string, text: string }) => void;
+let onAlertClosed: () => 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
+ */
+export const _alert = async (title: string, text: string) => {
+  // Fallback if alert not available
+  if (!setAlertInfo) {
+    return window.alert(`${title}\n\n${text}`);
+  }
+
+  // Return promise that resolves when alert is closed
+  return new Promise((resolve) => {
+    // Setup handler
+    onAlertClosed = () => {
+      resolve(null);
+    };
+
+    // Show the alert
+    setAlertInfo({
+      title,
+      text,
+    });
+  });
+};
+
+/*----------------------------------------*/
+/*                 Confirm                */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setConfirmInfo: (info: { title: string, text: string }) => void;
+let onConfirmClosed: (confirmed: boolean) => void;
+
+/**
+ * Show a confirmation modal with an "Okay" and a "Cancel" 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
+ * @returns true if the user confirmed
+ */
+export const _confirm = async (
+  title: string,
+  text: string,
+): Promise<boolean> => {
+  // Fallback if confirm is not available
+  if (!setConfirmInfo) {
+    return window.confirm(`${title}\n\n${text}`);
+  }
+
+  // Return promise that resolves with result of confirmation
+  return new Promise((resolve) => {
+    // Setup handler
+    onConfirmClosed = (confirmed: boolean) => {
+      resolve(confirmed)
+    };
+
+    // Show the confirm
+    setConfirmInfo({
+      title,
+      text,
+    });
+  });
+};
+
+/*----------------------------------------*/
+/*               Fatal Error              */
+/*----------------------------------------*/
+
 // Stored copies of setters
 let setFatalErrorMessage: (message: string) => void;
 let setFatalErrorCode: (code: string) => void;
@@ -47,7 +128,7 @@ let setFatalErrorTitle: (title: string) => void;
  * @param error the error to show
  * @param [errorTitle] title of the error box
  */
-export const showFatalError = (
+export const _showFatalError = (
   error: any,
   errorTitle: string = 'An Error Occurred',
 ) => {
@@ -65,7 +146,10 @@ export const showFatalError = (
 
   // Handle case where app hasn't loaded
   if (!setFatalErrorMessage || !setFatalErrorCode) {
-    return alert(`An error has occurred: ${message} (code: ${code}). Please contact support.`);
+    return _alert(
+      errorTitle,
+      `${message} (code: ${code}). Please contact support.`,
+    );
   }
 
   // Use setters
@@ -94,15 +178,47 @@ const AppWrapper = (props: Props): React.ReactElement => {
   /* -------------- State ------------- */
 
   // Fatal error
-  const [fatalErrorMessage, setFatalErrorMessageInner] = useState(null);
+  const [
+    fatalErrorMessage,
+    setFatalErrorMessageInner,
+  ] = useState<string | undefined>();
   setFatalErrorMessage = setFatalErrorMessageInner;
-  const [fatalErrorCode, setFatalErrorCodeInner] = useState(null);
+  const [
+    fatalErrorCode,
+    setFatalErrorCodeInner,
+  ] = useState<string | undefined>();
   setFatalErrorCode = setFatalErrorCodeInner;
-  const [fatalErrorTitle, setFatalErrorTitleInner] = useState(null);
+  const [
+    fatalErrorTitle,
+    setFatalErrorTitleInner,
+  ] = useState<string | undefined>();
   setFatalErrorTitle = setFatalErrorTitleInner;
 
+  // Alert
+  const [
+    alertInfo,
+    setAlertInfoInner,
+  ] = useState<{
+    title: string,
+    text: string
+  }>();
+  setAlertInfo = setAlertInfoInner;
+
+  // Confirm
+  const [
+    confirmInfo,
+    setConfirmInfoInner,
+  ] = useState<{
+    title: string,
+    text: string
+  }>();
+  setConfirmInfo = setConfirmInfoInner;
+
   // Session expired
-  const [sessionHasExpired, setSessionHasExpired] = useState(false);
+  const [
+    sessionHasExpired,
+    setSessionHasExpired,
+  ] = useState<boolean>(false);
 
   /*------------------------------------------------------------------------*/
   /*                           Lifecycle Functions                          */
@@ -128,10 +244,60 @@ const AppWrapper = (props: Props): React.ReactElement => {
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /*                  Modal                 */
+  /*----------------------------------------*/
+
+  // Modal that may be defined
+  let modal: React.ReactNode;
+
+  /* -------------- Alert ------------- */
+
+  if (alertInfo) {
+    modal = (
+      <Modal
+        title={alertInfo.title}
+        type={Modal.ModalType.Okay}
+        onClose={() => {
+          // Alert closed
+          if (onAlertClosed) {
+            onAlertClosed();
+          }
+        }}
+        onTopOfOtherModals
+      >
+        {alertInfo.text}
+      </Modal>
+    );
+  }
+
+  /* ------------- Confirm ------------ */
+
+  if (confirmInfo) {
+    modal = (
+      <Modal
+        title={confirmInfo.title}
+        type={Modal.ModalType.OkayCancel}
+        onClose={(buttonType) => {
+          if (onConfirmClosed) {
+            onConfirmClosed(buttonType === Modal.ButtonType.Okay);
+          }
+        }}
+        dontAllowBackdropExit
+      >
+
+      </Modal>
+    );
+  }
+
+  /*----------------------------------------*/
+  /*                  Views                 */
   /*----------------------------------------*/
 
-  // Show error
+  // Body that will be filled with the current view
+  let body: React.ReactNode;
+
+  /* ----------- Fatal Error ---------- */
+
   if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
     // Re-encapsulate in an error
     const error = (
@@ -147,7 +313,7 @@ const AppWrapper = (props: Props): React.ReactElement => {
     );
 
     // Build error screen
-    return (
+    body = (
       <div
         style={{
           display: 'block',
@@ -173,10 +339,24 @@ const AppWrapper = (props: Props): React.ReactElement => {
     );
   }
 
-  // Show the app itself
+  /* --------------- App -------------- */
+
+  if (!body) {
+    body = (
+      <>
+        {children}
+      </>
+    );
+  }
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
   return (
     <>
-      {children}
+      {modal}
+      {body}
     </>
   );
 };

package/src/components/Modal.tsx

@@ -209,6 +209,8 @@ type Props = {
   children?: React.ReactNode,
   // Handler to call when modal is closed (if excluded, not closable)
   onClose?: (type: ButtonType) => void,
+  // If true, don't allow the user to click the backdrop to exit
+  dontAllowBackdropExit?: boolean,
   // Custom label for "okay" button
   okayLabel?: string,
   // Custom variant for "okay" button
@@ -249,6 +251,8 @@ type Props = {
   confirmLabel?: string,
   // Custom variant for "confirm" button
   confirmVariant?: Variant,
+  // True if modal should be on top of other modals
+  onTopOfOtherModals?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -276,6 +280,8 @@ const Modal: (
     title,
     children,
     onClose,
+    dontAllowBackdropExit,
+    onTopOfOtherModals,
   } = props;
 
   /* -------------- State ------------- */
@@ -404,9 +410,17 @@ const Modal: (
       show={visible}
       size={size !== ModalSize.Medium ? size : undefined}
       onHide={() => {
-        handleClose(ButtonType.Cancel);
+        if (!dontAllowBackdropExit) {
+          handleClose(ButtonType.Cancel);
+        }
+      }}
+      style={{
+        zIndex: (
+          onTopOfOtherModals
+            ? 6000000000
+            : 5000000000
+        ),
       }}
-      style={{ zIndex: 5000000000 }}
       backdropClassName="Modal-backdrop"
       centered
     >

package/src/components/TabBox.tsx

@@ -0,0 +1,136 @@
+/**
+ * A box with a tab on the top that holds buttons and other content
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Title of the box
+  title: React.ReactNode,
+  // Children/contents inside the box
+  children: React.ReactNode,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+/* Tab Box */
+.TabBox-box {
+  /* Light Border */
+  border: 2px solid #dedede;
+  
+  /* Rounded Corners (except top-left) */
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 5px;
+
+  /* Very Light Gray Border */
+  background: #fdfdfd;
+
+  /* Align Contents on Left */
+  text-align: left;
+}
+
+/* Container for Title */
+.TabBox-title-container {
+  /* Place on Left */
+  position: relative;
+  left: 0;
+  text-align: left;
+}
+
+/* Tab-style Title */
+.TabBox-title {
+  /* Place so it Barely Overlaps the Box Border */
+  display: inline-block;
+  position: relative;
+  top: 2px; /* Gives Illusion that Border Doesn't Exist Below Tab */
+
+  /* Title-sized Font */
+  font-size: 25px;
+
+  /* Add Border on Top and Sides */
+  border-top: 2px solid #dedede;
+  border-left: 2px solid #dedede;
+  border-right: 2px solid #dedede;
+
+  /* Round the Top Corners */
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+
+  /* Add Text Padding */
+  padding-left: 12px;
+  padding-right: 12px;
+
+  /* Match Background Color of Box */
+  background: #fdfdfd;
+}
+
+/* Make the TabBox's Children Appear Above Title if Overlap Occurs */
+.TabBox-children {
+  position: relative;
+  z-index: 1;
+}
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const TabBox: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    title,
+    children,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  // Full UI
+  return (
+    <div>
+      {/* Style */}
+      <style>{style}</style>
+
+      {/* Title */}
+      <div className="TabBox-title-container">
+        <div className="TabBox-title">
+          {title}
+        </div>
+      </div>
+
+      {/* Contents */}
+      <div className="TabBox-box p-2">
+        <div className="TabBox-children">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default TabBox;

package/src/helpers/alert.tsx

@@ -0,0 +1,5 @@
+import { _alert } from '../components/AppWrapper';
+
+const alert = _alert;
+
+export default alert;

package/src/helpers/confirm.tsx

@@ -0,0 +1,5 @@
+import { _confirm } from '../components/AppWrapper';
+
+const confirm = _confirm;
+
+export default confirm;

package/src/helpers/showFatalError.tsx

@@ -1,3 +1,5 @@
-import { showFatalError } from '../components/AppWrapper';
+import { _showFatalError } from '../components/AppWrapper';
+
+const showFatalError = _showFatalError;
 
 export default showFatalError;

package/lib/components/AppWrapper.tsx

@@ -1,181 +0,0 @@
-/**
- * A wrapper for the entire React app that adds global functionality like
- *   handling for fatal error messages
- * @author Gabe Abrams
- */
-
-// Import React
-import React, { useState, useEffect } from 'react';
-
-// Import shared components
-import ErrorBox from './ErrorBox';
-
-// Import helpers
-import { setSessionExpiryHandler } from '../helpers/visitServerEndpoint';
-
-// Import shared types
-import ReactKitErrorCode from '../types/ReactKitErrorCode';
-
-// Import custom errors
-import ErrorWithCode from '../errors/ErrorWithCode';
-
-/*------------------------------------------------------------------------*/
-/*                                  Props                                 */
-/*------------------------------------------------------------------------*/
-
-type Props = {
-  // The entire app
-  children: React.ReactNode,
-  // True if this app is a dark-themed app
-  dark?: boolean,
-  // Custom session expired message
-  sessionExpiredMessage?: string,
-};
-
-/*------------------------------------------------------------------------*/
-/*                             Static Helpers                             */
-/*------------------------------------------------------------------------*/
-
-// Stored copies of setters
-let setFatalErrorMessage: (message: string) => void;
-let setFatalErrorCode: (code: string) => void;
-
-/**
- * Show a fatal error message
- * @author Gabe Abrams
- * @param error the error to show
- */
-export const showFatalError = (error: any) => {
-  // Determine message and code
-  const message: string = (
-    typeof error === 'string'
-      ? error.trim()
-      : String(error.message ?? 'An unknown error occurred.')
-  );
-  const code: string = (
-    typeof error === 'string'
-      ? ReactKitErrorCode.NoCode
-      : String(error.code ?? ReactKitErrorCode.NoCode)
-  );
-
-  // Handle case where app hasn't loaded
-  if (!setFatalErrorMessage || !setFatalErrorCode) {
-    return alert(`An error has occurred: ${message} (code: ${code}). Please contact support.`);
-  }
-
-  // Use setters
-  setFatalErrorMessage(message);
-  setFatalErrorCode(code);
-};
-
-/*------------------------------------------------------------------------*/
-/*                                Component                               */
-/*------------------------------------------------------------------------*/
-
-const AppWrapper = (props: Props): React.ReactElement => {
-  /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
-  /*------------------------------------------------------------------------*/
-
-  /* -------------- Props ------------- */
-
-  const {
-    children,
-    dark,
-    sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.',
-  } = props;
-
-  /* -------------- State ------------- */
-
-  // Fatal error
-  const [fatalErrorMessage, setFatalErrorMessageInner] = useState(null);
-  setFatalErrorMessage = setFatalErrorMessageInner;
-  const [fatalErrorCode, setFatalErrorCodeInner] = useState(null);
-  setFatalErrorCode = setFatalErrorCodeInner;
-
-  // Session expired
-  const [sessionHasExpired, setSessionHasExpired] = useState(false);
-
-  /*------------------------------------------------------------------------*/
-  /*                           Lifecycle Functions                          */
-  /*------------------------------------------------------------------------*/
-
-  /**
-   * Mount
-   * @author Gabe Abrams
-   */
-  useEffect(
-    () => {
-      // Add session expired handler
-      setSessionExpiryHandler(() => {
-        // Session expired!
-        setSessionHasExpired(true);
-      });
-    },
-    [],
-  );
-
-  /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
-  /*------------------------------------------------------------------------*/
-
-  /*----------------------------------------*/
-  /*                 Main UI                */
-  /*----------------------------------------*/
-
-  // Show error
-  if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
-    // Re-encapsulate in an error
-    const error = (
-      sessionHasExpired
-        ? new ErrorWithCode(
-          fatalErrorMessage,
-          fatalErrorCode,
-        )
-        : new ErrorWithCode(
-          sessionExpiredMessage,
-          ReactKitErrorCode.SessionExpired,
-        )
-    );
-
-    // Build error screen
-    return (
-      <div
-        style={{
-          display: 'block',
-          width: '100vw',
-          minHeight: '100vh',
-          paddingTop: '10rem',
-          backgroundColor: (
-            dark
-              ? '#222'
-              : '#fff'
-          ),
-        }}
-      >
-        <ErrorBox
-          title={(
-            sessionHasExpired
-              ? 'Session Expired'
-              : undefined
-          )}
-          error={error}
-        />
-      </div>
-    );
-  }
-
-  // Show the app itself
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-/*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
-/*------------------------------------------------------------------------*/
-
-// Export component
-export default AppWrapper;