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

Lonely Planet's Components

"use strict";

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

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

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

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

var _createUnitLabel2 = _interopRequireDefault(_createUnitLabel);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var styles = {
  container: {
    base: {
      height: "40px"
    }
  }
};

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

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

  ".rc-slider-track": {
    backgroundColor: _colors2.default.linkPrimary,
    height: "3px"
  },

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

  ".rc-slider-mark-text": {
    color: _colors2.default.textPrimary,
    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) {
  (0, _inherits3.default)(Range, _React$Component);
  (0, _createClass3.default)(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) {
    (0, _classCallCheck3.default)(this, Range);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Range.__proto__ || (0, _getPrototypeOf2.default)(Range)).call(this, props));

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

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

  (0, _createClass3.default)(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,
          onAfterChange = _props.onAfterChange,
          defaultValue = _props.defaultValue,
          min = _props.min,
          max = _props.max,
          label = _props.label,
          price = _props.price,
          time = _props.time,
          style = _props.style;


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

      var marks = void 0;

      if (price) {
        var _marks;

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

      if (time) {
        var _marks2;

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

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

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

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

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

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

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

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

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

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

  /**
   * Is this a time slider? Format the marks with hours/days
   */
  time: _propTypes2.default.bool,

  /**
   * Additional layout styles
   */
  style: _propTypes4.default.style
};

Range.defaultProps = {
  onAfterChange: null,
  defaultValue: [],
  min: 0,
  max: 100,
  label: "",
  price: false,
  time: false,
  style: null
};

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