dce-reactkit 4.2.4-beta.heat-seek.1 → 4.2.6

package/src/components/ProgressBar.tsx

@@ -0,0 +1,347 @@
+/**
+ * Customizable Progress Bar component using Bootstrap styles
+ * @author Allison Zhang
+ */
+
+// Import React
+import React from 'react';
+
+// Import types
+import Variant from '../types/Variant';
+import ProgressBarSize from '../types/ProgressBarSize';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = (
+  & (
+    // Percent
+    | {
+      // Percentage progress (0-100)
+      percentProgress: number,
+      // Num decimal places to show (default 0)
+      numDecimalPlaces?: number,
+    }
+    // Items
+    | {
+      // Current progress (number of items completed)
+      numComplete: number,
+      // Maximum progress (total number of items)
+      total: number,
+    }
+  )
+  & {
+    // Whether to show striped effect (default false)
+    striped?: boolean,
+    // Variant of the progress bar (default warning)
+    variant?: Variant,
+    // Background variants (default secondary subtle)
+    bgVariant?: Variant,
+    // Hide outline (default false)
+    showOutline?: boolean,
+    // Size of the progress bar (default md)
+    size?: ProgressBarSize,
+  }
+);
+
+// Progress status definition
+type ProgressStatus = (
+  | {
+    // usePercent true
+    usePercent: true,
+    // Percentage progress (0-100)
+    percentProgress: number,
+    // Num decimal places to show (default 0)
+    numDecimalPlaces?: number,
+  }
+  // Items
+  | {
+    // usePercent false
+    usePercent: false,
+    // Current progress (number of items completed)
+    numComplete: number,
+    // Maximum progress (total number of items)
+    total: number,
+  }
+);
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Constants ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Multiplier for calculating width of number of items
+const ITEM_WIDTH_MULTIPLIER = 1.3;
+
+// Constant for percent width
+const PERCENT_WIDTH = 3;
+
+// Constant for item width
+const ITEM_WIDTH = 2;
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Style ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Base styles
+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;
+    transition: width .25s ease;
+  }
+
+  .ProgressBar-background {
+    overflow: hidden;
+  }
+
+  .ProgressBar-bar {
+    transition: width 1s ease;
+    overflow: hidden;
+  }
+`;
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const ProgressBar: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure props
+  const {
+    striped,
+    variant = Variant.Warning,
+    bgVariant = Variant.Secondary,
+    showOutline,
+    size = ProgressBarSize.Medium,
+  } = props;
+
+  /* -------------- Status ------------- */
+
+  // Determine progress status
+  let status: ProgressStatus;
+
+  // Check whether to use percent or items
+  if ('percentProgress' in props) {
+    // Percent
+    const {
+      percentProgress,
+      numDecimalPlaces,
+    } = props;
+    status = {
+      usePercent: true,
+      percentProgress,
+      numDecimalPlaces,
+    };
+  } else {
+    // Items
+    const {
+      numComplete,
+      total,
+    } = props;
+    status = {
+      usePercent: false,
+      numComplete,
+      total,
+    };
+  }
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /* ---------------- Sizes --------------- */
+  /*----------------------------------------*/
+
+  // Size styles
+  switch (size) {
+    case ProgressBarSize.Small:
+      // Small size
+      style += `
+        .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
+          font-size: 1em;
+        }
+        .ProgressBar-container .ProgressBar-background {
+          height: 1.5em;
+          border-radius: 0.5em;
+        }
+        .ProgressBar-container .ProgressBar-bar {
+          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
+      style += `
+        .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
+          font-size: 1.5em;
+        }
+        .ProgressBar-container .ProgressBar-background {
+          height: 2em;
+          border-radius: 0.7em;
+        }
+        .ProgressBar-container .ProgressBar-bar {
+          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:
+      break;
+  }
+
+  // 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';
+      default: return '0.05em';
+    }
+  })();
+
+  /*----------------------------------------*/
+  /* --------------- Stripes -------------- */
+  /*----------------------------------------*/
+
+  // Stripes style
+  const stripesStyle = `
+    .ProgressBar-stripes {
+      background-image: linear-gradient(315deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000 100%);
+      background-size: 6em 6em;
+      animation: ProgressBar-stripe-animation 2.5s linear infinite;
+      opacity: 0.09;
+    }
+    @keyframes ProgressBar-stripe-animation {
+      0% {
+        background-position: -6em 0;
+      }
+      100% {
+        background-position: 0 0;
+      }
+    }
+  `;
+
+  // Stripes for striped effect
+  const stripes: React.ReactNode = (
+    <div>
+      <style>{stripesStyle}</style>
+      <div
+        className="ProgressBar-stripes position-absolute "
+        style={{
+          width: '200%',
+          height: '100%',
+        }}
+      >
+        &nbsp;
+      </div>
+    </div>
+  );
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  // Render the progress bar
+  return (
+    <div className="ProgressBar-container d-flex align-items-center">
+      {/* Style */}
+      <style>{style}</style>
+      {/* Use items */}
+      {!status.usePercent && status.numComplete && (
+        <span
+          className="ProgressBar-number-of pe-2 align-self-center"
+        >
+          {status.numComplete}
+          &nbsp;of&nbsp;
+          {status.total}
+        </span>
+      )}
+      {/* Use percentage */}
+      {status.usePercent && status.percentProgress && (
+        <span
+          className="ProgressBar-percent pe-2 align-self-center"
+        >
+          {status.percentProgress.toFixed(status?.numDecimalPlaces ?? 0)}
+          %
+        </span>
+      )}
+      <div
+        className={`ProgressBar-background bg-${bgVariant} w-100`}
+        style={{
+          boxShadow: `0 0 0 ${outlineWidth} ${showOutline ? '#000' : '#DEE2E6'}`,
+        }}
+        aria-valuenow={status.usePercent ? status.percentProgress : status.numComplete}
+        aria-valuemin={0}
+        aria-valuemax={status.usePercent ? 100 : status.total}
+      >
+        <div
+          className={
+            `ProgressBar-bar bg-${variant} text-start position-relative`
+          }
+          style={{
+            width: `${(status.usePercent ? status.percentProgress : (status.numComplete / status.total) * 100)}%`,
+            overflow: 'hidden',
+          }}
+        >
+          {striped && stripes}
+          &nbsp;
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/helpers/getTimestampFromTimeInfoInET.ts

@@ -6,78 +6,6 @@ import ReactKitErrorCode from '../types/ReactKitErrorCode';
 import getTimeInfoInET from './getTimeInfoInET';
 import padZerosLeft from './padZerosLeft';
 
-/*----------------------------------------*/
-/* --------------- Helpers -------------- */
-/*----------------------------------------*/
-
-/**
- * Check if a timestamp is valid
- * @param opts object containing all arguments
- * @param opts.timestamp Timestamp in milliseconds since epoch
- * @param opts.expectedYear Expected year
- * @param opts.expectedMonth Expected month
- * @param opts.expectedDay Expected day
- * @param opts.expectedHour Expected hour
- * @param opts.expectedMinute Expected minute
- * @returns 1 if the timestamp needs to be increased, -1 if it needs to be decreased, 0 if it is valid
- */
-const checkTimestamp = (
-  opts: {
-    timestamp: number,
-    expectedYear: number,
-    expectedMonth: number,
-    expectedDay: number,
-    expectedHour: number,
-    expectedMinute: number,
-  },
-): number => {
-  const {
-    timestamp,
-    expectedYear,
-    expectedMonth,
-    expectedDay,
-    expectedHour,
-    expectedMinute,
-  } = opts;
-
-  const timeInfoInET = getTimeInfoInET(timestamp);
-  if (timeInfoInET.year < expectedYear) {
-    return 1;
-  }
-  if (timeInfoInET.year > expectedYear) {
-    return -1;
-  }
-  if (timeInfoInET.month < expectedMonth) {
-    return 1;
-  }
-  if (timeInfoInET.month > expectedMonth) {
-    return -1;
-  }
-  if (timeInfoInET.day < expectedDay) {
-    return 1;
-  }
-  if (timeInfoInET.day > expectedDay) {
-    return -1;
-  }
-  if (timeInfoInET.hour < expectedHour) {
-    return 1;
-  }
-  if (timeInfoInET.hour > expectedHour) {
-    return -1;
-  }
-  if (timeInfoInET.minute < expectedMinute) {
-    return 1;
-  }
-  if (timeInfoInET.minute > expectedMinute) {
-    return -1;
-  }
-  return 0;
-};
-
-/*----------------------------------------*/
-/* ---------------- Main ---------------- */
-/*----------------------------------------*/
-
 /**
  * Get a timestamp (ms since epoch) from time info (year, month, day, hour, minute, etc.) in Eastern Time (ET)
  * @author Gardenia Liu
@@ -87,7 +15,7 @@ const checkTimestamp = (
  * @param opts.month Month (1-12)
  * @param opts.day Day of the month (1-31)
  * @param opts.hour Hour (0-23)
- * @param opts.minute Minute (0-59)
+ * @param opts.minute Minute (0-59))
  * @returns Timestamp in milliseconds since epoch
  */
 const getTimestampFromTimeInfoInET = (
@@ -122,55 +50,25 @@ const getTimestampFromTimeInfoInET = (
 
   // Build ET ISO string and convert to UTC timestamp
   const etISOString = `${year}-${mm}-${dd}T${hh}:${min}:00${etOffset}`;
-  let timestamp = (new Date(etISOString)).getTime();
-
-  // Heat seek to get the right timestamp
-  const maxOffset = 24 * 60; // 24 hours in minutes
-  let currentOffset = 0; // minutes
-  const offsetIncrement = 15; // minutes
-  const offsetDirection = checkTimestamp({
-    timestamp,
-    expectedYear: year,
-    expectedMonth: month,
-    expectedDay: day,
-    expectedHour: hour,
-    expectedMinute: minute,
-  });
-  if (offsetDirection === 0) {
-    // Valid! Return the timestamp
-    return timestamp;
-  }
-
-  // Heat seek
-  while (Math.abs(currentOffset) < maxOffset) {
-    // Update offset
-    currentOffset += (offsetDirection * offsetIncrement);
+  const timestamp = (new Date(etISOString)).getTime();
 
-    // Update timestamp
-    const offsetMs = currentOffset * 60 * 1000;
-    timestamp += offsetMs;
-
-    // Check timestamp again
-    const newDirection = checkTimestamp({
-      timestamp,
-      expectedYear: year,
-      expectedMonth: month,
-      expectedDay: day,
-      expectedHour: hour,
-      expectedMinute: minute,
-    });
-    if (newDirection === 0) {
-      // Valid! Return the timestamp
-      return timestamp;
-    }
-
-    // Invalid. Keep looping.
+  // Verify that the timestamp is correct
+  const timeInfoInET = getTimeInfoInET(timestamp);
+  if (
+    timeInfoInET.year !== year
+    || timeInfoInET.month !== month
+    || timeInfoInET.day !== day
+    || timeInfoInET.hour !== hour
+    || timeInfoInET.minute !== minute
+  ) {
+    throw new ErrorWithCode(
+      `Timestamp mismatch: expected ${year}-${mm}-${dd} ${hh}:${min}, got ${timeInfoInET.year}-${padZerosLeft(timeInfoInET.month, 2)}-${padZerosLeft(timeInfoInET.day, 2)} ${padZerosLeft(timeInfoInET.hour, 2)}:${padZerosLeft(timeInfoInET.minute, 2)}`,
+      ReactKitErrorCode.ETTimestampInvalid,
+    );
   }
 
-  throw new ErrorWithCode(
-    `Timestamp mismatch: expected ${year}-${mm}-${dd} ${hh}:${min}, seeked to offset ${currentOffset} minutes but could not find a valid timestamp.`,
-    ReactKitErrorCode.ETTimestampInvalid,
-  );
+  // Valid! Return the timestamp
+  return timestamp;
 };
 
 export default getTimestampFromTimeInfoInET;

package/src/index.ts

@@ -31,6 +31,7 @@ import ToggleSwitch from './components/ToggleSwitch';
 import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 import MultiSwitch from './components/MultiSwitch';
 import Dropdown from './components/Dropdown';
+import ProgressBar from './components/ProgressBar';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -156,6 +157,7 @@ export {
   AutoscrollToBottomContainer,
   MultiSwitch,
   Dropdown,
+  ProgressBar,
   // Global functions
   alert,
   prompt,

package/src/types/ProgressBarSize.ts

@@ -0,0 +1,11 @@
+/**
+ * Progress bar sizes
+ * @author Allison Zhang
+ */
+enum ProgressBarSize {
+  Small = 'Small',
+  Medium = 'Medium',
+  Large = 'Large',
+}
+
+export default ProgressBarSize;