backpack-ui/dist/components/form/range.js

Lonely Planet's Components

"use strict";

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

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 _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _rcSlider = require("rc-slider");

var _rcSlider2 = _interopRequireDefault(_rcSlider);

var _settings = require("../../../settings.json");

var _color = require("../../utils/color");

var _createUnitLabel = require("../../utils/createUnitLabel");

var _createUnitLabel2 = _interopRequireDefault(_createUnitLabel);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 styles = {
  container: {
    base: {
      height: "40px"
    }
  }
};

var scopedStyles = {
  ".rc-slider-handle": {
    border: 0,
    boxShadow: "0 1px 3px rgba(" + (0, _color.rgb)(_settings.color.black) + ", .36)",
    height: "22px",
    marginLeft: "-11px",
    marginTop: "-9px",
    width: "22px"
  },

  ".rc-slider-step": {
    height: "3px"
  },

  ".rc-slider-track": {
    backgroundColor: _settings.color.blue,
    height: "3px"
  },

  ".rc-slider-mark": {
    fontSize: "1.3rem",
    top: "2.4rem"
  },

  ".rc-slider-mark-text": {
    color: _settings.color.darkGray,
    lineHeight: 1,
    marginLeft: "0 !important",
    width: "50% !important"
  },

  ".rc-slider-mark-text:first-of-type": {
    left: "0 !important",
    textAlign: "left"
  },

  ".rc-slider-mark-text:last-of-type": {
    left: "auto !important",
    right: 0,
    textAlign: "right"
  },

  ".rc-slider-dot": {
    display: "none"
  }
};

var Range = function (_React$Component) {
  _inherits(Range, _React$Component);

  _createClass(Range, null, [{
    key: "convertHoursToDays",
    value: function convertHoursToDays(hours) {
      var days = Math.ceil(hours / 24);

      return days + " " + (0, _createUnitLabel2.default)(days, "day");
    }
  }, {
    key: "createTimeMarks",
    value: function createTimeMarks(value) {
      return value >= 24 ? Range.convertHoursToDays(value) : value + " " + (0, _createUnitLabel2.default)(value, "hour");
    }
  }]);

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

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

    _this.state = {
      values: [props.defaultValue[0], props.defaultValue[1]]
    };

    _this.onChange = _this.onChange.bind(_this);
    return _this;
  }

  _createClass(Range, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.defaultValue !== this.state.values) {
        this.setState({
          values: nextProps.defaultValue
        });
      }
    }
  }, {
    key: "onChange",
    value: function onChange(value) {
      this.setState({
        values: [value[0], value[1]]
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props;
      var onAfterChange = _props.onAfterChange;
      var defaultValue = _props.defaultValue;
      var min = _props.min;
      var max = _props.max;
      var label = _props.label;
      var price = _props.price;
      var time = _props.time;


      var value = defaultValue.length === 2 ? defaultValue : [min, max];

      var marks = void 0;

      if (price) {
        var _marks;

        marks = (_marks = {}, _defineProperty(_marks, min, "$" + this.state.values[0]), _defineProperty(_marks, max, "$" + this.state.values[1]), _marks);
      }

      if (time) {
        var _marks2;

        marks = (_marks2 = {}, _defineProperty(_marks2, min, Range.createTimeMarks(this.state.values[0])), _defineProperty(_marks2, max, Range.createTimeMarks(this.state.values[1])), _marks2);
      }

      if (!price && !time) {
        var _marks3;

        marks = (_marks3 = {}, _defineProperty(_marks3, min, this.state.values[0]), _defineProperty(_marks3, max, this.state.values[1]), _marks3);
      }

      return _react2.default.createElement(
        "div",
        {
          className: "Range",
          style: styles.container.base,
          "aria-label": label,
          title: label
        },
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".Range",
          rules: scopedStyles
        }),
        _react2.default.createElement(_rcSlider2.default, {
          className: "Range-slider",
          allowCross: false,
          defaultValue: value,
          value: this.state.values,
          onChange: this.onChange,
          onAfterChange: onAfterChange,
          min: min,
          max: max,
          marks: marks,
          tipFormatter: null,
          range: true
        })
      );
    }
  }]);

  return Range;
}(_react2.default.Component);

Range.propTypes = {
  /**
   * Method to run after slide values change, e.g., filter list
   */
  onAfterChange: _react2.default.PropTypes.func.isRequired,

  /**
   * Initial values for the slider
   */
  defaultValue: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number).isRequired,

  /**
   * Minimum value for slider
   */
  min: _react2.default.PropTypes.number.isRequired,

  /**
   * Maximum value for slider
   */
  max: _react2.default.PropTypes.number.isRequired,

  /**
   * Text to describe the input
   */
  label: _react2.default.PropTypes.string.isRequired,

  /**
   * Is this a price slider? Format the marks with $
   */
  price: _react2.default.PropTypes.bool,

  /**
   * Is this a time slider? Format the marks with hours/days
   */
  time: _react2.default.PropTypes.bool
};

Range.defaultProps = {
  onAfterChange: null,

  defaultValue: [],

  min: 0,

  max: 100,

  label: "",

  price: false,

  time: false
};

exports.default = (0, _radium2.default)(Range);