dce-reactkit 3.2.4 → 3.2.6

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

@@ -8,6 +8,7 @@ declare type Props = {
     minLabelWidth?: string;
     children: React.ReactNode;
     className?: string;
+    wrapButtonsAndAddGaps?: boolean;
 };
 declare const ButtonInputGroup: React.FC<Props>;
 export default ButtonInputGroup;

package/dist/index.d.ts

@@ -243,6 +243,7 @@ declare type Props$a = {
     minLabelWidth?: string;
     children: React.ReactNode;
     className?: string;
+    wrapButtonsAndAddGaps?: boolean;
 };
 declare const ButtonInputGroup: React.FC<Props$a>;
 

package/package.json

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

package/src/components/ButtonInputGroup.tsx

@@ -20,6 +20,8 @@ type Props = {
   children: React.ReactNode,
   // Additional class names to add to the outer container
   className?: string,
+  // If true, wrap buttons and create gaps
+  wrapButtonsAndAddGaps?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -39,6 +41,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
     minLabelWidth,
     children,
     className,
+    wrapButtonsAndAddGaps,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -77,7 +80,15 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
             borderLeftWidth: 0,
           }}
         >
-          {children}
+          {
+            wrapButtonsAndAddGaps
+              ? (
+                <div className="d-flex gap-1 flex-wrap">
+                  {children}
+                </div>
+              )
+              : children
+          }
         </span>
       </div>
     </div>

package/src/components/LogReviewer.tsx

@@ -467,7 +467,7 @@ const columns: IntelliTableColumn[] = [
  */
 const genHumanReadableName = (machineReadableName: string) => {
   let humanReadableName = '';
-  
+
   // Add chars and spaces
   const chars = machineReadableName.split('');
   chars.forEach((char) => {
@@ -477,9 +477,49 @@ const genHumanReadableName = (machineReadableName: string) => {
     }
     humanReadableName += char;
   });
+  const words = (
+    humanReadableName
+      .trim()
+      // Split into words
+      .split(' ')
+      // Filter out whitespace
+      .filter((word) => {
+        return (word.length > 0);
+      })
+      // Capitalize first letter
+      .map((word) => {
+        if (word.length <= 1) {
+          return word;
+        }
+        return `${word.substring(0, 1).toUpperCase()}${word.substring(1)}`;
+      })
+  );
 
-  // Trim and return
-  return humanReadableName.trim();
+  // Handle acronyms by piling words together
+  const consolidatedWords: string[] = [];
+  let acronym = '';
+  words.forEach((word) => {
+    if (word.length === 1) {
+      // Add on to acronym
+      acronym += word;
+    } else {
+      // Wrap up acronym
+      if (acronym.length > 0) {
+        consolidatedWords.push(acronym);
+        acronym = '';
+      }
+
+      // Full word. Just add it
+      consolidatedWords.push(word);
+    }
+  });
+  // Add trailing acronym
+  if (acronym.length > 0) {
+    consolidatedWords.push(acronym);
+  }
+
+  // Return
+  return consolidatedWords.join(' ');
 };
 
 /*------------------------------------------------------------------------*/
@@ -1373,61 +1413,61 @@ const LogReviewer: React.FC<Props> = (props) => {
                   <ButtonInputGroup
                     label="Action"
                     className="mb-2"
+                    wrapButtonsAndAddGaps
                   >
-                    <div className="d-flex gap-1 flex-wrap">
-                      {
-                        Object.keys(LogAction)
-                          .map((action) => {
-                            const description = genHumanReadableName(action);
-                            return (
-                              <CheckboxButton
-                                key={action}
-                                id={`LogReviewer-action-${action}-checkbox`}
-                                text={description}
-                                ariaLabel={`include logs with action type "${description}" in results`}
-                                noMarginOnRight
-                                checked={actionErrorFilterState.action[action]}
-                                onChanged={(checked) => {
-                                  actionErrorFilterState.action[action] = checked;
-                                  dispatch({
-                                    type: ActionType.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
-                                  });
-                                }}
-                              />
-                            );
-                          })
-                      }
-                    </div>
+                    {
+                      Object.keys(LogAction)
+                        .map((action) => {
+                          const description = genHumanReadableName(action);
+                          return (
+                            <CheckboxButton
+                              key={action}
+                              id={`LogReviewer-action-${action}-checkbox`}
+                              text={description}
+                              ariaLabel={`include logs with action type "${description}" in results`}
+                              noMarginOnRight
+                              checked={actionErrorFilterState.action[action]}
+                              onChanged={(checked) => {
+                                actionErrorFilterState.action[action] = checked;
+                                dispatch({
+                                  type: ActionType.UpdateActionErrorFilterState,
+                                  actionErrorFilterState,
+                                });
+                              }}
+                            />
+                          );
+                        })
+                    }
                   </ButtonInputGroup>
                   {/* Target */}
-                  <ButtonInputGroup label="Target">
+                  <ButtonInputGroup
+                    label="Target"
+                    wrapButtonsAndAddGaps
+                  >
                     {/* List of targets */}
-                    <div className="d-flex gap-1 flex-wrap">
-                      {
-                        Object.keys(targetMap)
-                          .map((target) => {
-                            const description = genHumanReadableName(target);
-                            return (
-                              <CheckboxButton
-                                key={target}
-                                id={`LogReviewer-target-${target}-checkbox`}
-                                text={description}
-                                ariaLabel={`include logs with target "${description}" in results`}
-                                checked={actionErrorFilterState.target[target]}
-                                noMarginOnRight
-                                onChanged={(checked) => {
-                                  actionErrorFilterState.target[target] = checked;
-                                  dispatch({
-                                    type: ActionType.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
-                                  });
-                                }}
-                              />
-                            );
-                          })
-                      }
-                    </div>
+                    {
+                      Object.keys(targetMap)
+                        .map((target) => {
+                          const description = genHumanReadableName(target);
+                          return (
+                            <CheckboxButton
+                              key={target}
+                              id={`LogReviewer-target-${target}-checkbox`}
+                              text={description}
+                              ariaLabel={`include logs with target "${description}" in results`}
+                              checked={actionErrorFilterState.target[target]}
+                              noMarginOnRight
+                              onChanged={(checked) => {
+                                actionErrorFilterState.target[target] = checked;
+                                dispatch({
+                                  type: ActionType.UpdateActionErrorFilterState,
+                                  actionErrorFilterState,
+                                });
+                              }}
+                            />
+                          );
+                        })
+                    }
                   </ButtonInputGroup>
                 </TabBox>
               )