render()

in src/js/components/SelectorPicker.react.js [117:164]

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

  render() {
    let warning = null;
    let count = this.props.editor.elementCounts.get(this.props.field.selector);

    if (count != null && count > 1) {
      warning = this.props.field.definition.unique ? (
        <div className="warning">
          Warning: the current selector matched {count} elements, but only the
          first one will be used.
        </div>
      ) : (
        <div className="notice">
          The current selector matched {count} elements.
        </div>
      );
    }

    const findLine = this.isFinding() ? (
      <svg className="line" style={this.state.findSvgStyle}>
        <line {...this.state.findLineLocationAttributes} />
      </svg>
    ) : null;

    return (
      <div className="field">
        <div className="selector-picker">
          <input
            type="text"
            name={this.props.field.definition.name}
            placeholder={this.props.field.definition.placeholder}
            value={this.props.field.selector}
            onChange={this.handleSelectorChanged}
            onFocus={this.handleFocus}
            ref="selectorInput"
          />
          <button
            ref="targetButton"
            className="find-button"
            onClick={this.handleFindButtonClick}
          >
            Find
          </button>
          {findLine}
        </div>
        {warning}
      </div>
    );
  }