render()

in src/list/list-item.tsx [32:212]

• 165 lines of code
• 28 McCabe index (conditional complexity)

  render() {
    const {
      disabled,
      checkbox,
      avatar,
      subavatar,
      glyph,
      icon,
      rightGlyph,
      description,
      label,
      title,
      details,
      hover,
      level,
      tabIndex,
      onClick,
      onCheckboxChange,
      onMouseOver,
      onMouseDown,
      onMouseUp,
      rightNodes,
      leftNodes,
      showGeneratedAvatar,
      username,
      labelWrapper,
      rgItemType,
      scrolling,
      'data-test': dataTest,
      className,
      url,
      LinkComponent,
      compact,
      hoverClassName,
      children,
      itemClassName,
      labelClassName,
      descriptionClassName,
      detailsClassName,
      ...restLinkProps // TODO use an allow list in 8.0
    } = this.props;

    const checkable = checkbox !== undefined;
    const shouldShowGeneratedAvatar = showGeneratedAvatar && !!username;
    const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
    const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));

    const classes = getListClasses(this.props);

    const detailsClasses = classNames(
      {
        [styles.details]: details,
        [styles.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined,
      },
      detailsClassName,
    );

    const style = {
      paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`,
    };

    let computedTitle = null;
    if (this._isString(title)) {
      // if title is specified and is a string then use it
      computedTitle = title;
    } else {
      // otherwise use label if it is a string;
      // label can also be an element, use empty string in this case
      computedTitle = this._isString(label) ? label : '';
    }

    const isLink = rgItemType === Type.LINK;
    const combinedDataTest = dataTests(
      {
        'ring-list-item': ((dataTest || '') as string).indexOf('ring-list-item') === -1,
        'ring-list-item-action': !disabled,
        'ring-list-item-selected': checkbox,
        'ring-list-link': isLink,
      },
      dataTest,
    );

    const labelElement = (
      <span
        className={classNames(styles.label, labelClassName)}
        title={computedTitle}
        data-test='ring-list-item-label'
      >
        {label ?? children}
      </span>
    );

    const commonProps = {
      id: this.id,
      tabIndex,
      onClick,
      onMouseOver,
      onMouseDown,
      onFocus: onMouseOver,
      onMouseUp,
      className: classes,
      style,
      disabled,
      children: (
        <>
          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
            {!showCheckbox && (
              <div className={styles.left}>
                {leftNodes}
                {glyph && (
                  <Icon
                    className={styles.glyph}
                    glyph={glyph}
                    size={this.props.iconSize}
                    suppressSizeWarning={this.props.suppressSizeWarning}
                  />
                )}
                {(avatar || shouldShowGeneratedAvatar) && (
                  <Avatar
                    className={styles.avatar}
                    url={avatar}
                    size={AvatarSize.Size20}
                    subavatar={subavatar}
                    username={username}
                  />
                )}
              </div>
            )}

            {labelWrapper ? labelWrapper(labelElement) : labelElement}

            {description && (
              <span
                className={classNames(styles.description, descriptionClassName)}
                data-test='ring-list-item-description'
              >
                {description}
              </span>
            )}

            <div className={styles.right}>
              {rightGlyph && (
                <Icon
                  className={styles.rightGlyph}
                  glyph={rightGlyph}
                  suppressSizeWarning={this.props.suppressSizeWarning}
                  size={this.props.iconSize}
                />
              )}
              {icon && <div className={styles.icon} style={{backgroundImage: `url("${icon}")`}} />}
              {rightNodes}
            </div>
          </div>

          {details && <div className={detailsClasses}>{details}</div>}
        </>
      ),
    };
    const LinkComponentToUse = LinkComponent ? linkHOC(LinkComponent) : Link;

    return (
      <div className={classNames(styles.itemContainer, itemClassName)} data-test={combinedDataTest}>
        {showCheckbox && (
          <div className={styles.checkboxContainer}>
            <Checkbox
              aria-labelledby={this.id}
              checked={checkbox}
              disabled={disabled}
              onChange={onCheckboxChange}
              onClick={this.stopBubbling}
            />
          </div>
        )}
        {isLink ? (
          <LinkComponentToUse pseudo={!restLinkProps.href} {...commonProps} {...restLinkProps} />
        ) : (
          <button type='button' {...commonProps} />
        )}
      </div>
    );
  }