nw-react-slider--bki/src/slider.jsx

Slider Component

var React = require('react')
var Popover = require('./popover-follow')
var Slider = require('./slider-core')
var isFunction = require('lodash/isFunction')
var classnames = require('classnames')
var isUndefined = require('lodash/isUndefined')

var VALID_POSITIONS = ['top', 'bottom'];
var VALID_SHAPES = ['line', 'circle'];

module.exports = React.createClass({
  displayName: 'nw-slider',
  propTypes: {
    value: React.PropTypes.number,
    min: React.PropTypes.number,
    max: React.PropTypes.number,
    ticks: React.PropTypes.bool,
    tickShape: React.PropTypes.oneOf(VALID_SHAPES),
    onChange: React.PropTypes.func,
    onDragStart: React.PropTypes.func,
    onDragEnd: React.PropTypes.func,
    markerLabel: React.PropTypes.array,
    markerLabelPosition: React.PropTypes.oneOf(VALID_POSITIONS),
    displayFollowerPopover: React.PropTypes.bool,
    fill: React.PropTypes.bool,
  },

  getInitialState: function () {
    return {
      rtPosition: undefined,
      handleWidth: undefined
    }
  },

  componentDidUpdate: function () {
    if (isUndefined(this.state.handleWidth) && this.refs.slider.refs.handle) {
      this.setState({handleWidth: this.refs.slider.refs.handle.offsetWidth}) // eslint-disable-line
    }
  },

  handleSliderChange: function (value, rtPosition) {
    if (isFunction(this.props.onChange)) {
      // Send the value and position of the slider in case the container needs it.
      this.props.onChange(value, rtPosition)
    }
    this.setState({rtPosition})
  },

  render: function () {
    var markerLabelPosition = this.props.markerLabelPosition || VALID_POSITIONS[0];
    var popoverArrowPlacement = markerLabelPosition === 'top' ? 'bottom' : 'top';
    var trackWidth = this.refs.slider && this.refs.slider.state.trackWidth
    var handleWidth = this.state.handleWidth
    var dragging = this.refs.slider && this.refs.slider.state.dragging
    var follower = (this.props.displayFollowerPopover && !isUndefined(this.state.rtPosition))
      ? (<Popover trackWidth={trackWidth} handleWidth={handleWidth} value={this.props.value} position={this.state.rtPosition} arrowPlacement={popoverArrowPlacement} />)
      : (<span/>)
    var markerLabel = this.props.markerLabel || [];
    var ticks = this.props.ticks;
    return (
      <div className={classnames('slider-container-component', {dragging: dragging})} >
        <Slider
          ref='slider'
          min={this.props.min}
          max={this.props.max}
          value={this.props.value}
          onChange={this.handleSliderChange}
          onDragStart={this.props.onDragStart}
          onDragEnd={this.props.onDragEnd}
          ticks={ticks !== undefined ? ticks : markerLabel.length > 0}
          tickShape={this.props.tickShape || VALID_SHAPES[0]}
          markerLabel={markerLabel}
          markerLabelPosition={markerLabelPosition}
          fill={this.props.fill} />
        {follower}
      </div>
    )
  }
})