@intility/bifrost-react/dist/components/ProgressBar/ProgressBar.js

React library for Intility's design system, Bifrost.

import { c as _c } from "react-compiler-runtime";
import React, { forwardRef } from "react";
import classnames from "classnames";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Display progress as percentage
 *
 * @see https://bifrost.intility.com/react/progressBar
 */
const ProgressBar = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(42);
  let children;
  let className;
  let props;
  let t1;
  let t2;
  let t3;
  let t4;
  let t5;
  let t6;
  let value;
  if ($[0] !== t0) {
    ({
      children,
      className,
      value,
      max: t1,
      size: t2,
      hideLabel: t3,
      disabled: t4,
      state: t5,
      loading: t6,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = props;
    $[4] = t1;
    $[5] = t2;
    $[6] = t3;
    $[7] = t4;
    $[8] = t5;
    $[9] = t6;
    $[10] = value;
  } else {
    children = $[1];
    className = $[2];
    props = $[3];
    t1 = $[4];
    t2 = $[5];
    t3 = $[6];
    t4 = $[7];
    t5 = $[8];
    t6 = $[9];
    value = $[10];
  }
  const max = t1 === undefined ? 100 : t1;
  const size = t2 === undefined ? "medium" : t2;
  const hideLabel = t3 === undefined ? false : t3;
  const disabled = t4 === undefined ? false : t4;
  const state = t5 === undefined ? "default" : t5;
  const loading = t6 === undefined ? false : t6;
  const cappedValue = Math.min(Math.max(0, value), max);
  const percentageValue = cappedValue / max * 100;
  let t7;
  if ($[11] !== percentageValue) {
    t7 = Math.round(percentageValue);
    $[11] = percentageValue;
    $[12] = t7;
  } else {
    t7 = $[12];
  }
  const label = `${t7}%`;
  const t8 = `${percentageValue}%`;
  let progressStyle;
  if ($[13] !== state || $[14] !== t8) {
    progressStyle = {
      width: t8
    };
    if (typeof state === "string" && state !== "default") {
      progressStyle.backgroundColor = `var(--bfc-base-c-${state})`;
    }
    $[13] = state;
    $[14] = t8;
    $[15] = progressStyle;
  } else {
    progressStyle = $[15];
  }
  const t9 = hideLabel ? label : "";
  const t10 = hideLabel ? label : "";
  let t11;
  if ($[16] !== className) {
    t11 = classnames(className, "bf-progressbar-wrapper");
    $[16] = className;
    $[17] = t11;
  } else {
    t11 = $[17];
  }
  const t12 = size === "small";
  const t13 = size === "large";
  let t14;
  if ($[18] !== disabled || $[19] !== t12 || $[20] !== t13) {
    t14 = classnames("bf-progressbar", {
      "bf-progressbar-small": t12,
      "bf-progressbar-large": t13,
      "bf-progressbar-disabled": disabled
    });
    $[18] = disabled;
    $[19] = t12;
    $[20] = t13;
    $[21] = t14;
  } else {
    t14 = $[21];
  }
  let t15;
  if ($[22] !== loading) {
    t15 = classnames("bf-progressbar-progress", {
      "bf-loading-stripes": loading
    });
    $[22] = loading;
    $[23] = t15;
  } else {
    t15 = $[23];
  }
  let t16;
  if ($[24] !== progressStyle || $[25] !== t15) {
    t16 = /*#__PURE__*/_jsx("div", {
      className: t15,
      style: progressStyle
    });
    $[24] = progressStyle;
    $[25] = t15;
    $[26] = t16;
  } else {
    t16 = $[26];
  }
  let t17;
  if ($[27] !== t14 || $[28] !== t16) {
    t17 = /*#__PURE__*/_jsx("div", {
      className: t14,
      children: t16
    });
    $[27] = t14;
    $[28] = t16;
    $[29] = t17;
  } else {
    t17 = $[29];
  }
  let t18;
  if ($[30] !== children || $[31] !== hideLabel || $[32] !== label) {
    t18 = !hideLabel && /*#__PURE__*/_jsx("span", {
      className: "bf-progressbar-label",
      children: children ?? label
    });
    $[30] = children;
    $[31] = hideLabel;
    $[32] = label;
    $[33] = t18;
  } else {
    t18 = $[33];
  }
  let t19;
  if ($[34] !== props || $[35] !== ref || $[36] !== t10 || $[37] !== t11 || $[38] !== t17 || $[39] !== t18 || $[40] !== t9) {
    t19 = /*#__PURE__*/_jsxs("div", {
      title: t9,
      "aria-label": t10,
      ref: ref,
      ...props,
      className: t11,
      children: [t17, t18]
    });
    $[34] = props;
    $[35] = ref;
    $[36] = t10;
    $[37] = t11;
    $[38] = t17;
    $[39] = t18;
    $[40] = t9;
    $[41] = t19;
  } else {
    t19 = $[41];
  }
  return t19;
});
ProgressBar.displayName = "ProgressBar";
export default ProgressBar;