dce-reactkit 3.0.40 → 3.0.43

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useReducer } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle, faCircle, faDotCircle, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationTriangle, faCircle, faDotCircle, faCheckSquare, faHourglass, faClipboard } from '@fortawesome/free-solid-svg-icons';
 import { faCircle as faCircle$1, faSquare } from '@fortawesome/free-regular-svg-icons';
 
 /******************************************************************************
@@ -271,7 +271,7 @@ const ModalButtonTypeToLabelAndVariant = {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$4 = `
+const style$6 = `
   .Modal-backdrop {
     position: fixed;
     top: 0;
@@ -445,7 +445,7 @@ const Modal = (props) => {
             left: 0,
             right: 0,
         } },
-        React.createElement("style", null, style$4),
+        React.createElement("style", null, style$6),
         React.createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
                 zIndex: 5000000003,
             }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -710,7 +710,7 @@ const AppWrapper = (props) => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$3 = `
+const style$5 = `
 /* Container fades in */
 .LoadingSpinner-container {
   animation-name: LoadingSpinner-container-fade-in;
@@ -788,7 +788,7 @@ const LoadingSpinner = () => {
     /*------------------------------------------------------------------------*/
     // Add all four blips to a container
     return (React.createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
-        React.createElement("style", null, style$3),
+        React.createElement("style", null, style$5),
         React.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-1 me-1" }),
         React.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-2 me-1" }),
         React.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-3 me-1" }),
@@ -802,7 +802,7 @@ const LoadingSpinner = () => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$2 = `
+const style$4 = `
   /* Tab Box */
   .TabBox-box {
     /* Light Border */
@@ -882,7 +882,7 @@ const TabBox = (props) => {
     /*----------------------------------------*/
     // Full UI
     return (React.createElement("div", { className: `TabBox-container ${noBottomMargin ? '' : 'mb-2'}` },
-        React.createElement("style", null, style$2),
+        React.createElement("style", null, style$4),
         React.createElement("div", { className: "TabBox-title-container" },
             React.createElement("div", { className: "TabBox-title" }, title)),
         React.createElement("div", { className: `TabBox-box ps-2 pt-2 pe-2 ${noBottomPadding ? '' : 'pb-2'}` },
@@ -1154,7 +1154,7 @@ const SimpleDateChooser = (props) => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$1 = `
+const style$3 = `
   .Drawer-container {
     margin-left: 1rem;
     margin-right: 1rem;
@@ -1186,7 +1186,7 @@ const Drawer = (props) => {
     /*                 Main UI                */
     /*----------------------------------------*/
     return (React.createElement("div", { className: "Drawer-container" },
-        React.createElement("style", null, style$1),
+        React.createElement("style", null, style$3),
         children));
 };
 
@@ -1197,7 +1197,7 @@ const Drawer = (props) => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style = `
+const style$2 = `
   .PopSuccessMark-outer-container {
     position: relative;
     display: inline-block;
@@ -1302,7 +1302,7 @@ const PopSuccessMark = (props) => {
             width: `${sizeRem}rem`,
             height: `${sizeRem}rem`,
         }, "aria-label": "checkmark indicating success" },
-        React.createElement("style", null, style),
+        React.createElement("style", null, style$2),
         React.createElement("div", { className: `PopSuccessMark-check-stroke-1 bg-${checkVariant}`, style: {
                 borderRadius: `${sizeRem / 5}rem`,
             } }),
@@ -1311,6 +1311,336 @@ const PopSuccessMark = (props) => {
             } })));
 };
 
+/**
+ * Failure x mark that pops into view
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+const style$1 = `
+  .PopFailureMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopFailureMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-1 {
+    position: absolute;
+    left: 25%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-1;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopFailureMark-x-stroke-1 {
+    0% {
+      transform: rotate(45deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(45deg) scaleX(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-2 {
+    position: absolute;
+    left: 75%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-2;
+    animation-duration: 0.3s;
+    animation-delay: 0.6s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-x-stroke-2 {
+    0% {
+      transform: rotate(135deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(135deg) scaleX(1);
+    }
+  }
+`;
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const PopFailureMark = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { sizeRem = 3, circleVariant = 'danger', xVariant = 'white', } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React.createElement("div", { className: `PopFailureMark-outer-container bg-${circleVariant}`, style: {
+            width: `${sizeRem}rem`,
+            height: `${sizeRem}rem`,
+        }, "aria-label": "mark indicating failure" },
+        React.createElement("style", null, style$1),
+        React.createElement("div", { className: `PopFailureMark-x-stroke-1 bg-${xVariant}`, style: {
+                borderRadius: `${sizeRem / 5}rem`,
+            } }),
+        React.createElement("div", { className: `PopFailureMark-x-stroke-2 bg-${xVariant}`, style: {
+                borderRadius: `${sizeRem / 5}rem`,
+            } })));
+};
+
+/**
+ * Failure pending that pops into view
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+const style = `
+  .PopPendingMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopPendingMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopPendingMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopPendingMark-hourglass {
+    position: absolute;
+    left: 28%;
+    top: 21%;
+
+    animation-name: PopPendingMark-pending;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopPendingMark-pending {
+    0% {
+      transform: scale(0.7) rotate(30deg);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) rotate(0);
+      opacity: 1;
+    }
+  }
+`;
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const PopPendingMark = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { sizeRem = 3, circleVariant = 'warning', hourglassVariant = 'white', } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React.createElement("div", { className: `PopPendingMark-outer-container bg-${circleVariant}`, style: {
+            width: `${sizeRem}rem`,
+            height: `${sizeRem}rem`,
+        }, "aria-label": "mark indicating that the item is pending" },
+        React.createElement("style", null, style),
+        React.createElement("div", null,
+            React.createElement(FontAwesomeIcon, { icon: faHourglass, className: `PopPendingMark-hourglass text-${hourglassVariant}`, style: {
+                    fontSize: `${sizeRem * 0.6}rem`,
+                } }))));
+};
+
+/**
+ * Copiable text box
+ * @author Gabe Abrams
+ */
+/* ------------- Actions ------------ */
+// Types of actions
+var ActionType;
+(function (ActionType) {
+    // Indicate that the text was recently copied
+    ActionType["IndicateRecentlyCopied"] = "indicate-recently-copied";
+    // Clear the status
+    ActionType["ClearRecentlyCopiedStatus"] = "clear-recently-copied-status";
+})(ActionType || (ActionType = {}));
+/**
+ * Reducer that executes actions
+ * @author Gabe Abrams
+ * @param state current state
+ * @param action action to execute
+ */
+const reducer = (state, action) => {
+    switch (action.type) {
+        case ActionType.IndicateRecentlyCopied: {
+            return {
+                recentlyCopied: true,
+            };
+        }
+        case ActionType.ClearRecentlyCopiedStatus: {
+            return {
+                recentlyCopied: false,
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+};
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const CopiableBox = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { name, text, label, labelIcon, minLabelWidthRem, multiline, numVisibleLines = 10, } = props;
+    /* -------------- State ------------- */
+    // Initial state
+    const initialState = {
+        recentlyCopied: false,
+    };
+    // Initialize state
+    const [state, dispatch] = useReducer(reducer, initialState);
+    // Destructure common state
+    const { recentlyCopied, } = state;
+    /*------------------------------------------------------------------------*/
+    /*                           Component Functions                          */
+    /*------------------------------------------------------------------------*/
+    // Determine the id for the copiable text field
+    const copiableFieldClassName = `CopiableBox-text-box-${name}`;
+    /**
+     * Perform a copy
+     * @author Gabe Abrams
+     */
+    const performCopy = () => __awaiter(void 0, void 0, void 0, function* () {
+        // Write to clipboard
+        let copyFailed = false;
+        try {
+            yield navigator.clipboard.writeText(text);
+        }
+        catch (err) {
+            copyFailed = true;
+        }
+        // Try copy again if it failed
+        if (copyFailed) {
+            try {
+                const input = (document.getElementsByClassName(copiableFieldClassName)[0]);
+                input.focus();
+                input.select();
+                document.execCommand('copy');
+                input.blur();
+            }
+            catch (err) {
+                return alert$1('Unable to copy', 'Oops! We couldn\'t copy that to the clipboard. Please copy the text manually.');
+            }
+        }
+        // Show copied notice
+        dispatch({
+            type: ActionType.IndicateRecentlyCopied,
+        });
+        // Wait a moment
+        yield waitMs(4000);
+        // Hide copied notice
+        dispatch({
+            type: ActionType.ClearRecentlyCopiedStatus,
+        });
+    });
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React.createElement("div", { className: "input-group mb-2" },
+        React.createElement("span", { className: "input-group-text", style: {
+                minWidth: (minLabelWidthRem
+                    ? `${minLabelWidthRem}rem`
+                    : undefined),
+            } },
+            labelIcon && (React.createElement(FontAwesomeIcon, { icon: labelIcon, className: "me-1" })),
+            label),
+        multiline
+            ? (React.createElement("textarea", { className: `${copiableFieldClassName} CopiableBox-text-multiline form-control bg-white text-dark`, value: text, "aria-label": `${label} text`, rows: numVisibleLines, readOnly: true }))
+            : (React.createElement("input", { type: "text", className: `${copiableFieldClassName} CopiableBox-text-single-line form-control bg-white text-dark`, value: text, "aria-label": `${label} text`, readOnly: true })),
+        React.createElement("button", { className: "btn btn-secondary", type: "button", "aria-label": `copy ${label} to the clipboard`, disabled: recentlyCopied, style: {
+                minWidth: '5.2rem',
+            }, onClick: performCopy }, recentlyCopied
+            ? 'Copied!'
+            : (React.createElement("span", null,
+                React.createElement(FontAwesomeIcon, { icon: faClipboard, className: "me-1" }),
+                "Copy")))));
+};
+
 /**
  * One minute in ms
  * @author Gabe Abrams
@@ -2063,7 +2393,7 @@ const getHumanReadableDate = (dateOrTimestamp) => {
     const { month, day, year, } = getTimeInfoInET(dateOrTimestamp);
     const currYear = getTimeInfoInET().year;
     // Create start of description
-    let description = `${monthMap[month]} ${getOrdinal(day)}`;
+    let description = `${monthMap[month]} ${day}${getOrdinal(day)}`;
     // Add on year if it's different
     if (year !== currYear) {
         description += ` ${year}`;
@@ -2072,5 +2402,5 @@ const getHumanReadableDate = (dateOrTimestamp) => {
     return description;
 };
 
-export { AppWrapper, ButtonInputGroup, CheckboxButton, DAY_IN_MS, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, ParamType$1 as ParamType, PopSuccessMark, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SimpleDateChooser, TabBox, Variant$1 as Variant, abbreviate, alert$1 as alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getTimeInfoInET, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, startMinWait, stubServerEndpoint, sum, visitServerEndpoint, waitMs };
+export { AppWrapper, ButtonInputGroup, CheckboxButton, CopiableBox, DAY_IN_MS, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, ParamType$1 as ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SimpleDateChooser, TabBox, Variant$1 as Variant, abbreviate, alert$1 as alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getTimeInfoInET, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, startMinWait, stubServerEndpoint, sum, visitServerEndpoint, waitMs };
 //# sourceMappingURL=index.js.map