render()

in src/toast/toast.tsx [187:276]
79 lines of code
14 McCabe index (conditional complexity)

  render() {
    const { children, closeable, autoFocus } = this.props;
    const isAlertDialog = closeable && autoFocus;
    const { isRendered } = this.state;
    const {
      // @ts-ignore
      Body: BodyOverride,
      // @ts-ignore
      CloseIcon: CloseIconOverride,
      // @ts-ignore
      InnerContainer: InnerContainerOverride,
    } = this.props.overrides;

    const [Body, bodyProps] = getOverrides(BodyOverride, StyledBody);

    const [InnerContainer, innerContainerProps] = getOverrides(
      InnerContainerOverride,
      StyledInnerContainer
    );

    const [CloseIcon, closeIconProps] = getOverrides(CloseIconOverride, StyledCloseIcon);

    const closeIconOverrides: IconOverrides = mergeOverrides(
      { Svg: { component: CloseIcon } },
      { Svg: CloseIconOverride }
    );

    const sharedProps = this.getSharedProps();
    if (!isRendered) {
      return null;
    }
    // Default role is alert unless given a role in props or the toast has an autofocus close button
    const role = this.props.hasOwnProperty('role')
      ? this.props.role
      : isAlertDialog
      ? 'alertdialog'
      : 'alert';

    const ariaLive =
      (!this.props.hasOwnProperty('role') && isAlertDialog) || this.props.role == 'alertdialog'
        ? 'assertive'
        : this.props.role == 'alert' || !this.props.hasOwnProperty('role')
        ? undefined // adding both aria-live and role="alert" causes double speaking issues
        : 'polite';
    return (
      <LocaleContext.Consumer>
        {(locale) => (
          <Body
            role={role}
            data-baseweb={this.props['data-baseweb'] || 'toast'}
            {...sharedProps}
            {...bodyProps}
            aria-atomic={true}
            aria-live={ariaLive}
            // the properties below have to go after overrides
            onBlur={this.onBlur}
            onFocus={this.onFocus}
            onMouseEnter={this.onMouseEnter}
            onMouseLeave={this.onMouseLeave}
          >
            <InnerContainer {...sharedProps} {...innerContainerProps}>
              {typeof children === 'function' ? children({ dismiss: this.dismiss }) : children}
            </InnerContainer>
            {closeable ? (
              <DeleteIcon
                // @ts-ignore
                ref={this.closeRef}
                aria-hidden={true}
                role="button"
                tabIndex={-1}
                $isFocusVisible={this.state.isFocusVisible}
                onClick={this.dismiss}
                onKeyPress={(event) => {
                  if (event.key === 'Enter') {
                    this.dismiss();
                  }
                }}
                title={locale.toast.close}
                {...sharedProps}
                {...closeIconProps}
                onFocus={forkFocus(closeIconProps, this.handleFocus)}
                onBlur={forkBlur(closeIconProps, this.handleBlur)}
                overrides={closeIconOverrides}
              />
            ) : null}
          </Body>
        )}
      </LocaleContext.Consumer>
    );
  }