renderTreeItem()

in src/draft-components/tree-actions/tree-actions.tsx [146:192]

• 46 lines of code
• 9 McCabe index (conditional complexity)

  renderTreeItem(item: TreeItem, index: number, parentID: string) {
    const itemID = `${parentID}${index}`;
    const active = itemID === this.activeID;
    const expanded = this.expandedItems.get(item);
    const {name, children } = item;
    const isParentNode = !!(children && children.length);

    return (
      <div class="tree-item-wrapper" role="presentation">
        <div
          class={{
            'item-current': active,
            'tree-item': true,
            'tree-parent': isParentNode,
            'open': expanded
          }}
          id={`${this.htmlId}-${itemID}`}
          ref={(el) => {if (active) this.activeItemRef = el; }}
          role="treeitem"
          aria-expanded={isParentNode ? `${!!expanded}` : null}
          tabindex={active ? 0 : -1}
          onClick={(event) => {
            event.stopPropagation();
            this.onItemClick(item, itemID);
          }}
          onKeyDown={(event) => {
            this.onItemKeyDown(event, item, itemID);
          }}
        >
          <div class="tree-item-inner">
            <span class="tree-item-name">{name}</span>
            {!isParentNode && this.secondaryActions === 'inside'
              ? this.renderSecondaryActions(item, active)
              : null }
          </div>
          {isParentNode ?
            <div role="group" class={{ 'open': !!expanded, 'tree-group': true }}>
              {children.map((item, i) => this.renderTreeItem(item, i, itemID))}
            </div>
          : null}
        </div>
        {!isParentNode && this.secondaryActions === 'outside'
          ? this.renderSecondaryActions(item, active)
          : null }
      </div>
    )
  }