render()

in src/avatar/avatar.tsx [55:153]
93 lines of code
14 McCabe index (conditional complexity)

  render() {
    const {size, url, dpr, style, round, subavatar, subavatarSize, username, info, skipParams, ...restProps} =
      this.props;
    if ([Size.Size18, Size.Size48].includes(size)) {
      warnSize(size)();
    }
    const sizeString = `${size}px`;
    const subavatarSizeString = `${subavatarSize}px`;
    const styleObj = {
      height: sizeString,
      width: sizeString,
      ...style,
    };

    const styleObjGroup = {
      borderRadius: '2px',
      height: subavatarSizeString,
      width: subavatarSizeString,
      ...style,
    };

    const classes = classNames(styles.avatar, this.props.className, {
      [styles.round]: round,
    });

    if (!url || this.state.errorUrl === url) {
      return (
        <span
          {...restProps}
          data-test='avatar'
          className={classNames(classes, {
            [styles.empty]: (username === null || username === undefined) && (info === null || info === undefined),
          })}
          style={styleObj}
        >
          {username && <FallbackAvatar size={size} round={round} username={username} />}
          {info && <AvatarInfo size={size}>{info}</AvatarInfo>}
        </span>
      );
    }

    let src = url;
    if (!skipParams && !isDataURI(url)) {
      const [urlStart, query] = url.split('?');
      const queryParams = {
        ...parseQueryString(query),
        dpr,
        size,
      };

      src = encodeURL(urlStart, queryParams);
    }
    let subavatarSrc = null;
    if (subavatar && !isDataURI(subavatar)) {
      const [urlStart, query] = subavatar.split('?');
      const queryParams = {
        ...parseQueryString(query),
        dpr,
        subavatarSizeString,
      };

      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
      return (
        <div>
          <img
            {...restProps}
            onError={this.handleError}
            onLoad={this.handleSuccess}
            className={classNames(classes, styles.avatarShadow)}
            style={styleObj}
            src={src}
            alt='User avatar'
          />
          <img
            {...restProps}
            data-test='avatar'
            onError={this.handleError}
            onLoad={this.handleSuccess}
            className={classNames(styles.subavatar)}
            style={styleObjGroup}
            src={subavatarSrc}
            alt='Subavatar'
          />
        </div>
      );
    }
    return (
      <img
        {...restProps}
        data-test='avatar'
        onError={this.handleError}
        onLoad={this.handleSuccess}
        className={classNames(classes, styles.avatarShadow)}
        style={styleObj}
        src={src}
        alt='User avatar'
      />
    );
  }