dce-reactkit 3.0.0-beta.9 → 3.0.2

package/src/components/ErrorBox.tsx

@@ -63,9 +63,9 @@ const ErrorBox: React.FC<Props> = (props) => {
         <span
           style={{
             backgroundColor: 'white',
-            borderRadius: '5px',
-            paddingLeft: '3px',
-            paddingRight: '3px',
+            borderRadius: '0.3rem',
+            paddingLeft: '0.2rem',
+            paddingRight: '0.2rem',
             color: '#DC4150',
             fontVariant: 'small-caps',
             fontSize: '80%',
@@ -85,7 +85,7 @@ const ErrorBox: React.FC<Props> = (props) => {
     <div
       className="alert alert-danger text-center"
       style={{
-        maxWidth: '650px',
+        maxWidth: '40rem',
         margin: 'auto',
       }}
     >

package/src/components/LoadingSpinner.tsx

@@ -20,10 +20,10 @@ const style = `
 .LoadingSpinner-blip-2,
 .LoadingSpinner-blip-3,
 .LoadingSpinner-blip-4 {
-  font-size: 25px;
+  font-size: 1.8rem;
   opacity: 0.6;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* First Blip */

package/src/components/Modal.tsx

@@ -15,21 +15,12 @@ import ModalButtonType from '../types/ModalButtonType';
 import ModalSize from '../types/ModalSize';
 import ModalType from '../types/ModalType';
 
-/*------------------------------------------------------------------------*/
-/*                                  Style                                 */
-/*------------------------------------------------------------------------*/
-
-const style = `
-`;
-
 /*------------------------------------------------------------------------*/
 /*                                Constants                               */
 /*------------------------------------------------------------------------*/
 
 // Constants
-const MS_TO_ANIMATE = 400; // Time to animate in/out (defined by bootstrap)
-const MS_ANIMATE_IN_DELAY = 10;
-// Time to wait before animating in (must be >0 or animation won't trigger)
+const MS_TO_ANIMATE = 200; // Animation duration
 
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes: {
@@ -113,6 +104,116 @@ const ModalButtonTypeToLabelAndVariant = {
   },
 };
 
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .Modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vw;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .Modal-fading-in {
+    animation-name: Modal-fading-in;
+    animation-duration: ${Math.floor(MS_TO_ANIMATE * 2)}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-fading-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .Modal-fading-out {
+    animation-name: Modal-fading-out;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in;
+  }
+
+  @keyframes Modal-fading-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .Modal-animating-in {
+    animation-name: Modal-animating-in;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-animating-in {
+    0% {
+      transform: scale(1.05) translate(0, -1.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) translate(0, 0);
+      opacity: 1;
+    }
+  }
+
+  .Modal-animating-pop {
+    animation-name: Modal-animating-pop;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in-out;
+  }
+
+  @keyframes Modal-animating-pop {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 0.9;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .Modal-animating-out {
+    animation-name: Modal-animating-out;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in;
+  }
+
+  @keyframes Modal-animating-out {
+    0% {
+      transform: scale(1) translate(0, 0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.05) translate(0, -1.5rem);
+      opacity: 0;
+    }
+  }
+`;
+
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
 /*------------------------------------------------------------------------*/
@@ -197,11 +298,17 @@ const Modal: React.FC<Props> = (props) => {
 
   /* -------------- State ------------- */
 
+  // If true, the modal is completely gone
+  // (not just invisible, also removed from the dom)
+  const [gone, setGone] = useState(false);
+
   // If true, the modal is shown
   const [visible, setVisible] = useState(false);
 
-  // True if currently animating in
-  const [animatingIn, setAnimatingIn] = useState(false);
+  // True if animation is in use
+  const [animatingIn, setAnimatingIn] = useState(true);
+  const [animatingPop, setAnimatingPop] = useState(false);
+  const [animatingOut, setAnimatingOut] = useState(false);
 
   /*------------------------------------------------------------------------*/
   /*                           Lifecycle Functions                          */
@@ -214,13 +321,10 @@ const Modal: React.FC<Props> = (props) => {
   useEffect(
     () => {
       (async () => {
-        // Start the component animating in
-        await waitMs(MS_ANIMATE_IN_DELAY);
-        setAnimatingIn(true);
-
         // Wait and then set visible to true
         await waitMs(MS_TO_ANIMATE);
         setVisible(true);
+        setAnimatingIn(false);
       })();
     },
     [],
@@ -254,16 +358,23 @@ const Modal: React.FC<Props> = (props) => {
 
     // Update the state
     setVisible(false);
+    setAnimatingOut(true);
 
     // Call the handler after the modal has animated out
     await waitMs(MS_TO_ANIMATE);
     onClose(ModalButtonType);
+    setGone(true);
   };
 
   /*------------------------------------------------------------------------*/
   /*                                 Render                                 */
   /*------------------------------------------------------------------------*/
 
+  // Return nothing if gone
+  if (gone) {
+    return null;
+  }
+
   /*----------------------------------------*/
   /*                 Footer                 */
   /*----------------------------------------*/
@@ -295,8 +406,9 @@ const Modal: React.FC<Props> = (props) => {
     // Create the button
     return (
       <button
+        key={ModalButtonType}
         type="button"
-        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
+        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
         onClick={() => {
           handleClose(ModalButtonType);
         }}
@@ -317,24 +429,73 @@ const Modal: React.FC<Props> = (props) => {
       : undefined
   );
 
+  // Choose an animation
+  let animationClass = '';
+  let backdropAnimationClass = '';
+  if (animatingIn) {
+    animationClass = 'Modal-animating-in';
+    backdropAnimationClass = 'Modal-fading-in';
+  } else if (animatingOut) {
+    animationClass = 'Modal-animating-out';
+    backdropAnimationClass = 'Modal-fading-out';
+  } else if (animatingPop) {
+    animationClass = 'Modal-animating-pop';
+  }
+
   // Render the modal
   return (
     <div
-      className={`modal fade show modal-dialog-scrollable modal-${size}`}
+      className={`modal show modal-dialog-scrollable modal-dialog-centered modal-${size}`}
       tabIndex={-1}
       style={{
         zIndex: (
           onTopOfOtherModals
-            ? 6000000000
+            ? 5000000001
             : 5000000000
         ),
         display: 'block',
+        margin: 'auto',
+        left: 0,
+        right: 0,
       }}
     >
-      <div className="modal-dialog">
+      <style>{style}</style>
+      <div
+        className={`Modal-backdrop ${backdropAnimationClass}`}
+        style={{
+          zIndex: 5000000003,
+        }}
+        onClick={async () => {
+          // Skip if exit via backdrop not allowed
+          if (dontAllowBackdropExit || !onClose) {
+            // Show pop animation
+            if (!animatingPop) {
+              setAnimatingPop(true);
+
+              // Wait then stop pop animation
+              await waitMs(MS_TO_ANIMATE);
+              setAnimatingPop(false);
+            }
+            return;
+          }
+          // Handle close
+          handleClose(ModalButtonType.Cancel);
+        }}
+      />
+      <div
+        className={`modal-dialog ${animationClass}`}
+        style={{
+          zIndex: 5000000002,
+        }}
+      >
         <div className="modal-content">
           <div className="modal-header">
-            <h5 className="modal-title">
+            <h5
+              className="modal-title"
+              style={{
+                fontWeight: 'bold',
+              }}
+            >
               {title}
             </h5>
 
@@ -342,9 +503,9 @@ const Modal: React.FC<Props> = (props) => {
               <button
                 type="button"
                 className="btn-close"
-                data-bs-dismiss="modal"
                 aria-label="Close"
                 onClick={() => {
+                  // Handle close
                   handleClose(ModalButtonType.Cancel);
                 }}
               />
@@ -356,7 +517,7 @@ const Modal: React.FC<Props> = (props) => {
             </div>
           )}
           {footer && (
-            <div className="modal-footer">
+            <div className="modal-footer pt-1 pb-1">
               {footer}
             </div>
           )}

package/src/components/RadioButton.tsx

@@ -0,0 +1,102 @@
+/**
+ * A radio selection button
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle } from '@fortawesome/free-regular-svg-icons';
+
+// Import shared types
+import Variant from '../types/Variant';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Text of the button
+  text: string,
+  // Handler for when this item is selected (not called if already selected)
+  onSelected: () => void,
+  // Aria label
+  ariaLabel: string,
+  // Button title
+  title?: string,
+  // True if selected
+  selected?: boolean,
+  // The id of the button
+  id?: string,
+  // If true, no margin on right
+  noMarginOnRight?: boolean,
+  // Variant for when radio is selected
+  selectedVariant?: Variant,
+  // Variant for when radio is not selected
+  unselectedVariant?: Variant,
+  // True if using a small button
+  small?: boolean,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const RadioButton: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    text,
+    onSelected,
+    ariaLabel,
+    title,
+    selected,
+    id,
+    noMarginOnRight,
+    selectedVariant = Variant.Secondary,
+    unselectedVariant = Variant.Light,
+    small,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                Main UI                 */
+  /*----------------------------------------*/
+
+  return (
+    <button
+      type="button"
+      id={id}
+      title={title}
+      className={`btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`}
+      aria-label={`${ariaLabel}${selected ? ': currently selected' : ''}`}
+      onClick={() => {
+        if (!selected) {
+          onSelected();
+        }
+      }}
+    >
+      <FontAwesomeIcon
+        icon={selected ? faDotCircle : faCircle}
+        className="me-1"
+      />
+      {text}
+    </button>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap up                                */
+/*------------------------------------------------------------------------*/
+
+export default RadioButton;

package/src/components/SimpleDateChooser.tsx

@@ -0,0 +1,222 @@
+/**
+ * A very simple, lightweight date chooser
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import helpers
+import getOrdinal from '../helpers/getOrdinal';
+import getTimeInfoInET from '../helpers/getTimeInfoInET';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Aria label
+  ariaLabel: string,
+  // Name of the chooser (machine-readable, hyphenated)
+  name: string,
+  // Currently selected month
+  month: number,
+  // Currently selected day
+  day: number,
+  // Currently selected year
+  year: number,
+  /**
+   * Handler for when date changes
+   * @param month new 1-indexed month number
+   * @param day new 1-indexed day number
+   * @param year new full year number
+   */
+  onChange: (month: number, day: number, year: number) => void,
+  // Number of months in the future to allow the user to schedule into
+  // (max is 12)
+  numMonthsToShow?: number,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+
+// Constants
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const SimpleDateChooser: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    ariaLabel,
+    name,
+    month,
+    day,
+    year,
+    onChange,
+  } = props;
+  const numMonthsToShow = Math.min(props.numMonthsToShow ?? 6, 12);
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                Main UI                 */
+  /*----------------------------------------*/
+
+  // Determine the set of choices allowed
+  const today = getTimeInfoInET();
+  const choices: {
+    choiceName: string,
+    month: number,
+    days: number[],
+    year: number,
+  }[] = [];
+  for (let i = 0; i < numMonthsToShow; i++) {
+    // Get month and year info
+    const unmoddedMonth = (today.month + i);
+    const month = (
+      unmoddedMonth > 12
+        ? unmoddedMonth - 12
+        : unmoddedMonth
+    );
+    const monthName = MONTH_NAMES[month - 1];
+    const year = (
+      unmoddedMonth > 12
+        ? today.year + 1
+        : today.year
+    );
+
+    // Figure out which days are allowed
+    const days = [];
+    const numDaysInMonth = (new Date(year, month, 0)).getDate();
+    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++) {
+      days.push(day);
+    }
+
+    choices.push({
+      choiceName: `${monthName} ${year}`,
+      month,
+      year,
+      days,
+    });
+  }
+
+  // Create choice options
+  const monthOptions: React.ReactNode[] = [];
+  const dayOptions: React.ReactNode[] = [];
+  choices.forEach((choice) => {
+    // Create month option
+    monthOptions.push(
+      <option
+        key={choice.month}
+        value={choice.month}
+        aria-label={`choose ${choice.choiceName}`}
+        onSelect={() => {
+          onChange(choice.month, choice.days[0], choice.year);
+        }}
+      >
+        {choice.choiceName}
+      </option>
+    );
+
+    if (month === choice.month) {
+      // This is the currently selected month
+      // Create day options
+      choice.days.forEach((dayChoice) => {
+        const ordinal = getOrdinal(dayChoice);
+        dayOptions.push(
+          <option
+            key={dayChoice}
+            value={dayChoice}
+            aria-label={`choose date ${dayChoice}`}
+          >
+            {dayChoice}
+            {ordinal}
+          </option>
+        );
+      });
+    }
+  });
+
+  return (
+    <div
+      className="SimpleDateChooser d-inline-block"
+      aria-label={`date chooser with selected date: ${month} ${day}, ${year}`}
+    >
+      {/* Month Chooser */}
+      <select
+        aria-label={`month for ${ariaLabel}`}
+        className="custom-select d-inline-block mr-1"
+        style={{ width: 'auto' }}
+        id={`SimpleDateChooser-${name}-month`}
+        value={month}
+        onChange={(e) => {
+          const choice = choices[e.target.selectedIndex];
+
+          // Change day, month, and year
+          onChange(
+            choice.month,
+            choice.days[0],
+            choice.year,
+          );
+        }}
+      >
+        {monthOptions}
+      </select>
+
+      {/* Day Chooser */}
+      <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}
+      </select>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default SimpleDateChooser;