zent/lib/slider/slider.js

一套前端设计语言和基于React的实现

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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

var _createClass3 = _interopRequireDefault(_createClass2);

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

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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 _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _isArray = require('lodash/isArray');

var _isArray2 = _interopRequireDefault(_isArray);

var _isNumber = require('lodash/isNumber');

var _isNumber2 = _interopRequireDefault(_isNumber);

var _getWidth = require('../utils/getWidth');

var _getWidth2 = _interopRequireDefault(_getWidth);

var _range = require('./range');

var _range2 = _interopRequireDefault(_range);

var _inputField = require('./inputField');

var _inputField2 = _interopRequireDefault(_inputField);

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

/* eslint no-throw-literal: 0 */
function checkProps(props) {
  var range = props.range,
      value = props.value,
      max = props.max,
      min = props.min,
      dots = props.dots,
      marks = props.marks;

  if (range) {
    if (!(0, _isArray2['default'])(value)) {
      throw 'has range props value must an array';
    }
    if (!(value.length === 2)) {
      throw "value' length must as 2";
    }
    if (!value.every(function (v) {
      return (0, _isNumber2['default'])(v) && v >= min && v <= max;
    })) {
      throw "value' each item must a number and between min to max";
    }
    if (!(value[0] <= value[1])) {
      throw 'value[0] must less than value[1]';
    }
  } else {
    if (!(0, _isNumber2['default'])(value)) {
      throw 'not has range props value must an number';
    }
    if (value < min || value > max) {
      throw 'value must between min to max';
    }
  }
  if (dots) {
    if (!marks) {
      throw 'has dots props must has marks two';
    }
  }
}

var Slider = function (_ref) {
  (0, _inherits3['default'])(Slider, _ref);

  function Slider(props) {
    (0, _classCallCheck3['default'])(this, Slider);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props));

    _this.componentWillReceiveProps = function (newProps) {
      checkProps(newProps);
    };

    _this.onChange = function (value) {
      var _this$props = _this.props,
          range = _this$props.range,
          onChange = _this$props.onChange;

      value = range ? value.map(function (v) {
        return Number(v);
      }).sort(function (a, b) {
        return a - b;
      }) : Number(value);
      onChange && onChange(value);
    };

    checkProps(props);
    return _this;
  }

  (0, _createClass3['default'])(Slider, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          withInput = _props.withInput,
          className = _props.className,
          width = _props.width,
          restProps = (0, _objectWithoutProperties3['default'])(_props, ['withInput', 'className', 'width']);

      var wrapClass = (0, _classnames2['default'])(restProps.prefix + '-slider', (0, _defineProperty3['default'])({}, restProps.prefix + '-slider-disabled', restProps.disabled), className);
      return _react2['default'].createElement(
        'div',
        { className: wrapClass, style: (0, _getWidth2['default'])(width) },
        _react2['default'].createElement(_range2['default'], (0, _extends3['default'])({}, restProps, { onChange: this.onChange })),
        withInput && !restProps.dots && _react2['default'].createElement(_inputField2['default'], (0, _extends3['default'])({ onChange: this.onChange }, restProps))
      );
    }
  }]);
  return Slider;
}(_react.PureComponent || _react.Component);

Slider.propTypes = {
  className: _propTypes2['default'].string,
  prefix: _propTypes2['default'].string,
  max: _propTypes2['default'].number,
  min: _propTypes2['default'].number,
  dots: _propTypes2['default'].bool,
  marks: _propTypes2['default'].object,
  value: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].arrayOf(_propTypes2['default'].number)]).isRequired,
  disabled: _propTypes2['default'].bool,
  range: _propTypes2['default'].bool,
  step: _propTypes2['default'].number,
  withInput: _propTypes2['default'].bool,
  onChange: _propTypes2['default'].func,
  width: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string])
};
Slider.defaultProps = {
  min: 0,
  max: 100,
  step: 1,
  prefix: 'zent',
  disabled: false,
  withInput: true,
  range: false,
  value: 0
};
exports['default'] = Slider;