dce-reactkit 3.9.3 → 3.9.4-beta.1

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

@@ -44,6 +44,30 @@ export declare const confirm: (title: string, text: string, opts?: {
     cancelButtonText?: string;
     cancelButtonVariant?: Variant;
 }) => Promise<boolean>;
+/**
+ * Show a prompt modal asking the user for input
+ * @author Yuen Ler Chow
+ * @param title the title text to display at the top of the prompt
+ * @param text the text to display in the prompt
+ * @param [opts={}] additional options for the prompt dialog
+ * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.defaultText] the default text for the input field
+ * @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 Promise that resolves with the input string or null if canceled
+ */
+export declare const prompt: (title: string, text: string, currentInputFieldText: string, opts?: {
+    placeholder?: string | undefined;
+    defaultText?: string | undefined;
+    confirmButtonText?: string | undefined;
+    confirmButtonVariant?: Variant | undefined;
+    cancelButtonText?: string | undefined;
+    cancelButtonVariant?: Variant | undefined;
+    minNumChars?: number | undefined;
+    findValidationError?: ((text: string) => string | undefined) | undefined;
+} | undefined) => Promise<string | null>;
 /**
  * Show a fatal error message
  * @author Gabe Abrams

package/dist/esm/types/types/ModalType.d.ts

@@ -4,6 +4,7 @@
  */
 declare enum ModalType {
     Okay = "okay",
+    Cancel = "cancel",
     OkayCancel = "okay-cancel",
     YesNo = "yes-no",
     YesNoCancel = "yes-no-cancel",

package/dist/index.d.ts

@@ -131,6 +131,7 @@ declare enum ModalSize {
  */
 declare enum ModalType {
     Okay = "okay",
+    Cancel = "cancel",
     OkayCancel = "okay-cancel",
     YesNo = "yes-no",
     YesNoCancel = "yes-no-cancel",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.9.3",
+  "version": "3.9.4-beta.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AppWrapper.tsx

@@ -240,6 +240,124 @@ export const confirm = async (
   });
 };
 
+/*----------------------------------------*/
+/* --------------- Prompt -------------- */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setPromptInfo: (
+  info:
+  | undefined
+  | {
+    title: string;
+    text: string;
+    currentInputFieldText: string,
+    opts: {
+      placeholder?: string,
+      defaultText?: string,
+      confirmButtonText?: string,
+      confirmButtonVariant?: Variant,
+      cancelButtonText?: string,
+      cancelButtonVariant?: Variant,
+      minNumChars?: number,
+      findValidationError?: (text: string) => string | undefined,
+    },
+  },
+) => void;
+
+// Function to call when prompt is closed
+let onPromptClosed: (result: string | null) => void;
+
+/**
+ * Show a prompt modal asking the user for input
+ * @author Yuen Ler Chow
+ * @param title the title text to display at the top of the prompt
+ * @param text the text to display in the prompt
+ * @param [opts={}] additional options for the prompt dialog
+ * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.defaultText] the default text for the input field
+ * @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 Promise that resolves with the input string or null if canceled
+ */
+export const prompt = async (
+  title: string,
+  text: string,
+  currentInputFieldText: string,
+  opts?: {
+    placeholder?: string,
+    defaultText?: string,
+    confirmButtonText?: string,
+    confirmButtonVariant?: Variant,
+    cancelButtonText?: string,
+    cancelButtonVariant?: Variant,
+    minNumChars?: number,
+    findValidationError?: (text: string) => string | undefined,
+  },
+): Promise<string | null> => {
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return !!setPromptInfo;
+  });
+
+  // Fallback if prompt is not available
+  if (!setPromptInfo) {
+    const resultPassesValidation = false;
+    while (!resultPassesValidation) {
+      // eslint-disable-next-line no-alert
+      const result = window.prompt(
+        `${title}\n\n${text}`,
+        opts?.defaultText ?? '',
+      );
+
+      if (result === null) {
+        return null;
+      }
+
+      // Validate min num chars
+      const minNumCharsValidationError = (
+        (opts?.minNumChars && result.length < opts.minNumChars)
+          ? `Please enter at least ${opts.minNumChars} characters.`
+          : undefined
+      );
+
+      // Run custom validation
+      const customValidationError = (
+        opts?.findValidationError
+        && opts.findValidationError(result)
+      );
+
+      // Show validation issue
+      if (minNumCharsValidationError || customValidationError) {
+        alert(
+          'Invalid Input',
+          `${minNumCharsValidationError ?? ''} ${customValidationError ?? ''}`,
+        );
+      } else {
+        return result;
+      }
+    }
+  }
+
+  // Return promise that resolves with result of prompt
+  return new Promise((resolve) => {
+    // Setup handler
+    onPromptClosed = (result: string | null) => {
+      resolve(result);
+    };
+
+    // Show the prompt
+    setPromptInfo({
+      title,
+      text,
+      currentInputFieldText,
+      opts: (opts ?? {}),
+    });
+  });
+};
+
 /*----------------------------------------*/
 /* ------------- Fatal Error ------------ */
 /*----------------------------------------*/
@@ -465,6 +583,27 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   >(undefined);
   setConfirmInfo = setConfirmInfoInner;
 
+  // Prompt
+  const [promptInfo, setPromptInfoInner] = useState<
+  | undefined
+  | {
+    title: string,
+    text: string,
+    currentInputFieldText: string,
+    opts: {
+      placeholder?: string,
+      defaultText?: string,
+      confirmButtonText?: string,
+      confirmButtonVariant?: Variant,
+      cancelButtonText?: string,
+      cancelButtonVariant?: Variant,
+      minNumChars?: number,
+      findValidationError?: (text: string) => string | undefined,
+    }
+  }
+  >(undefined);
+  setPromptInfo = setPromptInfoInner;
+
   // Session expired
   const [
     sessionHasExpired,
@@ -531,6 +670,83 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     );
   }
 
+  /* ------------- Prompt ------------ */
+
+  if (promptInfo) {
+    // Run min char validation
+    const minNumCharsValidationError = (
+      (
+        promptInfo.opts.minNumChars
+        && promptInfo.currentInputFieldText.length < promptInfo.opts.minNumChars
+      )
+        ? `Please enter at least ${promptInfo.opts.minNumChars} characters.`
+        : undefined
+    );
+
+    // Run custom validation
+    const customValidationError = (
+      promptInfo.opts.findValidationError
+      && promptInfo.opts.findValidationError(promptInfo.currentInputFieldText)
+    );
+
+    modal = (
+      <ModalForWrapper
+        key={`prompt-${promptInfo.title}-${promptInfo.text}`}
+        title={promptInfo.title}
+        // only show the cancel button if there is a validation error
+        type={(
+          (customValidationError || minNumCharsValidationError)
+            ? ModalType.Cancel
+            : ModalType.OkayCancel
+        )}
+        okayLabel={promptInfo.opts.confirmButtonText}
+        okayVariant={promptInfo.opts.confirmButtonVariant}
+        cancelLabel={promptInfo.opts.cancelButtonText}
+        cancelVariant={promptInfo.opts.cancelButtonVariant}
+        onClose={(buttonType) => {
+          const result = (
+            buttonType === ModalButtonType.Okay
+              ? promptInfo.currentInputFieldText
+              : null
+          );
+
+          setPromptInfo(undefined);
+
+          if (onPromptClosed) {
+            onPromptClosed(result);
+          }
+        }}
+        onTopOfOtherModals
+        dontAllowBackdropExit
+      >
+        <div className="d-flex flex-column align-items-center">
+          <p>{promptInfo.text}</p>
+          <input
+            type="text"
+            placeholder={promptInfo.opts.placeholder}
+            value={promptInfo.currentInputFieldText}
+            onChange={(e) => {
+              return setPromptInfo({
+                ...promptInfo,
+                currentInputFieldText: e.target.value,
+              });
+            }}
+          />
+          {minNumCharsValidationError && (
+            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
+              {minNumCharsValidationError}
+            </div>
+          )}
+          {customValidationError && (
+            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
+              {customValidationError}
+            </div>
+          )}
+        </div>
+      </ModalForWrapper>
+    );
+  }
+
   /* ------ Custom Modal Portals ------ */
 
   // Custom modal portals

package/src/components/Modal/index.tsx

@@ -49,6 +49,9 @@ const modalTypeToModalButtonTypes: {
   [ModalType.Okay]: [
     ModalButtonType.Okay,
   ],
+  [ModalType.Cancel]: [
+    ModalButtonType.Cancel,
+  ],
   [ModalType.OkayCancel]: [
     ModalButtonType.Okay,
     ModalButtonType.Cancel,

package/src/types/ModalType.tsx

@@ -4,6 +4,7 @@
  */
 enum ModalType {
   Okay = 'okay', // [Okay]
+  Cancel = 'cancel', // [Cancel]
   OkayCancel = 'okay-cancel', // [Okay] [Cancel]
   YesNo = 'yes-no', // [Yes] [No]
   YesNoCancel = 'yes-no-cancel', // [Yes] [No] [Cancel]