@primer/react/lib/ProgressBar/ProgressBar.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var styled = require('styled-components');
var styledSystem = require('styled-system');
var constants = require('../constants.js');
var sx = require('../sx.js');
var toggleStyledComponent = require('../internal/utils/toggleStyledComponent.js');
var clsx = require('clsx');
var ProgressBar_module = require('./ProgressBar.module.css.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const shimmer = styled.keyframes(["from{mask-position:200%;}to{mask-position:0%;}"]);
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga';
const ProgressItem = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'span', styled__default.default.span.withConfig({
  displayName: "ProgressBar__ProgressItem",
  componentId: "sc-1jz8j7n-0"
})(["width:", ";background-color:", ";@media (prefers-reduced-motion:no-preference){&[data-animated='true']{mask-image:linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);mask-size:200%;animation:", ";animation-duration:1s;animation-iteration-count:infinite;}}", ";"], props => props.progress ? `${props.progress}%` : 0, props => constants.get(`colors.${props.bg || 'success.emphasis'}`), shimmer, sx.default));
const sizeMap = {
  small: '5px',
  large: '10px',
  default: '8px'
};
const ProgressContainer = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'span', styled__default.default.span.withConfig({
  displayName: "ProgressBar__ProgressContainer",
  componentId: "sc-1jz8j7n-1"
})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";gap:2px;", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', constants.get('colors.border.default'), constants.get('radii.1'), props => sizeMap[props.barSize || 'default'], styledSystem.width, sx.default));
const Item = /*#__PURE__*/React.forwardRef(({
  progress,
  'aria-label': ariaLabel,
  'aria-valuenow': ariaValueNow,
  'aria-valuetext': ariaValueText,
  className,
  ...rest
}, forwardRef) => {
  const progressAsNumber = typeof progress === 'string' ? parseInt(progress, 10) : progress;
  const ariaAttributes = {
    'aria-valuenow': ariaValueNow !== null && ariaValueNow !== undefined ? ariaValueNow : progressAsNumber !== undefined && progressAsNumber >= 0 ? Math.round(progressAsNumber) : 0,
    'aria-valuemin': 0,
    'aria-valuemax': 100,
    'aria-valuetext': ariaValueText
  };
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const progressBarWidth = '--progress-width';
  const progressBarBg = '--progress-bg';
  const styles = {};
  const bgType = rest.bg && rest.bg.split('.');
  styles[progressBarWidth] = progress ? `${progress}%` : '0%';
  styles[progressBarBg] = bgType && `var(--bgColor-${bgType[0]}-${bgType[1]})` || 'var(--bgColor-success-emphasis)';
  return /*#__PURE__*/React__default.default.createElement(ProgressItem, _extends({
    className: clsx.clsx(className, {
      [ProgressBar_module.ProgressBarItem]: enabled
    })
  }, rest, {
    role: "progressbar",
    "aria-label": ariaLabel,
    ref: forwardRef,
    progress: progress,
    style: enabled ? styles : undefined
  }, ariaAttributes));
});
Item.displayName = 'ProgressBar.Item';
const ProgressBar = /*#__PURE__*/React.forwardRef(({
  animated,
  progress,
  bg = 'success.emphasis',
  barSize = 'default',
  children,
  'aria-label': ariaLabel,
  'aria-valuenow': ariaValueNow,
  'aria-valuetext': ariaValueText,
  className,
  ...rest
}, forwardRef) => {
  if (children && progress) {
    throw new Error('You should pass `progress` or children, not both.');
  }

  // Get the number of non-empty nodes passed as children, this will exclude
  // booleans, null, and undefined
  const validChildren = React__default.default.Children.toArray(children).length;
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const cssModulesProps = !enabled ? {
    barSize
  } : {
    'data-progress-display': rest.inline ? 'inline' : 'block',
    'data-progress-bar-size': barSize
  };
  return /*#__PURE__*/React__default.default.createElement(ProgressContainer, _extends({
    ref: forwardRef,
    className: clsx.clsx(className, {
      [ProgressBar_module.ProgressBarContainer]: enabled
    })
  }, cssModulesProps, rest), validChildren ? children : /*#__PURE__*/React__default.default.createElement(Item, {
    "data-animated": animated,
    progress: progress,
    "aria-label": ariaLabel,
    "aria-valuenow": ariaValueNow,
    "aria-valuetext": ariaValueText,
    bg: bg
  }));
});
ProgressBar.displayName = 'ProgressBar';

exports.Item = Item;
exports.ProgressBar = ProgressBar;