dce-reactkit 3.9.3 → 3.9.4-beta-prompt.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/index.d.ts

@@ -1,4 +1,4 @@
-import AppWrapper, { alert, confirm, showFatalError, addFatalErrorHandler, leaveToURL } from './components/AppWrapper';
+import AppWrapper, { alert, prompt, confirm, showFatalError, addFatalErrorHandler, leaveToURL } from './components/AppWrapper';
 import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
 import Modal from './components/Modal';
@@ -99,4 +99,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, visitEndpointOnAnotherServer, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, visitEndpointOnAnotherServer, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

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

@@ -63,6 +63,30 @@ 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
+ */
+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
@@ -131,6 +155,7 @@ declare enum ModalSize {
  */
 declare enum ModalType {
     Okay = "okay",
+    Cancel = "cancel",
     OkayCancel = "okay-cancel",
     YesNo = "yes-no",
     YesNoCancel = "yes-no-cancel",
@@ -1690,4 +1715,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitEndpointOnAnotherServer, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitEndpointOnAnotherServer, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.9.3",
+  "version": "3.9.4-beta-prompt.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}
+        // Don't show ok 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/index.ts

@@ -1,6 +1,7 @@
 // Import components
 import AppWrapper, {
   alert,
+  prompt,
   confirm,
   showFatalError,
   addFatalErrorHandler,
@@ -148,6 +149,7 @@ export {
   Dropdown,
   // Global functions
   alert,
+  prompt,
   confirm,
   showFatalError,
   // Errors

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]