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

A fully featured slider component made in React

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _constants = require('./constants');

var _constants2 = _interopRequireDefault(_constants);

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

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; }

/**
 * Tells whether a particular step comes in between two controls or not
 * @param stepValue value of the position where this step is located
 * @param value Array of control values
 * @param isRangeType
 * @returns {boolean}
 */
function isInActiveRange(stepValue, value, isRangeType) {
  if (isRangeType) {
    return stepValue > value[0] && stepValue < value[1];
  } else {
    return stepValue < value;
  }
}

/**
 * Returns the step position in percentage
 * @param stepValue value of the position where this step is located
 * @param min minimum value of slider
 * @param max maximum value of slider
 * @returns {number}
 */
function getPositionInPercentage(stepValue, min, max) {
  return stepValue / (max - min) * 100;
}

/**
 * Array of step elements placed side by side
 * @param props
 * @returns {Array}
 */
function getSteps(props) {
  var step = props.step,
      min = props.min,
      max = props.max,
      value = props.value,
      isRangeType = props.isRangeType,
      orientation = props.orientation;


  var steps = [];
  var totalSteps = (max - min) / step + 1;

  for (var i = 0; i < totalSteps; i++) {
    var position = getPositionInPercentage(i * step, min, max);
    if ((0, _utils.isVertical)(orientation)) position = 100 - position;

    var style = _defineProperty({}, _constants2.default[orientation].direction, position + '%');

    var className = (0, _classnames2.default)('slider-step', {
      'slider-step-active': isInActiveRange(i * step, value, isRangeType)
    });
    steps.push(_react2.default.createElement('span', { className: className, key: i, style: style }));
  }
  return steps;
}

function Steps(props) {
  return _react2.default.createElement(
    'div',
    { className: 'slider-steps-wrapper', onClick: props.onClick },
    getSteps(props)
  );
}

Steps.propTypes = {
  isRangeType: _react.PropTypes.bool.isRequired,
  max: _react.PropTypes.number.isRequired,
  min: _react.PropTypes.number.isRequired,
  onClick: _react.PropTypes.func.isRequired,
  orientation: _react.PropTypes.string.isRequired,
  step: _react.PropTypes.number.isRequired
};