render()

in modules/monochrome/src/shared/dropdown/index.js [123:164]

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

  render() {
    const {theme, style, className, data, value, isEnabled} = this.props;
    const {height = theme.controlSize + theme.spacingTiny * 2} = style;

    const styleProps = {
      theme,
      height,
      hasFocus: this.state.hasFocus,
      isHovered: this.state.isHovered,
      isEnabled
    };

    return (
      <WrapperComponent className={className} userStyle={style.wrapper} {...styleProps}>
        <DropdownBorder
          userStyle={style.border}
          {...styleProps}
          onMouseEnter={this._onMouseEnter}
          onMouseLeave={this._onMouseLeave}
        >
          <DropdownInput
            userStyle={style.select}
            {...styleProps}
            tabIndex={isEnabled ? 0 : -1}
            onFocus={this._onFocus}
            onBlur={this._onBlur}
            onChange={this._onChange}
            value={value}
          >
            {Object.keys(data).map(key => (
              <option key={key} value={key}>
                {data[key]}
              </option>
            ))}
          </DropdownInput>
          <DropdownIcon userStyle={style.icon} {...styleProps}>
            {style.iconArrow || <DefaultDropdownIcon />}
          </DropdownIcon>
        </DropdownBorder>
      </WrapperComponent>
    );
  }