dce-reactkit 4.0.0-beta-date-and-time.1 → 4.0.0-beta.2

package/src/components/SimpleDateChooser.tsx

@@ -1,23 +1,16 @@
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
- * @author Gardeniu Liu
  */
 
 // Import React
 import React from 'react';
+import getMonthName from '../helpers/getMonthName';
 
 // Import helpers
 import getOrdinal from '../helpers/getOrdinal';
-import getMonthName from '../helpers/getMonthName';
 import getTimeInfoInET from '../helpers/getTimeInfoInET';
 
-// Import classes
-import ErrorWithCode from '../errors/ErrorWithCode';
-
-// Import types
-import ReactKitErrorCode from '../types/ReactKitErrorCode';
-
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -40,14 +33,12 @@ type Props = {
    * @param year new full year number
    */
   onChange: (month: number, day: number, year: number) => void,
-  // Number of months in either the past or future to allow the user to choose from
-  // If we aren't allowing the past or the future, we will throw an error
-  // (max is 12, default is 6 in the past and 6 in the future)
+  // Number of months to allow the user to choose from
+  // (max is 12, default is 6)
   numMonthsToShow?: number,
-  // If true, the user isn't allowed to select dates in the past
-  dontAllowPast?: boolean,
-  // If true, the user isn't allowed to select dates in the future
-  dontAllowFuture?: boolean,
+  // If true, instead of showing numMonthsToShow months into the future,
+  // show numMonthsToShow months into the past
+  chooseFromPast?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -65,9 +56,8 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     ariaLabel,
     name,
     onChange,
+    chooseFromPast,
     numMonthsToShow = 6,
-    dontAllowFuture,
-    dontAllowPast,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -86,41 +76,16 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     days: number[],
     year: number,
   }[] = [];
-
   let startYear = today.year;
   let startMonth = today.month;
-
-  // Don't allow past or future dates
-  if (dontAllowPast && dontAllowFuture) {
-    throw new ErrorWithCode(
-      'No past or future dates allowed',
-      ReactKitErrorCode.SimpleDateChooserInvalidDateRange,
-    );
-  }
-
-  // Require numMonthsToShow to be positive
-  if (numMonthsToShow <= 0) {
-    throw new ErrorWithCode(
-      'numMonthsToShow must be positive',
-      ReactKitErrorCode.SimpleDateChooserInvalidNumMonths,
-    );
-  }
-
-  // Recalculate startMonth and startYear when allowing past dates
-  if (!dontAllowPast) {
+  if (chooseFromPast) {
     startMonth -= Math.max(0, numMonthsToShow - 1);
     while (startMonth <= 0) {
       startMonth += 12;
       startYear -= 1;
     }
   }
-  // Calculate total number of months to show
-  let totalMonthsToShow = numMonthsToShow;
-  if (!dontAllowPast && !dontAllowFuture) {
-    totalMonthsToShow = totalMonthsToShow * 2 - 1;
-  }
-
-  for (let i = 0; i < totalMonthsToShow; i++) {
+  for (let i = 0; i < numMonthsToShow; i++) {
     // Get month and year info
     const unmoddedMonth = (startMonth + i);
     let month = unmoddedMonth;
@@ -140,25 +105,24 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     // Figure out which days are allowed
     const days = [];
     const numDaysInMonth = (new Date(year, month, 0)).getDate();
-
-    // 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);
-        }
+    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);
       }
-      days.push(today.day); // Add current day
+    } else {
       // Future selection: add all remaining days of the month
-      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++) {
+      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);
       }
     }
@@ -194,8 +158,8 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
       </option>,
     );
 
-    // This is the currently selected month
     if (month === choice.month) {
+      // This is the currently selected month
       // Create day options
       choice.days.forEach((dayChoice) => {
         const ordinal = getOrdinal(dayChoice);

package/src/components/TabBox.tsx

@@ -15,8 +15,6 @@ type Props = {
   title: React.ReactNode,
   // Children/contents inside the box
   children: React.ReactNode,
-  // Children to display on the top right of the tab box
-  topRightChildren?: React.ReactNode,
   // If true, don't add margin below the tab box
   noBottomMargin?: boolean,
   // If true, don't add padding to bottom of tab box
@@ -51,9 +49,7 @@ const style = `
 
   /* Container for Title */
   .TabBox-title-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    /* Place on Left */
     position: relative;
     left: 0;
     text-align: left;
@@ -86,19 +82,6 @@ const style = `
     background: #fdfdfd;
   }
 
-  .TabBox-title-right-container {
-    display: flex;
-    flex-direction: row;
-    align-items: bottom;
-    height: 2.4rem;
-    overflow: visible;
-  }
-
-  .TabBox-title-right-contents {
-    margin-right: 0.5rem;
-    margin-bottom: 0.2rem;
-  }
-
   /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
   .TabBox-children {
     position: relative;
@@ -115,10 +98,11 @@ const TabBox: React.FC<Props> = (props) => {
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
+  /* -------------- Props ------------- */
+
   const {
     title,
     children,
-    topRightChildren,
     noBottomPadding,
     noBottomMargin,
   } = props;
@@ -127,23 +111,21 @@ const TabBox: React.FC<Props> = (props) => {
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  // Full UI
   return (
     <div className={`TabBox-container ${noBottomMargin ? '' : 'mb-2'}`}>
       {/* Style */}
       <style>{style}</style>
 
-      {/* Title Row with Left and Right sections */}
+      {/* Title */}
       <div className="TabBox-title-container">
         <div className="TabBox-title">
           {title}
         </div>
-        {topRightChildren && (
-          <div className="TabBox-title-right-container">
-            <div className="TabBox-title-right-contents">
-              {topRightChildren}
-            </div>
-          </div>
-        )}
       </div>
 
       {/* Contents */}

package/src/index.ts

@@ -15,7 +15,6 @@ import RadioButton from './components/RadioButton';
 import CheckboxButton from './components/CheckboxButton';
 import ButtonInputGroup from './components/ButtonInputGroup';
 import SimpleDateChooser from './components/SimpleDateChooser';
-import SimpleTimeChooser from './components/SimpleTimeChooser';
 import Drawer from './components/Drawer';
 import PopSuccessMark from './components/PopSuccessMark';
 import PopFailureMark from './components/PopFailureMark';
@@ -92,7 +91,6 @@ import mapAsync from './helpers/asyncArrayFunctions/mapAsync';
 import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
-import getWordCount from './helpers/getWordCount';
 
 // Import types
 import ParamType from './types/ParamType';
@@ -134,7 +132,6 @@ export {
   CheckboxButton,
   ButtonInputGroup,
   SimpleDateChooser,
-  SimpleTimeChooser,
   Drawer,
   PopSuccessMark,
   PopFailureMark,
@@ -207,7 +204,6 @@ export {
   someAsync,
   capitalize,
   shuffleArray,
-  getWordCount,
   // Client helpers
   initClient,
   visitServerEndpoint,

package/src/types/ReactKitErrorCode.tsx

@@ -1,4 +1,4 @@
-// Highest error code = DRK36
+// Highest error code = DRK34
 
 /**
  * List of error codes built into the react kit
@@ -9,8 +9,6 @@ enum ReactKitErrorCode {
   NoCode = 'DRK2',
   SessionExpired = 'DRK3',
   NoCACCLSendRequestFunction = 'DRK7',
-  SimpleDateChooserInvalidDateRange = 'DRK35',
-  SimpleDateChooserInvalidNumMonths = 'DRK36',
 }
 
 export default ReactKitErrorCode;

package/dist/cjs/types/components/SimpleTimeChooser.d.ts

@@ -1,20 +0,0 @@
-/**
- * A very simple, lightweight time chooser
- * @author Gardenia Liu
- */
-import React from 'react';
-type Props = {
-    ariaLabel: string;
-    name: string;
-    hour: number;
-    minute: number;
-    /**
-     * Handler for when time changes
-     * @param hour new 24hr hour number
-     * @param minute new minute number
-     */
-    onChange: (hour: number, minute: number) => void;
-    intervalMin?: number;
-};
-declare const SimpleTimeChooser: React.FC<Props>;
-export default SimpleTimeChooser;

package/dist/cjs/types/helpers/getWordCount.d.ts

@@ -1,10 +0,0 @@
-/**
- * Get number of words in string
- * @author Gardenia Liu
- * @author Allison Zhang
- * @author Gabe Abrams
- * @param text the string to check
- * @returns number of words in the string
- */
-declare const getWordCount: (text: string) => number;
-export default getWordCount;

package/dist/esm/types/components/SimpleTimeChooser.d.ts

@@ -1,20 +0,0 @@
-/**
- * A very simple, lightweight time chooser
- * @author Gardenia Liu
- */
-import React from 'react';
-type Props = {
-    ariaLabel: string;
-    name: string;
-    hour: number;
-    minute: number;
-    /**
-     * Handler for when time changes
-     * @param hour new 24hr hour number
-     * @param minute new minute number
-     */
-    onChange: (hour: number, minute: number) => void;
-    intervalMin?: number;
-};
-declare const SimpleTimeChooser: React.FC<Props>;
-export default SimpleTimeChooser;

package/dist/esm/types/helpers/getWordCount.d.ts

@@ -1,10 +0,0 @@
-/**
- * Get number of words in string
- * @author Gardenia Liu
- * @author Allison Zhang
- * @author Gabe Abrams
- * @param text the string to check
- * @returns number of words in the string
- */
-declare const getWordCount: (text: string) => number;
-export default getWordCount;

package/src/components/SimpleTimeChooser.tsx

@@ -1,195 +0,0 @@
-/**
- * A very simple, lightweight time chooser
- * @author Gardenia Liu
- */
-
-// Import React
-import React from 'react';
-
-// Import helpers
-import padZerosLeft from '../helpers/padZerosLeft';
-
-/*------------------------------------------------------------------------*/
-/* -------------------------------- Types ------------------------------- */
-/*------------------------------------------------------------------------*/
-
-type Props = {
-  // Aria label
-  ariaLabel: string,
-  // Name of the chooser (machine-readable, hyphenated)
-  name: string,
-  // Currently selected hour of the day (24hr)
-  hour: number,
-  // Currently selected minute within the hour
-  minute: number,
-  /**
-   * Handler for when time changes
-   * @param hour new 24hr hour number
-   * @param minute new minute number
-   */
-  onChange: (hour: number, minute: number) => void,
-  // Interval in minutes between each choice
-  // Allowed options: 15, 30, 60, defaults to 15
-  // If an unsupported interval is passed in, it will default to 15
-  intervalMin?: number,
-};
-
-/*------------------------------------------------------------------------*/
-/* ------------------------------ 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: React.FC<Props> = (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: number): {
-    hours: number,
-    minutes: number,
-  } => {
-    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: number): string => {
-    // 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: string[] = [];
-  for (let time = 0; time < 24 * 60; time += intervalMin) {
-    times.push(formatTime(time));
-  }
-
-  // Create choice options
-  const selectedTimeMin = hour * 60 + minute; // minutes since midnight
-  const timeOptions: React.ReactNode[] = times.map((timeString, timeIndex) => {
-    // Create time option
-    const numMinutesForChoice = timeIndex * intervalMin;
-
-    // Render the option
-    return (
-      <option
-        key={numMinutesForChoice}
-        value={numMinutesForChoice}
-        aria-label={`choose ${timeString}`}
-      >
-        {timeString}
-      </option>
-    );
-  });
-
-  return (
-    <div
-      className="SimpleTimeChooser-container"
-      aria-label={`time chooser with selected time: ${formatTime(selectedTimeMin)}`}
-    >
-      {/* Time Chooser */}
-      <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 of change
-          onChange(timeInfo.hours, timeInfo.minutes);
-        }}
-      >
-        {timeOptions}
-      </select>
-    </div>
-  );
-};
-
-/*------------------------------------------------------------------------*/
-/* ------------------------------- Wrap Up ------------------------------ */
-/*------------------------------------------------------------------------*/
-
-// Export component
-export default SimpleTimeChooser;

package/src/helpers/getWordCount.ts

@@ -1,26 +0,0 @@
-const punctuationRegex = /[!@#$%^&*(),.?\/;:'"\-\[\]]/g;
-
-/**
- * Get number of words in string 
- * @author Gardenia Liu
- * @author Allison Zhang
- * @author Gabe Abrams
- * @param text the string to check
- * @returns number of words in the string
- */
-const getWordCount = (text: string): number => {
-  const trimmedTextWithoutPunctuation = (
-    text
-      // Remove leading and trailing whitespace
-      .trim()
-      // Remove punctuation
-      .replace(punctuationRegex, '')
-  );
-  if (trimmedTextWithoutPunctuation.length === 0) {
-    return 0;
-  }
-
-  return trimmedTextWithoutPunctuation.split(/\s+/g).length;
-};
-
-export default getWordCount;