@shopify/polaris/dist/esm/components/ProgressBar/ProgressBar.js

Shopify’s product component library

import React$1 from 'react';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames, variationName } from '../../utilities/css.js';
import styles from './ProgressBar.scss.js';

function ProgressBar({
  progress = 0,
  size = 'medium'
}) {
  var i18n = useI18n();
  var className = classNames(styles.ProgressBar, size && styles[variationName('size', size)]);
  var warningMessage = i18n.translate(progress < 0 ? 'Polaris.ProgressBar.negativeWarningMessage' : 'Polaris.ProgressBar.exceedWarningMessage', {
    progress
  });
  var parsedProgress = parseProgress(progress, warningMessage);
  return /*#__PURE__*/React$1.createElement("div", {
    className: className
  }, /*#__PURE__*/React$1.createElement("progress", {
    className: styles.Progress,
    value: parsedProgress,
    max: "100"
  }), /*#__PURE__*/React$1.createElement("div", {
    className: styles.Indicator,
    style: {
      width: "".concat(parsedProgress, "%")
    }
  }, /*#__PURE__*/React$1.createElement("span", {
    className: styles.Label
  }, parsedProgress, "%")));
}

function parseProgress(progress, warningMessage) {
  var progressWidth;

  if (progress < 0) {
    if (process.env.NODE_ENV === 'development') {
      // eslint-disable-next-line no-console
      console.warn(warningMessage);
    }

    progressWidth = 0;
  } else if (progress > 100) {
    if (process.env.NODE_ENV === 'development') {
      // eslint-disable-next-line no-console
      console.warn(warningMessage);
    }

    progressWidth = 100;
  } else {
    progressWidth = progress;
  }

  return progressWidth;
}

export { ProgressBar };