render()

in src/button/button.tsx [59:146]
70 lines of code
9 McCabe index (conditional complexity)

  render() {
    const {
      overrides = {},
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      size,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      kind,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      shape,
      isLoading,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      isSelected,
      // Removing from restProps
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      startEnhancer,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      endEnhancer,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      children,
      forwardedRef,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      colors,
      ...restProps
    } = this.props;
    // Get overrides
    const isAnchor = 'href' in restProps && Boolean(restProps?.href);

    const [BaseButton, baseButtonProps] = getOverrides(
      // adding both (1) BaseButton and (2) Root
      // (1) because it's a Button under the hood
      // (2) because we want consistency with the rest of the components
      overrides.BaseButton || overrides.Root,
      isAnchor ? StyledAnchorBaseButton : StyledBaseButton
    );
    const [LoadingSpinner, loadingSpinnerProps] = getOverrides<SharedStyleProps>(
      overrides.LoadingSpinner,
      StyledLoadingSpinner
    );
    const [LoadingSpinnerContainer, loadingSpinnerContainerProps] = getOverrides<SharedStyleProps>(
      overrides.LoadingSpinnerContainer,
      StyledLoadingSpinnerContainer
    );
    const sharedProps: SharedStyleProps = {
      ...getSharedProps(this.props),
      $isFocusVisible: this.state.isFocusVisible,
    };
    const ariaLoadingElements = isLoading
      ? {
          ['aria-label']:
            typeof this.props.children === 'string'
              ? `loading ${this.props.children}`
              : 'content is loading',
          ['aria-busy']: 'true',
          ['aria-live']: 'polite',
        }
      : {};

    const ariaDisabledProps = restProps?.disabled && isAnchor ? { ['aria-disabled']: true } : {};

    return (
      <BaseButton
        ref={forwardedRef}
        data-baseweb="button"
        {...ariaLoadingElements}
        {...ariaDisabledProps}
        {...sharedProps}
        {...restProps}
        {...baseButtonProps}
        // Applies last to override passed in onClick
        onClick={this.internalOnClick}
        onFocus={forkFocus({ ...restProps, ...baseButtonProps }, this.handleFocus)}
        onBlur={forkBlur({ ...restProps, ...baseButtonProps }, this.handleBlur)}
      >
        {isLoading ? (
          <React.Fragment>
            {/* This is not meant to be overridable by users */}
            <ButtonInternals {...this.props} />

            <LoadingSpinnerContainer {...sharedProps} {...loadingSpinnerContainerProps}>
              <LoadingSpinner {...sharedProps} {...loadingSpinnerProps} />
            </LoadingSpinnerContainer>
          </React.Fragment>
        ) : (
          <ButtonInternals {...this.props} />
        )}
      </BaseButton>
    );
  }