fc-react-slider/dist/Slider/Slider.js

A fully featured slider component made in React

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _index = require('/Users/ritz078/projects/react-slider/node_modules/redbox-react/lib/index.js');

var _index2 = _interopRequireDefault(_index);

var _index3 = require('/Users/ritz078/projects/react-slider/node_modules/react-transform-catch-errors/lib/index.js');

var _index4 = _interopRequireDefault(_index3);

var _react2 = require('react');

var _react3 = _interopRequireDefault(_react2);

var _index5 = require('/Users/ritz078/projects/react-slider/node_modules/react-transform-hmr/lib/index.js');

var _index6 = _interopRequireDefault(_index5);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _utils = require('./utils');

var _helpers = require('./helpers');

var _Control = require('./Control');

var _Control2 = _interopRequireDefault(_Control);

var _Steps = require('./Steps');

var _Steps2 = _interopRequireDefault(_Steps);

var _Rail = require('./Rail');

var _Rail2 = _interopRequireDefault(_Rail);

var _autoBind = require('./utils/autoBind');

var _autoBind2 = _interopRequireDefault(_autoBind);

var _noop = require('./utils/noop');

var _noop2 = _interopRequireDefault(_noop);

var _reactAddonsShallowCompare = require('react-addons-shallow-compare');

var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _components = {
  Slider: {
    displayName: 'Slider'
  }
};

var _UsersRitz078ProjectsReactSliderNode_modulesReactTransformHmrLibIndexJs2 = (0, _index6.default)({
  filename: 'components/Slider/Slider.js',
  components: _components,
  locals: [module],
  imports: [_react3.default]
});

var _UsersRitz078ProjectsReactSliderNode_modulesReactTransformCatchErrorsLibIndexJs2 = (0, _index4.default)({
  filename: 'components/Slider/Slider.js',
  components: _components,
  locals: [],
  imports: [_react3.default, _index2.default]
});

function _wrapComponent(id) {
  return function (Component) {
    return _UsersRitz078ProjectsReactSliderNode_modulesReactTransformHmrLibIndexJs2(_UsersRitz078ProjectsReactSliderNode_modulesReactTransformCatchErrorsLibIndexJs2(Component, id), id);
  };
}

var Slider = _wrapComponent('Slider')(function (_Component) {
  _inherits(Slider, _Component);

  function Slider(props) {
    _classCallCheck(this, Slider);

    var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props));

    _this.state = {
      trackOffset: {}
    };

    (0, _autoBind2.default)(['onChange', 'onControlChange', 'handleClick', 'updatePosition', 'onDragExtreme'], _this);
    return _this;
  }

  _createClass(Slider, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.updatePosition();
      window.addEventListener('resize', this.updatePosition);
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(newProps, newState) {
      return (0, _utils.isWithinRange)(newProps, newProps.value) && (!!this.isRerenderRequired || this.state.trackOffset.width !== newState.trackOffset.width) || (0, _reactAddonsShallowCompare2.default)(this, newProps);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.isRerenderRequired = false;
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.updatePosition);
    }
  }, {
    key: 'onChange',
    value: function onChange(value, changed) {
      var args = {
        name: this.props.name,
        value: value
      };

      if (changed) args.changed = changed;
      this.props.onChange(args);
    }
  }, {
    key: 'onControlChange',
    value: function onControlChange(data, isRenderRequired) {
      var value = void 0;
      if (this.isRangeType()) {
        value = (0, _utils.formatValue)(this.props.value, data.value, data.name, this.props.type);
      } else {
        value = data.value;
      }

      // only trigger on first onChange trigger
      this.isRerenderRequired = isRenderRequired;

      if ((0, _utils.isWithinRange)(this.props, value) && !(0, _utils.isEqual)(this.props.value, value)) {
        this.onChange(value, data.name);
      }
    }
  }, {
    key: 'onDragExtreme',
    value: function onDragExtreme(name, value, action) {
      var newValue = (0, _utils.formatValue)(this.props.value, value, name, this.props.type);
      this.props['onDrag' + (0, _utils.capitalize)(action)]({
        changed: name,
        name: this.props.name,
        value: newValue
      });
    }
  }, {
    key: 'getControl',
    value: function getControl(value, name) {
      var _props = this.props,
          step = _props.step,
          orientation = _props.orientation,
          min = _props.min,
          max = _props.max,
          readOnly = _props.readOnly,
          disabled = _props.disabled,
          toolTipTemplate = _props.toolTipTemplate;


      return _react3.default.createElement(_Control2.default, {
        disabled: disabled,
        max: max,
        min: min,
        name: name,
        onChange: this.onControlChange,
        onDragExtreme: this.onDragExtreme,
        orientation: orientation,
        readOnly: readOnly,
        step: step,
        toolTipTemplate: toolTipTemplate,
        trackOffset: this.getTrackOffset(),
        value: value
      });
    }
  }, {
    key: 'getTrackOffset',
    value: function getTrackOffset() {
      return this.state.trackOffset;
    }
  }, {
    key: 'updatePosition',
    value: function updatePosition() {
      var _this2 = this;

      var track = this.refs.track;

      setTimeout(function () {
        window.requestAnimationFrame(function () {
          _this2.setState({
            trackOffset: track ? track.getBoundingClientRect() : {}
          });
        });
      }, 0);
    }
  }, {
    key: 'handleClick',
    value: function handleClick(e) {
      (0, _utils.suppress)(e);
      var newData = (0, _helpers.getNearestValue)(e, this.props, this.getTrackOffset());
      this.onChange(newData.value, newData.changed);
      this.onDragExtreme(newData.changed, newData.value, 'end');
    }
  }, {
    key: 'isRangeType',
    value: function isRangeType() {
      return this.props.type === 'range';
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          name = _props2.name,
          disabled = _props2.disabled,
          step = _props2.step,
          min = _props2.min,
          max = _props2.max,
          value = _props2.value,
          rangeTemplate = _props2.rangeTemplate,
          showSteps = _props2.showSteps,
          orientation = _props2.orientation,
          attributes = _props2.attributes;


      var mainClass = (0, _classnames2.default)('react-filters', 'rf-slider', name, {
        'slider-disabled': disabled,
        'slider-vertical': (0, _utils.isVertical)(orientation)
      });

      var lowerValue = this.isRangeType() ? value[0] : value;

      return _react3.default.createElement(
        'div',
        _extends({}, attributes, { className: mainClass }),
        _react3.default.createElement(
          'div',
          { className: 'slider-wrapper' },
          _react3.default.createElement(
            'div',
            {
              className: 'slider-track',
              onClick: !disabled && !showSteps && this.handleClick,
              ref: 'track'
            },
            _react3.default.createElement(_Rail2.default, {
              max: max,
              min: min,
              orientation: orientation,
              value: value,
              isRangeType: this.isRangeType()
            })
          ),
          showSteps && _react3.default.createElement(_Steps2.default, {
            isRangeType: this.isRangeType(),
            max: max,
            min: min,
            onClick: this.handleClick,
            orientation: orientation,
            step: step,
            value: value
          }),
          this.getControl(lowerValue, 'lower'),
          this.isRangeType() && this.getControl(value[1], 'upper')
        ),
        rangeTemplate(min, max)
      );
    }
  }]);

  return Slider;
}(_react2.Component));

exports.default = Slider;


Slider.propTypes = {
  attributes: _react2.PropTypes.object,
  disabled: _react2.PropTypes.bool,
  max: _react2.PropTypes.number,
  min: _react2.PropTypes.number,
  name: _react2.PropTypes.string.isRequired,
  onChange: _react2.PropTypes.func,
  onDragEnd: _react2.PropTypes.func,
  onDragStart: _react2.PropTypes.func,
  orientation: _react2.PropTypes.oneOf(['horizontal', 'vertical']),
  rangeTemplate: _react2.PropTypes.func,
  readOnly: _react2.PropTypes.bool,
  showSteps: _react2.PropTypes.bool,
  step: _react2.PropTypes.number,
  toolTipTemplate: _react2.PropTypes.func,
  type: _react2.PropTypes.oneOf(['value', 'range']),
  value: _react2.PropTypes.oneOfType([_react2.PropTypes.array, _react2.PropTypes.number])
};

Slider.defaultProps = {
  attributes: {},
  disabled: false,
  max: 20,
  min: 0,
  onDragEnd: _noop2.default,
  onDragStart: _noop2.default,
  orientation: 'horizontal',
  rangeTemplate: function rangeTemplate(min, max) {
    return _react3.default.createElement(
      'div',
      { className: 'slider-range' },
      _react3.default.createElement(
        'div',
        { className: 'slider-range-min' },
        min
      ),
      _react3.default.createElement(
        'div',
        { className: 'slider-range-max' },
        max
      )
    );
  },

  readOnly: false,
  showSteps: false,
  step: 1,
  toolTipTemplate: function toolTipTemplate(value) {
    return value;
  },

  type: 'value',
  value: [5, 10]
};