RequestQuoteForm.js

RequestQuoteForm.js

import React, { Component } from 'react'
import FormData from './RequestQuoteData'
import ButtonGroup from './groups/ButtonGroup'
import InputFormGroup from './groups/InputFormGroup'
import SelectFormGroup from './groups/SelectFormGroup'
import DatepickerFormGroup from './groups/DatepickerFormGroup'

class RequestQuoteForm extends Component {
  constructor(props) {
    super(props)

    this.state = {
      tripType: {
        disabled: false,
        name: 'tripType',
        label: 'Trip Types',
        options: FormData.tripTypes,
        value: FormData.tripTypes[0].value,
      }
    }

    this.onTripTypeChange = this.onTripTypeChange.bind(this)
  }

  onTripTypeChange(value) {
    switch (value.toLowerCase()) {
      case 'one-way':
      const stateCopy = Object.assign({}, this.state)
      stateCopy.tripType.disabled = true
      this.setState(stateCopy)
      break
    }
  }

  render() {
    return (
      <form id={RequestQuoteForm.getFormId} onSubmit={this.handleSubmit}>
        {/* Form Row 1 */}
        <div className="col-md-12 request-quote_form_row">
          <div className="row">
            <div className="col-md-6">
              <div className="row">
                <div className="col-md-6">
                  <SelectFormGroup
                    disabled={this.state.tripType.disabled}
                    label={this.state.tripType.label}
                    name={this.state.tripType.name}
                    value={this.state.tripType.value}
                    options={this.state.tripType.options}
                    onChangeCallback={this.onTripTypeChange}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    )
  }
}

export default RequestQuoteForm