Function Progress

src/Progress.js:35–100

(props)

};

function Progress(props) {
  const {
    children,
    className,
    barClassName,
    cssModule,
    value = 0,
    min = 0,
    max = 100,
    animated,
    striped,
    color,
    bar,
    multi,
    tag: Tag = 'div',
    style = {},
    barStyle = {},
    barAriaValueText,
    barAriaLabelledBy,
    ...attributes
  } = props;

  const percent = (toNumber(value) / toNumber(max)) * 100;

  const progressClasses = mapToCssModules(
    classNames(className, 'progress'),
    cssModule,
  );

  const progressBarClasses = mapToCssModules(
    classNames(
      'progress-bar',
      bar ? className || barClassName : barClassName,
      animated ? 'progress-bar-animated' : null,
      color ? `bg-${color}` : null,
      striped || animated ? 'progress-bar-striped' : null,
    ),
    cssModule,
  );

  const progressBarProps = {
    className: progressBarClasses,
    style: {
      ...(bar ? style : {}),
      ...barStyle,
      width: `${percent}%`,
    },
    role: 'progressbar',
    'aria-valuenow': value,
    'aria-valuemin': min,
    'aria-valuemax': max,
    'aria-valuetext': barAriaValueText,
    'aria-labelledby': barAriaLabelledBy,
    children: children,
  };

  if (bar) {
    return <Tag {...attributes} {...progressBarProps} />;