dce-reactkit 4.3.4 → 4.3.5-beta-progress-size.2

package/dist/esm/types/types/ProgressBarSize.d.ts

@@ -3,7 +3,6 @@
  * @author Allison Zhang
  */
 declare enum ProgressBarSize {
-    Small = "Small",
     Medium = "Medium",
     Large = "Large"
 }

package/dist/index.d.ts

@@ -778,7 +778,6 @@ declare const Dropdown: React$1.FC<Props$1>;
  * @author Allison Zhang
  */
 declare enum ProgressBarSize {
-    Small = "Small",
     Medium = "Medium",
     Large = "Large"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "4.3.4",
+  "version": "4.3.5-beta-progress-size.2",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ProgressBar.tsx

@@ -9,6 +9,8 @@ import React from 'react';
 // Import types
 import Variant from '../types/Variant';
 import ProgressBarSize from '../types/ProgressBarSize';
+import roundToNumDecimals from '../helpers/roundToNumDecimals';
+import padDecimalZeros from '../helpers/padDecimalZeros';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
@@ -75,7 +77,7 @@ type ProgressStatus = (
 const ITEM_WIDTH_MULTIPLIER = 1.3;
 
 // Constant for percent width
-const PERCENT_WIDTH = 3;
+const PERCENT_WIDTH = 2.7;
 
 // Constant for item width
 const ITEM_WIDTH = 2;
@@ -88,11 +90,9 @@ const ITEM_WIDTH = 2;
 let style = `
   .ProgressBar-number-of,
   .ProgressBar-percent {
-    flex: 0 0 auto;
     white-space: nowrap;
-    padding-right: 0.5em;
-    padding-left: 0.25em;
-    text-align: right;
+    padding-right: 0.3em;
+    text-align: left;
     transition: width .25s ease;
   }
 
@@ -164,10 +164,20 @@ const ProgressBar: React.FC<Props> = (props) => {
   /* ---------------- Sizes --------------- */
   /*----------------------------------------*/
 
+  // Add dynamic general style
+  style += `
+    .ProgressBar-percent {
+      min-width: ${(status.usePercent ? status.numDecimalPlaces ?? 0 : 0) + PERCENT_WIDTH}em;
+    }
+    .ProgressBar-number-of {
+      min-width: ${((!status.usePercent ? String(status.total ?? 0).length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+    }
+  `;
+
   // Size styles
   switch (size) {
-    case ProgressBarSize.Small:
-      // Small size
+    case ProgressBarSize.Medium:
+      // Medium size
       style += `
         .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
           font-size: 1em;
@@ -180,18 +190,10 @@ const ProgressBar: React.FC<Props> = (props) => {
           height: 1.5em;
           border-radius: 0.5em;
         }
-        .ProgressBar-percent {
-          min-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-          max-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-        }
-        .ProgressBar-number-of {
-          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-        }
       `;
       break;
-    case ProgressBarSize.Medium:
-      // Medium size
+    case ProgressBarSize.Large:
+      // Large size
       style += `
         .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
           font-size: 1.5em;
@@ -204,38 +206,6 @@ const ProgressBar: React.FC<Props> = (props) => {
           height: 2em;
           border-radius: 0.7em;
         }
-        .ProgressBar-percent {
-          min-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-          max-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-        }
-        .ProgressBar-number-of {
-          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-        }
-      `;
-      break;
-    case ProgressBarSize.Large:
-      // Large size
-      style += `
-        .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
-          font-size: 2em;
-        }
-        .ProgressBar-container .ProgressBar-background {
-          height: 3em;
-          border-radius: 1em;
-        }
-        .ProgressBar-container .ProgressBar-bar {
-          height: 3em;
-          border-radius: 1em;
-        }
-        .ProgressBar-percent {
-          min-width:  ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-          max-width:  ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-        }
-        .ProgressBar-number-of {
-          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-        }
       `;
       break;
     default:
@@ -245,9 +215,8 @@ const ProgressBar: React.FC<Props> = (props) => {
   // Get the width of the outline based on size
   const outlineWidth = (() => {
     switch (size) {
-      case ProgressBarSize.Small: return '0.05em';
-      case ProgressBarSize.Medium: return '0.08em';
-      case ProgressBarSize.Large: return '0.1em';
+      case ProgressBarSize.Medium: return '0.05em';
+      case ProgressBarSize.Large: return '0.08em';
       default: return '0.05em';
     }
   })();
@@ -275,25 +244,38 @@ const ProgressBar: React.FC<Props> = (props) => {
   `;
 
   // Stripes for striped effect
-  const stripes: React.ReactNode = (
-    <div>
-      <style>{stripesStyle}</style>
-      <div
-        className="ProgressBar-stripes position-absolute "
-        style={{
-          width: '200%',
-          height: '100%',
-        }}
-      >
-        &nbsp;
+  let stripes: React.ReactNode = null;
+  if (striped) {
+    stripes = (
+      <div>
+        <style>{stripesStyle}</style>
+        <div
+          className="ProgressBar-stripes position-absolute"
+          style={{
+            width: '200%',
+            height: '100%',
+          }}
+        >
+          &nbsp;
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 
   /*----------------------------------------*/
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
+  // Calculate the width of the progress bar
+  let progressBarWidthPercent = 0;
+  if (status.usePercent) {
+    // Use percent progress directly
+    progressBarWidthPercent = status.percentProgress;
+  } else if (status.total > 0) {
+    // Calculate percent progress from items
+    progressBarWidthPercent = (status.numComplete / status.total) * 100;
+  }
+
   // Render the progress bar
   return (
     <div className="ProgressBar-container d-flex align-items-center">
@@ -301,9 +283,7 @@ const ProgressBar: React.FC<Props> = (props) => {
       <style>{style}</style>
       {/* Use items */}
       {!status.usePercent && status.numComplete && (
-        <span
-          className="ProgressBar-number-of pe-2 align-self-center"
-        >
+        <span className="ProgressBar-number-of">
           {status.numComplete}
           &nbsp;of&nbsp;
           {status.total}
@@ -311,15 +291,19 @@ const ProgressBar: React.FC<Props> = (props) => {
       )}
       {/* Use percentage */}
       {status.usePercent && status.percentProgress && (
-        <span
-          className="ProgressBar-percent pe-2 align-self-center"
-        >
-          {status.percentProgress.toFixed(status?.numDecimalPlaces ?? 0)}
+        <span className="ProgressBar-percent">
+          {
+            padDecimalZeros(
+              roundToNumDecimals(status.percentProgress, status?.numDecimalPlaces ?? 0),
+              status?.numDecimalPlaces ?? 0,
+            )
+          }
           %
         </span>
       )}
+      {/* Progress Bar Filled Area */}
       <div
-        className={`ProgressBar-background bg-${bgVariant} w-100`}
+        className={`ProgressBar-background bg-${bgVariant} flex-grow-1`}
         style={{
           boxShadow: `0 0 0 ${outlineWidth} ${showOutline ? '#000' : '#DEE2E6'}`,
         }}
@@ -332,11 +316,13 @@ const ProgressBar: React.FC<Props> = (props) => {
             `ProgressBar-bar bg-${variant} text-start position-relative`
           }
           style={{
-            width: `${(status.usePercent ? status.percentProgress : (status.numComplete / status.total) * 100)}%`,
+            width: `${progressBarWidthPercent}%`,
             overflow: 'hidden',
           }}
         >
-          {striped && stripes}
+          {/* Show Strips (if they exist) */}
+          {stripes}
+          {/* Space so the bar has some content */}
           &nbsp;
         </div>
       </div>

package/src/helpers/parallelLimit.ts

@@ -14,8 +14,10 @@ const parallelLimit = async (
 ): Promise<any[]> => {
   const results: any[] = [];
 
+  let exited = false;
+
   // Wait until finished with all tasks
-  await new Promise<void>((resolve) => {
+  await new Promise<void>((resolve, reject) => {
     /* ------------- Helpers ------------ */
 
     let nextTaskIndex = 0;
@@ -33,23 +35,34 @@ const parallelLimit = async (
         return;
       }
 
-      // Execute task
-      const result = await taskFunction();
+      try {
+        // Execute task
+        const result = await taskFunction();
 
-      // Add results
-      results[taskIndex] = result;
+        // Add results
+        results[taskIndex] = result;
 
-      // Tally and finish
-      if (++numFinishedTasks === taskFunctions.length) {
-        return resolve();
-      }
+        // Tally and finish
+        if (++numFinishedTasks === taskFunctions.length) {
+          exited = true;
+          return resolve();
+        }
 
-      // Not finished! Start another task
-      startTask();
+        if (!exited) {
+          // Not finished! Start another task
+          startTask();
+        }
+      } catch (err) {
+        // Reject only once
+        if (!exited) {
+          exited = true;
+          return reject(err);
+        }
+      }
     };
 
     /* ----------- Start Tasks ---------- */
-    
+
     // If no limit, start all tasks. At least start 1 task
     const numTasks = Math.max((limit || taskFunctions.length), 1);
     for (let i = 0; i < numTasks; i++) {

package/src/types/ProgressBarSize.ts

@@ -3,7 +3,6 @@
  * @author Allison Zhang
  */
 enum ProgressBarSize {
-  Small = 'Small',
   Medium = 'Medium',
   Large = 'Large',
 }