dce-reactkit 3.11.3 → 3.12.0

package/dist/esm/types/components/ItemPicker/index.d.ts

@@ -14,6 +14,7 @@ type Props = {
      */
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
+    hideSelectAllOrNoneButtons?: boolean;
 };
 declare const ItemPicker: React.FC<Props>;
 export default ItemPicker;

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

@@ -6,6 +6,7 @@ import React from 'react';
 type Props = {
     title: React.ReactNode;
     children: React.ReactNode;
+    topRightChildren?: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };

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

@@ -0,0 +1,10 @@
+/**
+ * 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/index.d.ts

@@ -79,6 +79,7 @@ import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
 import visitEndpointOnAnotherServer from './helpers/visitEndpointOnAnotherServer';
+import getWordCount from './helpers/getWordCount';
 import ModalButtonType from './types/ModalButtonType';
 import ModalSize from './types/ModalSize';
 import ModalType from './types/ModalType';
@@ -99,4 +100,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, visitEndpointOnAnotherServer, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, getWordCount, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, visitEndpointOnAnotherServer, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -227,6 +227,7 @@ declare const Modal: React$1.FC<ModalProps>;
 type Props$j = {
     title: React$1.ReactNode;
     children: React$1.ReactNode;
+    topRightChildren?: React$1.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
@@ -412,6 +413,7 @@ type Props$9 = {
      */
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
+    hideSelectAllOrNoneButtons?: boolean;
 };
 declare const ItemPicker: React$1.FC<Props$9>;
 
@@ -1679,6 +1681,16 @@ declare const visitEndpointOnAnotherServer: (opts: {
     } | undefined;
 }) => Promise<any>;
 
+/**
+ * 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;
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -1734,4 +1746,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitEndpointOnAnotherServer, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, getWordCount, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitEndpointOnAnotherServer, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.11.3",
+  "version": "3.12.0",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ItemPicker/index.tsx

@@ -33,6 +33,8 @@ type Props = {
   onChanged: (updatedItems: PickableItem[]) => void,
   // If true, don't add margin to bottom of item picker
   noBottomMargin?: boolean,
+  // If true, hide select all or none buttons
+  hideSelectAllOrNoneButtons?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -52,12 +54,61 @@ const ItemPicker: React.FC<Props> = (props) => {
     items,
     onChanged,
     noBottomMargin,
+    hideSelectAllOrNoneButtons,
   } = props;
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
+  /**
+   * Updates the checked state of an item (including all children)
+   * @author Yuen Ler Chow
+   * @param item the item to update
+   * @param checked the new checked state
+   * @returns the updated item
+   */
+  const updateItemChecked = (
+    item: PickableItem,
+    checked: boolean,
+  ): PickableItem => {
+    if (item.isGroup) {
+      return {
+        ...item,
+        children: item.children.map((child) => {
+          return updateItemChecked(child, checked);
+        }),
+      };
+    }
+    return { ...item, checked };
+  };
+
+  /**
+   * Selects all items in the list
+   * @author Yuen Ler Chow
+   */
+  const handleSelectAll = () => {
+    const updatedItems = items.map(
+      (item) => {
+        return updateItemChecked(item, true);
+      },
+    );
+    onChanged(updatedItems);
+  };
+
+  /**
+   * Deselects all items in the list
+   * @author Yuen Ler Chow
+   */
+  const handleDeselectAll = () => {
+    const updatedItems = items.map(
+      (item) => {
+        return updateItemChecked(item, false);
+      },
+    );
+    onChanged(updatedItems);
+  };
+
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -66,10 +117,55 @@ const ItemPicker: React.FC<Props> = (props) => {
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
+  // Select all/none
+  const selectAllOrNone = (
+    !hideSelectAllOrNoneButtons
+      ? (
+        <div
+          className="d-flex h-100 align-items-end flex-row"
+        >
+          <div className="d-flex justify-content-end">
+            {/* Label */}
+            <div
+              className="me-2"
+              style={{ fontSize: '1.2rem' }}
+            >
+              Select
+            </div>
+            {/* Buttons */}
+            <div className="btn-group" role="group">
+              {/* All */}
+              <button
+                type="button"
+                style={{ borderRight: '0.1rem solid white' }}
+                aria-label="Select all contexts"
+                className="btn btn-secondary py-0"
+                onClick={handleSelectAll}
+              >
+                All
+              </button>
+              {/* None */}
+              <button
+                type="button"
+                aria-label="Deselect all contexts"
+                className="btn btn-secondary py-0"
+                onClick={handleDeselectAll}
+              >
+                None
+              </button>
+            </div>
+          </div>
+        </div>
+      )
+      : undefined
+  );
+
+  // Main UI
   return (
     <TabBox
       title={title}
       noBottomMargin={noBottomMargin}
+      topRightChildren={selectAllOrNone}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList

package/src/components/TabBox.tsx

@@ -15,6 +15,8 @@ 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
@@ -49,7 +51,9 @@ const style = `
 
   /* Container for Title */
   .TabBox-title-container {
-    /* Place on Left */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     position: relative;
     left: 0;
     text-align: left;
@@ -82,6 +86,19 @@ 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;
@@ -98,11 +115,10 @@ const TabBox: React.FC<Props> = (props) => {
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
-  /* -------------- Props ------------- */
-
   const {
     title,
     children,
+    topRightChildren,
     noBottomPadding,
     noBottomMargin,
   } = props;
@@ -111,21 +127,23 @@ const TabBox: React.FC<Props> = (props) => {
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
-  /*----------------------------------------*/
-  /* --------------- Main UI -------------- */
-  /*----------------------------------------*/
-
-  // Full UI
   return (
     <div className={`TabBox-container ${noBottomMargin ? '' : 'mb-2'}`}>
       {/* Style */}
       <style>{style}</style>
 
-      {/* Title */}
+      {/* Title Row with Left and Right sections */}
       <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/helpers/getWordCount.ts

@@ -0,0 +1,26 @@
+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;

package/src/index.ts

@@ -95,6 +95,7 @@ import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
 import visitEndpointOnAnotherServer from './helpers/visitEndpointOnAnotherServer';
+import getWordCount from './helpers/getWordCount';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -201,6 +202,7 @@ export {
   someAsync,
   capitalize,
   shuffleArray,
+  getWordCount,
   // Client helpers
   initClient,
   visitServerEndpoint,