render()

in src/draft-components/combo-noinput/combo-noinput.tsx [54:105]

• 50 lines of code
• 3 McCabe index (conditional complexity)

  render() {
    const {
      activeIndex,
      htmlId,
      label = '',
      open = false,
      options = [],
      value
    } = this;

    const activeId = open ? `${htmlId}-${activeIndex}` : '';

    return ([
      <label id={htmlId} class="combo-label">{label}</label>,
      <div class={{ combo: true, open }}>
        <div
          role="combobox"
          aria-activedescendant={activeId}
          aria-autocomplete="none"
          aria-haspopup="listbox"
          aria-expanded={`${open}`}
          aria-labelledby={`${htmlId} ${htmlId}-value`}
          aria-owns={`${htmlId}-listbox`}
          class="input-wrapper"
          ref={(el) => this.inputRef = el}
          tabindex="0"
          onBlur={this.onComboBlur.bind(this)}
          onClick={() => this.updateMenuState(true)}
          onKeyDown={this.onInputKeyDown.bind(this)}
        >
          <div id={`${htmlId}-value`} class="combo-input">{value}</div>
        </div>
        <div class="combo-menu" role="listbox" id={`${htmlId}-listbox`}>
          {options.map((option, i) => {
            return (
              <div
                class={{ 'option-current': this.activeIndex === i, 'combo-option': true }}
                id={`${this.htmlId}-${i}`}
                aria-selected={this.selectedIndex === i ? 'true' : false}
                role="option"
                onClick={(event) => {
                  event.stopPropagation();
                  this.onOptionClick(i);
                }}
                onMouseDown={this.onOptionMouseDown.bind(this)}
              >{option.name}</div>
            );
          })}
        </div>
      </div>
    ]);
  }