render()

in src/data-list/item.tsx [116:211]
90 lines of code
11 McCabe index (conditional complexity)

  render() {
    const {
      title,
      items,
      showMoreLessButton,
      level,
      parentShift,
      showFocus,
      selectable,
      selected,
      partialSelected,
      collapsible,
      collapsed,
      onCollapse,
      onExpand,
    } = this.props;

    let moreLessButton;
    if (showMoreLessButton === moreLessButtonStates.MORE || showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
      moreLessButton = (
        <Text info size={Text.Size.S}>
          <Link inherit pseudo onClick={this.onShowMore}>
            {'Show more'}
          </Link>
          {showMoreLessButton === moreLessButtonStates.MORE_LOADING && (
            <LoaderInline className={styles.showMoreLoader} />
          )}
        </Text>
      );
    } else if (showMoreLessButton === moreLessButtonStates.LESS) {
      moreLessButton = (
        <Text info size={Text.Size.S}>
          <Link inherit pseudo onClick={this.onShowLess}>
            {'Show less'}
          </Link>
        </Text>
      );
    }

    let collapserExpander = null;
    if (collapsible) {
      if (collapsed) {
        collapserExpander = (
          <Button
            title='Expand'
            onClick={onExpand}
            icon={chevronRightIcon}
            className={styles.collapseButton}
            iconClassName={styles.collapseIcon}
            data-test='ring-data-list-expand'
          />
        );
      } else {
        collapserExpander = (
          <Button
            title='Collapse'
            onClick={onCollapse}
            icon={chevronDownIcon}
            className={styles.collapseButton}
            iconClassName={styles.collapseIcon}
            data-test='ring-data-list-collapse'
          />
        );
      }
    }

    const itemIsEmpty = !items?.length || (collapsible && collapsed);
    const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;

    return (
      <li>
        <Title
          title={title}
          focused={showFocus}
          showFocus={showFocus}
          selectable={selectable}
          selected={selected}
          partialSelected={partialSelected}
          collapserExpander={collapserExpander}
          onFocus={this.onFocus}
          onSelect={this.onSelect}
          offset={offset}
        />

        {!itemIsEmpty ? (
          <ul className={styles.itemContent}>
            {items.map(model => this.renderItem(model, parentShift))}

            {showMoreLessButton !== moreLessButtonStates.UNUSED ? (
              <li className={styles.showMore}>{moreLessButton}</li>
            ) : null}
          </ul>
        ) : null}
      </li>
    );
  }