render()

in src/draft-components/tab-actions/tab-actions.tsx [70:123]

• 53 lines of code
• 6 McCabe index (conditional complexity)

  render() {
    const { tabs, currentIndex, focusIndex, htmlId, closeButton } = this;

    return (
      <div class="tab-container">
        <div class="tabs" role="tablist">
          {tabs.map((tab, i) => {
            return(
              <div class="tab-wrapper" role="presentation">
                <div
                  aria-selected={`${currentIndex === i}`}
                  aria-controls={htmlId}
                  aria-label={tab}
                  class={{"tab-button": true, 'closeable': !!closeButton }}
                  ref={(el) => {if (focusIndex === i) this.focusRef = el; }}
                  role="tab"
                  tabindex={focusIndex === i ? 0 : -1}
                  onClick={() => this.onTabClick(i)}
                  onKeyDown={this.onTabKeyDown.bind(this)}
                >
                  {tab}
                  {closeButton === 'inside' ? 
                  <button
                    class="close-tab"
                    aria-label={`close ${tab}`}
                    tabIndex={focusIndex === i ? 0 : -1}
                    onClick={(event) => this.onCloseClick(event, i)}
                  >x</button>
                  : null}
                </div>
                {closeButton === 'outside' ? 
                <button
                  class="close-tab"
                  aria-label={`close ${tab}`}
                  tabIndex={focusIndex === i ? 0 : -1}
                  onClick={(event) => this.onCloseClick(event, i)}
                  onKeyDown={this.onButtonKeyDown.bind(this)}
                >x</button>
                : null}
              </div>
            );
          })}
        </div>
        <div
          aria-label={tabs[currentIndex]}
          class="tab-content"
          role="tabpanel"
          id={htmlId}
        >
          <slot />
        </div>
      </div>
    );
  }