apeman-react-range/shim/node/ap_range.js

apeman react package for range input component.

/**
 * Range input component.
 * @class ApRange
 */

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _chopcal = require('chopcal');

var _chopcal2 = _interopRequireDefault(_chopcal);

var _rangecal = require('rangecal');

var _rangecal2 = _interopRequireDefault(_rangecal);

var _ap_range_handle = require('./ap_range_handle');

var _ap_range_handle2 = _interopRequireDefault(_ap_range_handle);

var _ap_range_label = require('./ap_range_label');

var _ap_range_label2 = _interopRequireDefault(_ap_range_label);

var _apemanReactTouchable = require('apeman-react-touchable');

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

/** @lends ApRange */
var ApRange = _react2.default.createClass({
  displayName: 'ApRange',


  // --------------------
  // Specs
  // --------------------

  propTypes: {
    /** Range from value */
    from: _react.PropTypes.number,
    /** Range to value */
    to: _react.PropTypes.number,
    /** Min value for range from  */
    min: _react.PropTypes.number,
    /** Max value for range to */
    max: _react.PropTypes.number,
    /** Step for value */
    step: _react.PropTypes.number,
    /** Handler for change */
    onChange: _react.PropTypes.func,
    barOnly: _react.PropTypes.bool
  },

  statics: {},

  getInitialState: function getInitialState() {
    var s = this;
    var props = s.props;

    return {
      minX: 0,
      maxX: 1200,
      fromX: 0,
      toX: 1200,
      fromValue: props.from,
      toValue: props.to
    };
  },
  getDefaultProps: function getDefaultProps() {
    return {
      from: 25,
      to: 75,
      min: 0,
      max: 100,
      step: 0.01,
      barOnly: false
    };
  },
  render: function render() {
    var s = this;
    var state = s.state;
    var props = s.props;

    return _react2.default.createElement(
      'div',
      { className: (0, _classnames2.default)('ap-range', props.className) },
      _react2.default.createElement(
        'div',
        { className: 'ap-range-inner' },
        s._renderLabel(props.min),
        _react2.default.createElement(
          'div',
          { className: 'ap-range-bar-wrap' },
          _react2.default.createElement(
            _apemanReactTouchable.ApTouchable,
            { onTap: s.rangeBarDidTap },
            _react2.default.createElement(
              'div',
              { className: 'ap-range-bar' },
              _react2.default.createElement('div', { className: 'ap-range-bar-bg' }),
              _react2.default.createElement('div', { className: 'ap-range-bar-highlight',
                style: { left: state.fromX, width: state.toX - state.fromX } })
            )
          ),
          _react2.default.createElement(_ap_range_handle2.default, { onMove: s.rangeFromHandleDidMove,
            shouldMove: s.shouldRangeFromHandleMove,
            x: state.fromX,
            minX: state.minX,
            maxX: state.maxX,
            className: 'ap-range-handle-from' }),
          _react2.default.createElement(_ap_range_handle2.default, { onMove: s.rangeToHandleDidMove,
            shouldMove: s.shouldRangeToHandleMove,
            x: state.toX,
            minX: state.minX,
            maxX: state.maxX,
            className: 'ap-range-handle-to' })
        ),
        s._renderLabel(props.max)
      )
    );
  },


  // --------------------
  // Lifecycle
  // --------------------

  componentDidMount: function componentDidMount() {
    var s = this;

    window.addEventListener('resize', s.resizeRange);
    s.resizeRange();
    s.resetRangeValues();
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    var s = this;
    s.resetRangeValues();
  },
  componentWillUnmount: function componentWillUnmount() {
    var s = this;
    window.removeEventListener('resize', s.resizeRange);
  },


  // ------------------
  // Helper
  // ------------------

  resizeRange: function resizeRange(e) {
    var s = this;
    var state = s.state;
    var w = _reactDom2.default.findDOMNode(s).offsetWidth;
    var minX = 0;
    var maxX = w;
    var fromRate = s._rateWithValue(state.fromValue);
    var toRate = s._rateWithValue(state.toValue);
    s.setState({
      minX: minX,
      maxX: maxX,
      fromX: _rangecal2.default.value(minX, maxX, fromRate),
      toX: _rangecal2.default.value(minX, maxX, toRate)
    });
  },
  rangeBarDidTap: function rangeBarDidTap() {},
  rangeFromHandleDidMove: function rangeFromHandleDidMove(e) {
    var s = this;
    var fromValue = s._valueWithX(e.detail.x);
    s.setRangeValues(fromValue, s.state.toValue, true);
  },
  rangeToHandleDidMove: function rangeToHandleDidMove(e) {
    var s = this;
    var toValue = s._valueWithX(e.detail.x);
    s.setRangeValues(s.state.fromValue, toValue, false);
  },
  shouldRangeFromHandleMove: function shouldRangeFromHandleMove() {
    var s = this;
    return true;
  },
  shouldRangeToHandleMove: function shouldRangeToHandleMove() {
    var s = this;
    return true;
  },
  resetRangeValues: function resetRangeValues() {
    var s = this;
    setTimeout(function () {
      var state = s.state;
      s.setRangeValues(state.fromValue, state.toValue, true);
    }, 0);
  },
  setRangeValues: function setRangeValues(fromValue, toValue, forwarding) {
    var s = this;
    var state = s.state;
    var props = s.props;
    var minX = state.minX;
    var maxX = state.maxX;

    var step = props.step;
    if (toValue < fromValue) {
      if (forwarding) {
        toValue = fromValue;
      } else {
        fromValue = toValue;
      }
    }

    var fromRate = s._rateWithValue(fromValue);
    var toRate = s._rateWithValue(toValue);

    s.setState({
      fromValue: fromValue,
      toValue: toValue,
      fromX: _rangecal2.default.value(minX, maxX, fromRate),
      toX: _rangecal2.default.value(minX, maxX, toRate)
    });

    fromValue = _chopcal2.default.round(fromValue, step);
    toValue = _chopcal2.default.round(toValue, step);

    var duplicate = s._fromValue === fromValue && s._toValue === toValue;
    if (duplicate) {
      return;
    }

    s._fromValue = fromValue;
    s._toValue = toValue;

    if (props.onChange) {
      props.onChange(fromValue, toValue, {
        element: s
      });
    }
  },


  // ------------------
  // Private
  // ------------------

  _rateWithValue: function _rateWithValue(value) {
    var s = this;
    var _s$props = s.props;
    var min = _s$props.min;
    var max = _s$props.max;

    value = _rangecal2.default.round(min, max, value);
    return _chopcal2.default.round(_rangecal2.default.rate(min, max, value), 0.01);
  },
  _valueWithRate: function _valueWithRate(rate) {
    var s = this;
    var _s$props2 = s.props;
    var min = _s$props2.min;
    var max = _s$props2.max;

    var value = _chopcal2.default.round(_rangecal2.default.value(min, max, rate), 0.01);
    return _rangecal2.default.round(min, max, value);
  },
  _valueWithX: function _valueWithX(x) {
    var s = this;
    var _s$state = s.state;
    var minX = _s$state.minX;
    var maxX = _s$state.maxX;

    var rate = _rangecal2.default.rate(minX, maxX, x + 2);
    return s._valueWithRate(rate);
  },
  _renderLabel: function _renderLabel(value) {
    var s = this;
    var props = s.props;

    if (props.barOnly) {
      return null;
    }
    return _react2.default.createElement(_ap_range_label2.default, { value: value });
  }
});

exports.default = ApRange;
//# sourceMappingURL=data:application/json;base64,bnVsbA==