appirio-tech-react-components-test10/components/Formsy/SliderRadioGroup.jsx

Topcoder UI Kit library of components for our React apps.

'use strict'

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Slider from 'rc-slider'
import 'rc-slider/assets/index.css'
import cn from 'classnames'
import _ from 'lodash'
import { HOC as hoc } from 'formsy-react'

class SliderRadioGroup extends Component {
  constructor(props) {
    super(props)
    this.onChange = this.onChange.bind(this)
  }

  onChange(value) {
    const {name, options} = this.props
    const newValue = options[value].value
    this.props.setValue(newValue)
    this.props.onChange(name, newValue)
  }

  noOp() {}

  getIndexFromValue(val) {
    return _.findIndex(this.props.options, (t) => t.value === val)
  }

  render() {
    const { options, min, max, step} = this.props
    const value = this.props.getValue()
    const valueIdx = this.getIndexFromValue(value)
    const marks = {}
    for(let i=0; i < options.length; i++) {
      marks[i] = options[i].title
    }
    return (
      <div>
        <Slider
          className={ cn('SliderRadioGroup', { 'null-value' : valueIdx  < 0}) }
          min={min}
          max={max}
          step={step}
          value={ valueIdx }
          defaultValue={0}
          marks={marks}
          onChange={ this.onChange }
          // handles onAfterChange to fix issue when user clicks on first value/step of untouched slider
          onAfterChange={ this.onChange }
          included={false}
        />
      </div>
    )
  }
}

SliderRadioGroup.propTypes = {
  options: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
  min: PropTypes.number.isRequired,
  max: PropTypes.number.isRequired,
  step: PropTypes.number.isRequired
}
SliderRadioGroup.defaultProps = {
  onChange: () => {}
}
export default hoc(SliderRadioGroup)