dce-reactkit 3.9.3 → 3.9.4-beta.1

package/dist/cjs/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/cjs/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/esm/index.js

@@ -158,6 +158,7 @@ var ModalButtonType$1 = ModalButtonType;
 var ModalType;
 (function (ModalType) {
     ModalType["Okay"] = "okay";
+    ModalType["Cancel"] = "cancel";
     ModalType["OkayCancel"] = "okay-cancel";
     ModalType["YesNo"] = "yes-no";
     ModalType["YesNoCancel"] = "yes-no-cancel";
@@ -312,6 +313,9 @@ const modalTypeToModalButtonTypes = {
     [ModalType$1.Okay]: [
         ModalButtonType$1.Okay,
     ],
+    [ModalType$1.Cancel]: [
+        ModalButtonType$1.Cancel,
+    ],
     [ModalType$1.OkayCancel]: [
         ModalButtonType$1.Okay,
         ModalButtonType$1.Cancel,
@@ -1052,6 +1056,11 @@ const confirm = (title, text, opts) => __awaiter(void 0, void 0, void 0, functio
     });
 });
 /*----------------------------------------*/
+/* --------------- Prompt -------------- */
+/*----------------------------------------*/
+// Stored copies of setters
+let setPromptInfo;
+/*----------------------------------------*/
 /* ------------- Fatal Error ------------ */
 /*----------------------------------------*/
 // Stored copies of setters
@@ -1067,14 +1076,14 @@ const fatalErrorHandlers = [];
  * @param [errorTitle] title of the error box
  */
 const showFatalError = (error, errorTitle = 'An Error Occurred') => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
+    var _b, _c;
     // Determine message and code
     const message = (typeof error === 'string'
         ? error.trim()
-        : String((_a = error.message) !== null && _a !== void 0 ? _a : 'An unknown error occurred.'));
+        : String((_b = error.message) !== null && _b !== void 0 ? _b : 'An unknown error occurred.'));
     const code = (typeof error === 'string'
         ? ReactKitErrorCode$1.NoCode
-        : String((_b = error.code) !== null && _b !== void 0 ? _b : ReactKitErrorCode$1.NoCode));
+        : String((_c = error.code) !== null && _c !== void 0 ? _c : ReactKitErrorCode$1.NoCode));
     // Call all fatal error listeners
     try {
         fatalErrorHandlers.forEach((handler) => {
@@ -1201,6 +1210,9 @@ const AppWrapper = (props) => {
     // Confirm
     const [confirmInfo, setConfirmInfoInner,] = useState(undefined);
     setConfirmInfo = setConfirmInfoInner;
+    // Prompt
+    const [promptInfo, setPromptInfoInner] = useState(undefined);
+    setPromptInfo = setPromptInfoInner;
     // Session expired
     const [sessionHasExpired, setSessionHasExpiredInner,] = useState(false);
     setSessionHasExpired = setSessionHasExpiredInner;
@@ -1231,6 +1243,34 @@ const AppWrapper = (props) => {
                 }
             }, onTopOfOtherModals: true, dontAllowBackdropExit: true }, confirmInfo.text));
     }
+    /* ------------- 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 = (React__default.createElement(Modal, { key: `prompt-${promptInfo.title}-${promptInfo.text}`, title: promptInfo.title, 
+            // only show the cancel button if there is a validation error
+            type: ((customValidationError || minNumCharsValidationError)
+                ? ModalType$1.Cancel
+                : ModalType$1.OkayCancel), okayLabel: promptInfo.opts.confirmButtonText, okayVariant: promptInfo.opts.confirmButtonVariant, cancelLabel: promptInfo.opts.cancelButtonText, cancelVariant: promptInfo.opts.cancelButtonVariant, onClose: (buttonType) => {
+                (buttonType === ModalButtonType$1.Okay
+                    ? promptInfo.currentInputFieldText
+                    : null);
+                setPromptInfo(undefined);
+            }, onTopOfOtherModals: true, dontAllowBackdropExit: true },
+            React__default.createElement("div", { className: "d-flex flex-column align-items-center" },
+                React__default.createElement("p", null, promptInfo.text),
+                React__default.createElement("input", { type: "text", placeholder: promptInfo.opts.placeholder, value: promptInfo.currentInputFieldText, onChange: (e) => {
+                        return setPromptInfo(Object.assign(Object.assign({}, promptInfo), { currentInputFieldText: e.target.value }));
+                    } }),
+                minNumCharsValidationError && (React__default.createElement("div", { className: "text-danger bg-danger bg-opacity-25 p-2 m-1 rounded" }, minNumCharsValidationError)),
+                customValidationError && (React__default.createElement("div", { className: "text-danger bg-danger bg-opacity-25 p-2 m-1 rounded" }, customValidationError)))));
+    }
     /* ------ Custom Modal Portals ------ */
     // Custom modal portals
     const customModalPortals = [];