nw-react-slider--bki/lib/slider.js

Slider Component

'use strict';

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 getInitialState() {
    return {
      rtPosition: undefined,
      handleWidth: undefined
    };
  },

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

  handleSliderChange: function handleSliderChange(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: rtPosition });
  },

  render: function render() {
    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) ? React.createElement(Popover, { trackWidth: trackWidth, handleWidth: handleWidth, value: this.props.value, position: this.state.rtPosition, arrowPlacement: popoverArrowPlacement }) : React.createElement('span', null);
    var markerLabel = this.props.markerLabel || [];
    var ticks = this.props.ticks;
    return React.createElement(
      'div',
      { className: classnames('slider-container-component', { dragging: dragging }) },
      React.createElement(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
    );
  }
});
//# sourceMappingURL=slider.js.map