dce-reactkit 4.0.0 → 4.0.2-beta-simple-date-chooser.1

package/dist/cjs/index.js

@@ -55,7 +55,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-// Highest error code = DRK34
+// Highest error code = DRK36
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -66,6 +66,8 @@ var ReactKitErrorCode;
     ReactKitErrorCode["NoCode"] = "DRK2";
     ReactKitErrorCode["SessionExpired"] = "DRK3";
     ReactKitErrorCode["NoCACCLSendRequestFunction"] = "DRK7";
+    ReactKitErrorCode["SimpleDateChooserInvalidDateRange"] = "DRK35";
+    ReactKitErrorCode["SimpleDateChooserInvalidNumMonths"] = "DRK36";
 })(ReactKitErrorCode || (ReactKitErrorCode = {}));
 var ReactKitErrorCode$1 = ReactKitErrorCode;
 
@@ -2547,6 +2549,19 @@ const ButtonInputGroup = (props) => {
                 : children))));
 };
 
+// Constants
+const ORDINALS = ['th', 'st', 'nd', 'rd'];
+/**
+ * Get a number's ordinal
+ * @author Gabe Abrams
+ * @param num the number being analyzed
+ * @returns ordinal
+ */
+const getOrdinal = (num) => {
+    var _a, _b;
+    return ((_b = (_a = ORDINALS[(num - 20) % 10]) !== null && _a !== void 0 ? _a : ORDINALS[num]) !== null && _b !== void 0 ? _b : ORDINALS[0]);
+};
+
 const monthNames = [
     { short: 'Jan', full: 'January' },
     { short: 'Feb', full: 'February' },
@@ -2575,19 +2590,6 @@ const getMonthName = (month) => {
     return ((_a = monthNames[month - 1]) !== null && _a !== void 0 ? _a : monthNames[0]);
 };
 
-// Constants
-const ORDINALS = ['th', 'st', 'nd', 'rd'];
-/**
- * Get a number's ordinal
- * @author Gabe Abrams
- * @param num the number being analyzed
- * @returns ordinal
- */
-const getOrdinal = (num) => {
-    var _a, _b;
-    return ((_b = (_a = ORDINALS[(num - 20) % 10]) !== null && _a !== void 0 ? _a : ORDINALS[num]) !== null && _b !== void 0 ? _b : ORDINALS[0]);
-};
-
 /**
  * Get current time info in US Boston Eastern Time, independent of machine
  *   timezone
@@ -2651,35 +2653,86 @@ const getTimeInfoInET = (dateOrTimestamp) => {
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
+ * @author Gardenia Liu
  */
 /*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
+/* -------------------------------- State ------------------------------- */
 /*------------------------------------------------------------------------*/
-const SimpleDateChooser = (props) => {
-    /*------------------------------------------------------------------------*/
-    /* -------------------------------- Setup ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    /* -------------- Props ------------- */
-    const { ariaLabel, name, onChange, chooseFromPast, numMonthsToShow = 6, } = props;
-    /*------------------------------------------------------------------------*/
-    /* ------------------------------- Render ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    /*----------------------------------------*/
-    /* --------------- Main UI -------------- */
-    /*----------------------------------------*/
+/* -------------- Views ------------- */
+var View;
+(function (View) {
+    // Date chooser
+    View["DateChooser"] = "DateChooser";
+    // Invalid date
+    View["InvalidDate"] = "InvalidDate";
+})(View || (View = {}));
+/* ------------- Actions ------------ */
+// Types of actions
+var ActionType$a;
+(function (ActionType) {
+    // Fix invalid date so it is now in range
+    ActionType["FixInvalidDate"] = "FixInvalidDate";
+})(ActionType$a || (ActionType$a = {}));
+/**
+ * Reducer that executes actions
+ * @author Gardenia Liu
+ * @param state current state
+ * @param action action to execute
+ * @returns updated state
+ */
+const reducer$b = (state, action) => {
+    switch (action.type) {
+        case ActionType$a.FixInvalidDate: {
+            return Object.assign(Object.assign({}, state), { view: View.DateChooser });
+        }
+        default: {
+            return state;
+        }
+    }
+};
+/*------------------------------------------------------------------------*/
+/* --------------------------- Static Helpers --------------------------- */
+/*------------------------------------------------------------------------*/
+/**
+ * Get the list of choices in the date chooser given props
+ * @author Gardenia Liu
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.numMonthsToShow number of months to show
+ * @param opts.dontAllowPast if true, the user isn't allowed to select dates in the past
+ * @param opts.dontAllowFuture if true, the user isn't allowed to select dates in the future
+ * @returns choices
+ */
+const getChoices = (opts) => {
+    // Destructure props
+    const { dontAllowFuture, dontAllowPast, numMonthsToShow = 6, } = opts;
     // Determine the set of choices allowed
     const today = getTimeInfoInET();
     const choices = [];
     let startYear = today.year;
     let startMonth = today.month;
-    if (chooseFromPast) {
+    // Don't allow past or future dates
+    if (dontAllowPast && dontAllowFuture) {
+        throw new ErrorWithCode('No past or future dates allowed', ReactKitErrorCode$1.SimpleDateChooserInvalidDateRange);
+    }
+    // Require numMonthsToShow to be positive
+    if (numMonthsToShow <= 0) {
+        throw new ErrorWithCode('numMonthsToShow must be positive', ReactKitErrorCode$1.SimpleDateChooserInvalidNumMonths);
+    }
+    // Recalculate startMonth and startYear when allowing past dates
+    if (!dontAllowPast) {
         startMonth -= Math.max(0, numMonthsToShow - 1);
         while (startMonth <= 0) {
             startMonth += 12;
             startYear -= 1;
         }
     }
-    for (let i = 0; i < numMonthsToShow; i++) {
+    // Calculate total number of months to show
+    let totalMonthsToShow = numMonthsToShow;
+    if (!dontAllowPast && !dontAllowFuture) {
+        totalMonthsToShow = totalMonthsToShow * 2 - 1;
+    }
+    for (let i = 0; i < totalMonthsToShow; i++) {
         // Get month and year info
         const unmoddedMonth = (startMonth + i);
         let month = unmoddedMonth;
@@ -2698,23 +2751,25 @@ const SimpleDateChooser = (props) => {
         // Figure out which days are allowed
         const days = [];
         const numDaysInMonth = (new Date(year, month, 0)).getDate();
-        if (chooseFromPast) {
-            // Past selection
-            const numDaysToAdd = ((month === today.month)
-                ? today.day // Current month, only add up to today
-                : numDaysInMonth // Past month, add all days
-            );
-            for (let day = 1; day <= numDaysToAdd; day++) {
-                days.push(day);
+        // Current month
+        if (month === today.month && year === today.year) {
+            // Past selection: add all previous days of the month
+            if (!dontAllowPast) {
+                for (let day = 1; day < today.day; day++) {
+                    days.push(day);
+                }
             }
-        }
-        else {
+            days.push(today.day); // Add current day
             // Future selection: add all remaining days of the month
-            const firstDay = (month === today.month
-                ? today.day // Current month: start at current date
-                : 1 // Future month: start at beginning of month
-            );
-            for (let day = firstDay; day <= numDaysInMonth; day++) {
+            if (!dontAllowFuture) {
+                for (let day = today.day + 1; day <= numDaysInMonth; day++) {
+                    days.push(day);
+                }
+            }
+        }
+        else { // Past or future month
+            // Include all days in the month
+            for (let day = 1; day <= numDaysInMonth; day++) {
                 days.push(day);
             }
         }
@@ -2725,36 +2780,262 @@ const SimpleDateChooser = (props) => {
             days,
         });
     }
-    // Create choice options
-    const { month, day, year, } = props;
-    const monthOptions = [];
-    const dayOptions = [];
-    choices.forEach((choice) => {
-        // Create month option
-        monthOptions.push(React__default["default"].createElement("option", { key: `${choice.year}-${choice.month}`, value: `${choice.month}-${choice.year}`, "aria-label": `choose ${choice.choiceName}`, onSelect: () => {
-                onChange(choice.month, choice.days[0], choice.year);
-            } }, choice.choiceName));
-        if (month === choice.month) {
-            // This is the currently selected month
-            // Create day options
-            choice.days.forEach((dayChoice) => {
-                const ordinal = getOrdinal(dayChoice);
-                dayOptions.push(React__default["default"].createElement("option", { key: `${choice.year}-${choice.month}-${dayChoice}`, value: dayChoice, "aria-label": `choose date ${dayChoice}` },
-                    dayChoice,
-                    ordinal));
+    // Return choices
+    return choices;
+};
+/**
+ * Checks whether a given date is outside the valid range of allowed choices
+ * @author Gardenia Liu
+ * @param opts object containing all arguments
+ * @param opts.month 1-indexed month
+ * @param opts.day day of the month
+ * @param opts.year full year
+ * @param opts.choices valid date choices
+ * @returns true if date is out of range
+ */
+const isDateOutOfRange = (opts) => {
+    const { month, day, year, choices, } = opts;
+    return !choices.some((choice) => {
+        return (choice.month === month
+            && choice.year === year
+            && choice.days.includes(day));
+    });
+};
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+const SimpleDateChooser = (props) => {
+    /*------------------------------------------------------------------------*/
+    /* -------------------------------- Setup ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    const { ariaLabel, name, dontAllowPast, dontAllowFuture, numMonthsToShow, onChange, month, day, year, } = props;
+    // Get choices
+    const choices = getChoices({
+        numMonthsToShow,
+        dontAllowPast,
+        dontAllowFuture,
+    });
+    /* -------------- State ------------- */
+    // Check if the currently selected date is out of range
+    const currentSelectedDateOutOfRange = isDateOutOfRange({
+        month,
+        day,
+        year,
+        choices,
+    });
+    // Initial state
+    const initialState = {
+        view: (currentSelectedDateOutOfRange
+            ? View.InvalidDate
+            : View.DateChooser),
+    };
+    // Initialize state
+    const [state, dispatch] = React.useReducer(reducer$b, initialState);
+    // Destructure common state
+    const { view, } = state;
+    /*------------------------------------------------------------------------*/
+    /* ------------------------- Component Functions ------------------------ */
+    /*------------------------------------------------------------------------*/
+    /**
+     * Ask the user if they want to edit an invalid date
+     * @author Gardenia Liu
+     * @author Gabe Abrams
+     */
+    const askToEditInvalidDate = () => __awaiter(void 0, void 0, void 0, function* () {
+        // Ask the user if they want to edit the date
+        const confirmed = yield confirm('Are you sure?', 'The current date is outside the normal range. If you edit it, you\'ll need to choose a new date in the normal range.', {
+            confirmButtonText: 'Edit Date',
+        });
+        // Check if user confirmed
+        if (confirmed) {
+            // Update the date to today
+            const today = getTimeInfoInET();
+            onChange(today.month, today.day, today.year);
+            // Update state
+            dispatch({
+                type: ActionType$a.FixInvalidDate,
             });
         }
     });
-    return (React__default["default"].createElement("div", { className: "SimpleDateChooser d-inline-block", "aria-label": `date chooser with selected date: ${month}/${day}/${year}` },
-        React__default["default"].createElement("select", { "aria-label": `month for ${ariaLabel}`, className: "custom-select d-inline-block mr-1", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-month`, value: `${month}-${year}`, onChange: (e) => {
-                const choice = choices[e.target.selectedIndex];
-                // Change day, month, and year
-                onChange(choice.month, choice.days[0], choice.year);
-            } }, monthOptions),
-        React__default["default"].createElement("select", { "aria-label": `day for ${ariaLabel}`, className: "custom-select d-inline-block", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-day`, value: day, onChange: (e) => {
-                // Only change the day
-                onChange(month, Number.parseInt(e.target.value, 10), year);
-            } }, dayOptions)));
+    /*------------------------------------------------------------------------*/
+    /* ------------------------------- Render ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /* ---------------- Views --------------- */
+    /*----------------------------------------*/
+    // Body that will be filled with the current view
+    let body;
+    /* ---------- DateChooser ---------- */
+    if (view === View.DateChooser) {
+        // Create lists of options
+        const monthOptions = [];
+        const dayOptions = [];
+        // Render each option and add it to the list
+        choices.forEach((choice) => {
+            // Create month option
+            monthOptions.push(React__default["default"].createElement("option", { key: `${choice.year}-${choice.month}`, value: `${choice.month}-${choice.year}`, "aria-label": `choose ${choice.choiceName}`, onSelect: () => {
+                    onChange(choice.month, choice.days[0], choice.year);
+                } }, choice.choiceName));
+            // This is the currently selected month
+            if (month === choice.month) {
+                // Create day options
+                choice.days.forEach((dayChoice) => {
+                    const ordinal = getOrdinal(dayChoice);
+                    dayOptions.push(React__default["default"].createElement("option", { key: `${choice.year}-${choice.month}-${dayChoice}`, value: dayChoice, "aria-label": `choose date ${dayChoice}` },
+                        dayChoice,
+                        ordinal));
+                });
+            }
+        });
+        // Create body
+        body = (React__default["default"].createElement("div", { className: "SimpleDateChooser-inner-container d-inline-block", "aria-label": `date chooser with selected date: ${month}/${day}/${year}` },
+            React__default["default"].createElement("select", { "aria-label": `month for ${ariaLabel}`, className: "custom-select d-inline-block mr-1", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-month`, value: `${month}-${year}`, onChange: (e) => {
+                    const choice = choices[e.target.selectedIndex];
+                    // Change day, month, and year
+                    onChange(choice.month, choice.days[0], choice.year);
+                } }, monthOptions),
+            React__default["default"].createElement("select", { "aria-label": `day for ${ariaLabel}`, className: "custom-select d-inline-block", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-day`, value: day, onChange: (e) => {
+                    // Only change the day
+                    onChange(month, Number.parseInt(e.target.value, 10), year);
+                } }, dayOptions)));
+    }
+    /* --------- DateOutOfRange --------- */
+    if (view === View.InvalidDate) {
+        body = (React__default["default"].createElement("div", { className: "SimpleDateChooser-inner-container d-inline-block" },
+            React__default["default"].createElement("button", { type: "button", className: "btn btn-light", onClick: askToEditInvalidDate, "aria-label": `edit date for ${ariaLabel}` },
+                getMonthName(month).full,
+                ' ',
+                day,
+                getOrdinal(day),
+                ",",
+                ' ',
+                year),
+            React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary", onClick: askToEditInvalidDate, "aria-label": `edit date for ${ariaLabel}` }, "Edit")));
+    }
+    /*----------------------------------------*/
+    /* --------------- Main UI -------------- */
+    /*----------------------------------------*/
+    return (React__default["default"].createElement("span", { className: "SimpleDateChooser-outer-container" }, body));
+};
+
+/**
+ * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits before the decimal
+ * @returns padded number
+ */
+const padZerosLeft = (num, numDigits) => {
+    // Convert to string
+    let out = String(num);
+    // Add zeros
+    while (out.split('.')[0].length < numDigits) {
+        out = `0${out}`;
+    }
+    // Return
+    return out;
+};
+
+/**
+ * A very simple, lightweight time chooser
+ * @author Gardenia Liu
+ */
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Constants ----------------------------- */
+/*------------------------------------------------------------------------*/
+// Allowed intervals between options
+const ALLOWED_INTERVALS = [15, 30, 60]; // min
+// Default interval to use if an unsupported interval is passed in
+const DEFAULT_INTERVAL = ALLOWED_INTERVALS[0]; // min
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+const SimpleTimeChooser = (props) => {
+    /*------------------------------------------------------------------------*/
+    /* -------------------------------- Setup ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    const { ariaLabel, name, hour, minute, onChange, } = props;
+    let { intervalMin = DEFAULT_INTERVAL, } = props;
+    // Use default interval if not supported
+    if (!ALLOWED_INTERVALS.includes(intervalMin)) {
+        intervalMin = DEFAULT_INTERVAL;
+    }
+    /*------------------------------------------------------------------------*/
+    /* ------------------------- Component Functions ------------------------ */
+    /*------------------------------------------------------------------------*/
+    /**
+     * Convert number of minutes since midnight into 24hour and minute format
+     * @author Gabe Abrams
+     * @param minSinceMidnight total minutes since midnight
+     * @returns hours (24) and minutes
+     */
+    const convertMinSinceMidnightToHoursAndMin = (minSinceMidnight) => {
+        return {
+            hours: Math.floor(minSinceMidnight / 60),
+            minutes: minSinceMidnight % 60,
+        };
+    };
+    /**
+     * Convert time in minutes into HH:MM format
+     * @author Gardenia Liu
+     * @param totalMinutes total minutes since midnight
+     * @returns formatted time string
+     */
+    const formatTime = (totalMinutes) => {
+        // Handle special cases
+        if (totalMinutes === 0) {
+            return '12:00 Midnight';
+        }
+        if (totalMinutes === 12 * 60) {
+            return '12:00 Noon';
+        }
+        // All normal cases:
+        const timeInfo = convertMinSinceMidnightToHoursAndMin(totalMinutes);
+        let { hours } = timeInfo;
+        const { minutes } = timeInfo;
+        // Process 24hr -> 12hr
+        const isAM = (hours < 12);
+        if (hours === 0) {
+            hours = 12;
+        }
+        else if (hours > 12) {
+            hours %= 12;
+        }
+        // Pad with zeros
+        const paddedMinutes = padZerosLeft(minutes, 2);
+        // Assemble time string
+        return `${hours}:${paddedMinutes} ${isAM ? 'AM' : 'PM'}`;
+    };
+    /*------------------------------------------------------------------------*/
+    /* ------------------------------- Render ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /* --------------- Main UI -------------- */
+    /*----------------------------------------*/
+    // Generate list of time options
+    const times = [];
+    for (let time = 0; time < 24 * 60; time += intervalMin) {
+        times.push(formatTime(time));
+    }
+    // Currently selected time in minutes since midnight
+    const selectedTimeMin = hour * 60 + minute;
+    // Create choice options
+    const timeOptions = times.map((timeString, timeIndex) => {
+        const numMinutesForChoice = timeIndex * intervalMin;
+        // Render the option
+        return (React__default["default"].createElement("option", { key: numMinutesForChoice, value: numMinutesForChoice, "aria-label": `choose ${timeString}` }, timeString));
+    });
+    return (React__default["default"].createElement("div", { className: "SimpleTimeChooser-container", "aria-label": `time chooser with selected time: ${formatTime(selectedTimeMin)}` },
+        React__default["default"].createElement("select", { "aria-label": `time for ${ariaLabel}`, className: "custom-select d-inline-block", style: { width: 'auto' }, id: `SimpleTimeChooser-${name}-time`, value: selectedTimeMin, onChange: (e) => {
+                // Parse selector value (string)
+                const newTime = Number.parseInt(e.target.value, 10);
+                // Convert minutes since midnight to hour and minute
+                const timeInfo = convertMinSinceMidnightToHoursAndMin(newTime);
+                // Notify parent
+                onChange(timeInfo.hours, timeInfo.minutes);
+            } }, timeOptions)));
 };
 
 /**
@@ -4851,14 +5132,14 @@ const LogReviewer = (props) => {
         if (expandedFilterDrawer) {
             if (expandedFilterDrawer === FilterDrawer.Date) {
                 filterDrawer = (React__default["default"].createElement(TabBox, { title: "Date" },
-                    React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter start date", name: "filter-start-date", year: dateFilterState.startDate.year, month: dateFilterState.startDate.month, day: dateFilterState.startDate.day, chooseFromPast: true, numMonthsToShow: 36, onChange: (month, day, year) => {
+                    React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter start date", name: "filter-start-date", year: dateFilterState.startDate.year, month: dateFilterState.startDate.month, day: dateFilterState.startDate.day, dontAllowFuture: true, numMonthsToShow: 36, onChange: (month, day, year) => {
                             dateFilterState.startDate = { month, day, year };
                             handleDateRangeUpdated(dateFilterState);
                         } }),
                     ' ',
                     "to",
                     ' ',
-                    React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter end date", name: "filter-end-date", year: dateFilterState.endDate.year, month: dateFilterState.endDate.month, day: dateFilterState.endDate.day, chooseFromPast: true, numMonthsToShow: 12, onChange: (month, day, year) => {
+                    React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter end date", name: "filter-end-date", year: dateFilterState.endDate.year, month: dateFilterState.endDate.month, day: dateFilterState.endDate.day, dontAllowFuture: true, numMonthsToShow: 12, onChange: (month, day, year) => {
                             if (year < dateFilterState.startDate.year
                                 || (year === dateFilterState.startDate.year
                                     && month < dateFilterState.startDate.month)
@@ -15338,24 +15619,6 @@ const padDecimalZeros = (num, numDigits) => {
     return out;
 };
 
-/**
- * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
- * @author Gabe Abrams
- * @param num the number to pad
- * @param numDigits the minimum number of digits before the decimal
- * @returns padded number
- */
-const padZerosLeft = (num, numDigits) => {
-    // Convert to string
-    let out = String(num);
-    // Add zeros
-    while (out.split('.')[0].length < numDigits) {
-        out = `0${out}`;
-    }
-    // Return
-    return out;
-};
-
 /**
  * Stub a server endpoint response
  * @author Gabe Abrams
@@ -16268,6 +16531,7 @@ exports.PopSuccessMark = PopSuccessMark;
 exports.RadioButton = RadioButton;
 exports.ReactKitErrorCode = ReactKitErrorCode$1;
 exports.SimpleDateChooser = SimpleDateChooser;
+exports.SimpleTimeChooser = SimpleTimeChooser;
 exports.TabBox = TabBox;
 exports.ToggleSwitch = ToggleSwitch;
 exports.Tooltip = Tooltip;