render()

in src/tags-input/tags-input.tsx [329:410]
77 lines of code
5 McCabe index (conditional complexity)

  render() {
    const {focused, tags, activeIndex} = this.state;

    const {
      disabled,
      canNotBeEmpty,
      allowAddNewTags,
      filter,
      size,
      labelType,
      height = typeof this.context === 'function' ? this.context() : this.context,
      label,
    } = this.props;

    const classes = classNames(
      styles.tagsInput,
      [inputStyles[`size${size}`]],
      [inputStyles[`height${height}`]],
      {
        [styles.tagsInputDisabled]: disabled,
        [styles.tagsInputFocused]: focused,
      },
      this.props.className,
    );

    return (
      <div
        // it transfers focus to input
        role='presentation'
        className={classes}
        onKeyDown={this.handleKeyDown}
        onClick={this.clickHandler}
        ref={this.nodeRef}
      >
        {label && (
          <ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>
            {label}
          </ControlLabel>
        )}

        <TagsList
          tags={tags}
          activeIndex={activeIndex}
          disabled={disabled}
          canNotBeEmpty={canNotBeEmpty}
          handleRemove={this.handleRemove}
          className={styles.tagsList}
          tagClassName={styles.tag}
          handleClick={this.handleClick}
          customTagComponent={this.props.customTagComponent}
        >
          <Select
            id={this.id}
            ref={this.selectRef}
            size={Select.Size.AUTO}
            type={Select.Type.INPUT_WITHOUT_CONTROLS}
            inputPlaceholder={this.props.placeholder}
            data={this.state.suggestions}
            className={classNames(styles.tagsSelect)}
            onSelect={this.addTag}
            onFocus={this._focusHandler}
            onBlur={this._blurHandler}
            renderOptimization={this.props.renderOptimization}
            add={allowAddNewTags ? {prefix: 'Add new tag'} : undefined}
            onAdd={allowAddNewTags ? this.handleTagCreation : undefined}
            filter={filter}
            maxHeight={this.props.maxPopupHeight}
            minWidth={this.props.minPopupWidth}
            top={POPUP_VERTICAL_SHIFT}
            loading={this.state.loading}
            onFilter={this.loadSuggestions}
            onBeforeOpen={this.loadSuggestions}
            onKeyDown={this.handleKeyDown}
            disabled={this.props.disabled}
            loadingMessage={this.props.loadingMessage}
            notFoundMessage={this.props.notFoundMessage}
            hint={this.props.hint}
          />
        </TagsList>
      </div>
    );
  }