render()

in src/draft-components/multiselect-listbox/multiselect-listbox.tsx [100:159]

• 57 lines of code
• 5 McCabe index (conditional complexity)

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

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

    return ([
      <label id={htmlId} class="combo-label">{label}</label>,
      <div
        class="selected-options"
        role="listbox"
        id={`${this.htmlId}-selected`}
        aria-label={`Modify selection for ${label}`}
        onKeyDown={this.onRemoveKeyDown.bind(this)}
      >
        <span id={`${htmlId}-remove`} style={{ display: 'none' }}>remove</span>
        {selectedOptions.map((option, i) => {
          return (
            <button
              class={{'remove-option': true, 'remove-current': this.activeRemoveIndex === i}}
              type="button"
              role="option"
              tabindex={activeRemoveIndex === i ? '0' : '-1'}
              ref={activeRemoveIndex === i ? (el) => this.removeFocusRef = el : null}
              id={`${htmlId}-remove-${i}`}
              aria-labelledby={`${htmlId}-remove ${htmlId}-remove-${i}`}
              onClick={() => { this.removeOption(i, true); }}>
              {option.name}
            </button>
          )
        })}
      </div>,
      <div class={{ combo: true, open }}>
        <input
          aria-activedescendant={activeId}
          aria-autocomplete="list"
          aria-controls={`${htmlId}-listbox`}
          aria-expanded={`${open}`}
          aria-haspopup="listbox"
          aria-labelledby={`${htmlId} ${this.htmlId}-selected`}
          class="combo-input"
          ref={(el) => this.inputRef = el}
          role="combobox"
          type="text"
          value={value}
          onBlur={this.onInputBlur.bind(this)}
          onClick={() => this.updateMenuState(true)}
          onInput={this.onInput.bind(this)}
          onKeyDown={this.onInputKeyDown.bind(this)}
        />

        <div class="combo-menu" role="listbox" ref={(el) => this.listboxRef = el} aria-multiselectable="true"  id={`${htmlId}-listbox`}>