render()

in src/progress-bar/progressbar.tsx [50:151]

• 77 lines of code
• 12 McCabe index (conditional complexity)

  render() {
    const {
      overrides = {},
      getProgressLabel,
      value,
      size,
      steps,
      successValue,
      minValue,
      maxValue,
      showLabel,
      infinite,
      errorMessage,
      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,
      $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 (
      /* eslint-disable jsx-a11y/role-supports-aria-props */

      <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-invalid={errorMessage ? true : null}
        aria-errormessage={errorMessage}
        {...restProps}
        {...sharedProps}
        {...rootProps}
      >
        <BarContainer {...sharedProps} {...barContainerProps}>
          {infinite ? (
            <React.Fragment>
              <InfiniteBar $isLeft={true} $size={sharedProps.$size} {...infiniteBarProps} />

              <InfiniteBar $size={sharedProps.$size} {...infiniteBarProps} />
            </React.Fragment>
          ) : (
            renderProgressBar()
          )}
        </BarContainer>
        {showLabel && (
          <Label {...sharedProps} {...labelProps}>
            {getProgressLabel(value, maximumValue, minValue)}
          </Label>
        )}
      </Root>
    );
    /* eslint-enable jsx-a11y/role-supports-aria-props */
  }