progressbar.tsx

/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import * as React from 'react';
import { getOverrides } from '../helpers/overrides';
import { SIZE } from './constants';
import {
  StyledRoot,
  StyledBarContainer,
  StyledBar,
  StyledLabel,
  StyledBarProgress,
  StyledInfiniteBar,
} from './styled-components';

import type { ProgressBarProps } from './types';

class ProgressBar extends React.Component<
  ProgressBarProps & {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    forwardedRef: any;
  }
> {
  static defaultProps = {
    getProgressLabel: (value: number, maxValue: number, minValue: number) =>
      `${Math.round(((value - minValue) / (maxValue - minValue)) * 100)}% Complete`,
    infinite: false,
    overrides: {},
    showLabel: false,
    size: SIZE.medium,
    steps: 1,
    successValue: 100,
    minValue: 0,
    maxValue: 100,
    value: 0,
  };

  render() {
    const {
      overrides = {},
      getProgressLabel,
      value,
      size,
      steps,
      successValue,
      minValue,
      maxValue,
      showLabel,
      infinite,
      intent,
      errorMessage, // Deprecated, ignored
      forwardedRef,
      ...restProps
    } = this.props;
    const propsAriaLabel = this.props['aria-label'] || this.props.ariaLabel;
    const progressLabel = getProgressLabel(value, maxValue, minValue);
    const stepsLabel = getStepProgressLabel(value, maxValue, minValue, steps);
    const ariaLabel =
      propsAriaLabel || this.props.infinite
        ? 'Loading'
        : this.props.steps > 1
        ? stepsLabel
        : progressLabel;
    // fallback on successValue (and it's default) if maxValue is not set by user
    const maximumValue = maxValue !== 100 ? maxValue : successValue;
    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
    const [BarContainer, barContainerProps] = getOverrides(
      overrides.BarContainer,
      StyledBarContainer
    );
    const [Bar, barProps] = getOverrides(overrides.Bar, StyledBar);
    const [BarProgress, barProgressProps] = getOverrides(overrides.BarProgress, StyledBarProgress);
    const [Label, labelProps] = getOverrides(overrides.Label, StyledLabel);
    const [InfiniteBar, infiniteBarProps] = getOverrides(overrides.InfiniteBar, StyledInfiniteBar);
    const sharedProps = {
      $infinite: infinite,
      $intent: intent,
      $size: size,
      $steps: steps,
      $successValue: maximumValue,
      $minValue: minValue,
      $maxValue: maximumValue,
      $value: value,
    };
    function renderProgressBar() {
      const children = [];
      for (let i = 0; i < steps; i++) {
        children.push(
          // @ts-ignore
          <Bar key={i} {...sharedProps} {...barProps}>
            <BarProgress $index={i} {...sharedProps} {...barProgressProps} />
          </Bar>
        );
      }
      return children;
    }
    function getStepProgressLabel(
      value: number,
      maxValue: number,
      minValue: number,
      steps: number
    ) {
      return `Step ${Math.ceil(((value - minValue) / (maxValue - minValue)) * steps)} of ${steps}`;
    }
    return (
      <Root
        ref={forwardedRef}
        data-baseweb="progress-bar"
        role="progressbar"
        aria-label={ariaLabel}
        aria-valuenow={infinite ? null : value}
        aria-valuemin={infinite ? null : minValue}
        aria-valuemax={infinite ? null : maximumValue}
        aria-live="polite"
        aria-busy={infinite ? true : null}
        {...restProps}
        {...sharedProps}
        {...rootProps}
      >
        <BarContainer {...sharedProps} {...barContainerProps}>
          {infinite ? (
            <React.Fragment>
              <InfiniteBar
                $isLeft={true}
                $size={sharedProps.$size}
                $intent={sharedProps.$intent}
                {...infiniteBarProps}
              />

              <InfiniteBar
                $size={sharedProps.$size}
                $intent={sharedProps.$intent}
                {...infiniteBarProps}
              />
            </React.Fragment>
          ) : (
            renderProgressBar()
          )}
        </BarContainer>
        {showLabel && (
          <Label {...sharedProps} {...labelProps}>
            {getProgressLabel(value, maximumValue, minValue)}
          </Label>
        )}
      </Root>
    );
  }
}

const ForwardedProgressBar = React.forwardRef<HTMLDivElement, Partial<ProgressBarProps>>(
  // @ts-ignore
  (props: ProgressBarProps, ref) => (
    //$FlowExpectedError[cannot-spread-inexact]
    <ProgressBar forwardedRef={ref} {...props} />
  )
);
ForwardedProgressBar.displayName = 'ProgressBar';
export default ForwardedProgressBar;