Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
Size: Mime:
import React from 'react'
import { RangeState } from './RangeState'
import { isFunction } from 'exotic'
import {
  StyledThumb,
  StyledOutput,
  StyledRange,
  StyledWrap,
} from './_themed'

// #index
class RangeInput extends React.Component {
  static defaultProps = {
    isReverse: false,
    isDualSlider: false,
  }
  // if this state was through context or we call an external action
  // then we can use the same label for both inputs, and voila, multi
  constructor(props) {
    super()
    this.setDefaultValue(props)
  }
  state = new RangeState()
  setDefaultValue = (props) => {
    const { min, max, step } = props
    if (min) {
      this.state.setProps('min', props.min)
    }
    if (max) {
      this.state.setProps('max', props.max)
    }
    if (step) {
      this.state.setProps('step', props.step)
    }
  }
  identifier = 'range-input-price-slider'
  setSliderInputValue = value => {
    let labelVal = value
    if (this.props.isDualSlider) {
      if (this.props.isReverse) {
        labelVal = this.state.max - Number(value)
      } else {
        labelVal = this.state.max + Number(value)
      }
    }
    this.state.setValue(value)
    this.state.setLabel(labelVal)
    console.event('[i] changed Value', value, '[ii] label Value', labelVal)
  }
  handleChange = event => {
    const value = event.target.value
    this.setSliderInputValue(value)
    if (isFunction(this.props.onChange)) {
      this.props.onChange(value)
    }
  }
  render() {
    const { isReverse, width } = this.props

    return (
      <StyledWrap className="Styled-Wrapper">
        <StyledThumb className="Styled-Thumb"
          value={this.state.percent}
          reverse={isReverse}
        />
        <StyledRange
          min={this.state.min}
          step={this.state.step}
          max={this.state.max}
          // now the state is the controller
          value={this.state.value}
          // html5 itself gives all events
          onChange={this.handleChange}
          id={this.identifier}
          reverse={isReverse}
          className="Styled-Range-Slider"
          width={width ? width : ''}

        />
        <StyledOutput className="Styled-output" htmlFor={this.identifier} >
          {this.state.getlabel}
        </StyledOutput>
      </StyledWrap>
    )
  }
}

export { RangeInput }
export default RangeInput