Method renderField

src/View/Field/Number.js:81–124

* Renders field. * @protected * @return {?HTMLElement}

()

   * @return {?HTMLElement}
   */
  renderField () {
    this._$input = View.createElement('input', {
      className: 'field-number__input',
      id: this.getId(),
      type: 'number',
      onInput: this.inputValueDidChange.bind(this),
      onFocus: evt => this.focus(),
      onBlur: evt => this.blur()
    })

    this._$displayValue = View.createElement('span', {
      className: 'field-number__display-value'
    })

    this._$displayDescription = View.createElement('span', {
      className: 'field-number__display-description'
    })

    this._$display = View.createElement('div', {
      className: 'field-number__display'
    }, [this._$displayValue, this._$displayDescription])

    const $stepDown = View.createElement('button', {
      className: 'field-number__btn-step-down',
      onClick: this.stepDownButtonDidClick.bind(this)
    }, 'Step Down')

    const $value = View.createElement('div', {
      className: 'field-number__value'
    }, [this._$input, this._$display])

    const $stepUp = View.createElement('button', {
      className: 'field-number__btn-step-up',
      onClick: this.stepUpButtonDidClick.bind(this)
    }, 'Step Up')

    const $field = super.renderField()
    $field.classList.remove('field__field')
    $field.classList.add('field-number__field')
    $field.appendChild($stepDown)
    $field.appendChild($value)
    $field.appendChild($stepUp)
    return $field
  }

  /**
   * Triggered when input value has been changed.