gsy-component-library/build/components/Slider/SliderComp.js

reusable components from grid singularity

'use strict';

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

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

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Slider = require('rc-slider/lib/Slider');

var _Slider2 = _interopRequireDefault(_Slider);

var _createSliderWithTooltip = require('rc-slider/lib/createSliderWithTooltip');

var _createSliderWithTooltip2 = _interopRequireDefault(_createSliderWithTooltip);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

require('./Slider.' + (process.env.NODE_ENV === 'storybook' ? 'scss' : 'css'));

var setMarks = function setMarks(props) {
  var _marks;

  var max = props.max,
      min = props.min,
      markerDistance = props.markerDistance,
      unit = props.unit;


  var markLabel = _react2.default.createElement('i', { className: 'marker' });

  var marks = (_marks = {}, _defineProperty(_marks, min, { label: _react2.default.createElement(
      'i',
      { className: 'marker marker--min' },
      min,
      unit
    ) }), _defineProperty(_marks, max, { label: _react2.default.createElement(
      'i',
      { className: 'marker marker--max' },
      max,
      unit
    ) }), _marks);

  if (markerDistance > 0) {
    for (var i = min + markerDistance; i < max; i += markerDistance) {
      marks[i] = { label: markLabel };
    }
  }
  return marks;
};

var SliderComp = function SliderComp(props) {
  var SliderTooltip = (0, _createSliderWithTooltip2.default)(_Slider2.default);

  var unit = props.unit,
      other = _objectWithoutProperties(props, ['unit']);

  var marks = setMarks(props);

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(SliderTooltip, _extends({
      marks: marks,
      tipFormatter: function tipFormatter(value) {
        return '' + value + unit;
      }
    }, other))
  );
};

SliderComp.propTypes = {
  min: _propTypes2.default.number,
  max: _propTypes2.default.number,
  /** Will be used to calculate the amount of markers to be set. */
  markerDistance: _propTypes2.default.number,
  /** Unit of the sliders value e.g. percentage kWh etc. */
  unit: _propTypes2.default.string,
  /** onChange will be triggered while the value of Slider changing. */
  onChange: _propTypes2.default.func,
  /** onAfterChange will be triggered when ontouchend or onmouseup is triggered. */
  onAfterChange: _propTypes2.default.func,
  /** onBeforeChange will be triggered when ontouchstart or onmousedown is triggered. */
  onBeforeChange: _propTypes2.default.func
};

SliderComp.defaultProps = {
  min: 0,
  max: 100,
  markerDistance: 0,
  unit: '',
  onChange: function onChange() {},
  onAfterChange: function onAfterChange() {},
  onBeforeChange: function onBeforeChange() {}
};

exports.default = SliderComp;