dce-reactkit 3.0.45 → 3.0.48

package/src/components/CopiableBox.tsx

@@ -19,10 +19,10 @@ import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 
 // Props definition
 type Props = {
-  // Unique name of the item to copy (no spaces, compatible with css classes)
-  name: string,
   // The text to copy
   text: string,
+  // If defined, the text area will have a maximum width
+  maxTextWidthRem?: number,
   // Human-readable label of the copy field
   label: string,
   // FontAwesome icon to place before the label
@@ -35,6 +35,10 @@ type Props = {
   numVisibleLines?: number,
   // If defined, text box becomes clickable and this is the handler
   onClick?: () => void,
+  // Id of the text area
+  textAreaId?: string,
+  // Id of the copy button
+  copyButtonId?: string,
 };
 
 /*------------------------------------------------------------------------*/
@@ -104,14 +108,16 @@ const CopiableBox: React.FC<Props> = (props) => {
 
   // Destructure all props
   const {
-    name,
     text,
+    maxTextWidthRem,
     label,
     labelIcon,
     minLabelWidthRem,
     multiline,
     numVisibleLines = 10,
     onClick,
+    textAreaId,
+    copyButtonId,
   } = props;
 
   /* -------------- State ------------- */
@@ -133,38 +139,19 @@ const CopiableBox: React.FC<Props> = (props) => {
   /*                           Component Functions                          */
   /*------------------------------------------------------------------------*/
 
-  // Determine the id for the copiable text field
-  const copiableFieldClassName = `CopiableBox-text-box-${name}`;
-
   /**
    * Perform a copy
    * @author Gabe Abrams
    */
   const performCopy = async () => {
     // Write to clipboard
-    let copyFailed = false;
     try {
       await navigator.clipboard.writeText(text);
     } catch (err) {
-      copyFailed = true;
-    }
-
-    // Try copy again if it failed
-    if (copyFailed) {
-      try {
-        const input = (
-          document.getElementsByClassName(copiableFieldClassName)[0]
-        ) as HTMLInputElement;
-        input.focus();
-        input.select();
-        document.execCommand('copy');
-        input.blur();
-      } catch (err) {
-        return alert(
-          'Unable to copy',
-          'Oops! We couldn\'t copy that to the clipboard. Please copy the text manually.',
-        );
-      }
+      return alert(
+        'Unable to copy',
+        'Oops! We couldn\'t copy that to the clipboard. Please copy the text manually.',
+      );
     }
 
     // Show copied notice
@@ -216,7 +203,8 @@ const CopiableBox: React.FC<Props> = (props) => {
         multiline
           ? (
             <textarea
-              className={`${copiableFieldClassName} CopiableBox-text-multiline form-control bg-white text-dark`}
+              id={textAreaId}
+              className="CopiableBox-text CopiableBox-text-multiline form-control bg-white text-dark"
               value={text}
               aria-label={`${label} text`}
               rows={numVisibleLines}
@@ -232,14 +220,20 @@ const CopiableBox: React.FC<Props> = (props) => {
                     ? 'underline'
                     : undefined
                 ),
+                maxWidth: (
+                  maxTextWidthRem
+                    ? `${maxTextWidthRem}rem`
+                    : undefined
+                ),
               }}
               readOnly
             />
           )
           : (
             <input
+              id={textAreaId}
               type="text"
-              className={`${copiableFieldClassName} CopiableBox-text-single-line form-control bg-white text-dark`}
+              className="CopiableBox-text CopiableBox-text-single-line form-control bg-white text-dark"
               value={text}
               aria-label={`${label} text`}
               onClick={onClick}
@@ -254,6 +248,11 @@ const CopiableBox: React.FC<Props> = (props) => {
                     ? 'underline'
                     : undefined
                 ),
+                maxWidth: (
+                  maxTextWidthRem
+                    ? `${maxTextWidthRem}rem`
+                    : undefined
+                ),
               }}
               readOnly
             />
@@ -261,6 +260,7 @@ const CopiableBox: React.FC<Props> = (props) => {
       }
       
       <button
+        id={copyButtonId}
         className="btn btn-secondary"
         type="button"
         aria-label={`copy ${label} to the clipboard`}

package/src/helpers/getPartOfDay.ts

@@ -0,0 +1,19 @@
+/**
+ * Get the current part of day (morning, evening, etc.)
+ * @author Gabe Abrams
+ */
+const getPartOfDay = () => {
+  // Setup the post-it time of day
+  let partOfDay = 'day';
+  let hours = new Date().getHours();
+  if (hours < 12) {
+    partOfDay = 'morning';
+  } else if (hours >= 12 && hours <= 16) {
+    partOfDay = 'afternoon';
+  } else if (hours > 16 && hours <= 24) {
+    partOfDay = 'evening';
+  }
+  return partOfDay;
+};
+
+export default getPartOfDay;

package/src/helpers/stringsToHumanReadableList.ts

@@ -0,0 +1,39 @@
+/**
+ * Create a human readable list from an array of strings.
+ *   For example, ['apple', 'orange'] becomes "apple and orange"
+ *   and ['apple', 'orange', 'mango'] becomes "apple, orange, and mango"
+ * @author Gabe Abrams
+ * @param items list of items in the list
+ * @returns human-readable list
+ */
+const stringsToHumanReadableList = (items: string[]): string => {
+  // Handle 0-item case
+  if (items.length === 0) {
+    return '';
+  }
+
+  // Handle 1-item case
+  if (items.length === 1) {
+    return items[0];
+  }
+
+  // Handle 2-item case
+  if (items.length === 2) {
+    return `${items[0]} and ${items[1]}`;
+  }
+
+  // Handle 3+ item case
+  let list = '';
+  items.forEach((item, i) => {
+    if (i === items.length - 1) {
+      // Last item
+      list += `, and ${item}`;
+    }
+
+    // Previous items
+    list += `, ${item}`;
+  });
+  return list;
+};
+
+export default stringsToHumanReadableList;

package/src/index.ts

@@ -43,6 +43,8 @@ import getTimeInfoInET from './helpers/getTimeInfoInET';
 import stubServerEndpoint from './helpers/stubServerEndpoint';
 import startMinWait from './helpers/startMinWait';
 import getHumanReadableDate from './helpers/getHumanReadableDate';
+import getPartOfDay from './helpers/getPartOfDay';
+import stringsToHumanReadableList from './helpers/stringsToHumanReadableList';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -95,6 +97,8 @@ export {
   stubServerEndpoint,
   startMinWait,
   getHumanReadableDate,
+  getPartOfDay,
+  stringsToHumanReadableList,
   // Client helpers
   visitServerEndpoint,
   // Server helpers