zent/lib/slider/points.js

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

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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 _WindowEventHandler = require('../utils/component/WindowEventHandler');

var _WindowEventHandler2 = _interopRequireDefault(_WindowEventHandler);

var _keys = require('lodash/keys');

var _keys2 = _interopRequireDefault(_keys);

var _map = require('lodash/map');

var _map2 = _interopRequireDefault(_map);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _common = require('./common');

var _toolTips = require('./toolTips');

var _toolTips2 = _interopRequireDefault(_toolTips);

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

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

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

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

    _initialiseProps.call(_this);

    var range = props.range,
        value = props.value;

    _this.state = {
      visibility: false,
      conf: range ? { start: value[0], end: value[1] } : { simple: value }
    };
    return _this;
  }

  (0, _createClass3['default'])(Points, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(props) {
      var range = props.range,
          value = props.value;

      if (this.left === null) {
        this.setState({
          conf: range ? { start: value[0], end: value[1] } : { simple: value }
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _state = this.state,
          visibility = _state.visibility,
          type = _state.type,
          conf = _state.conf;
      var _props = this.props,
          disabled = _props.disabled,
          prefix = _props.prefix;

      return _react2['default'].createElement(
        'div',
        { className: prefix + '-slider-points' },
        (0, _map2['default'])(conf, function (value, index) {
          return _react2['default'].createElement(
            _toolTips2['default'],
            {
              prefix: prefix,
              key: index,
              content: value,
              visibility: index === type && visibility,
              left: _this2.getLeft(value)
            },
            _react2['default'].createElement('span', {
              onMouseDown: !disabled ? _this2.handleMouseDown.bind(_this2, index) : _noop2['default'],
              className: (0, _classnames2['default'])((0, _defineProperty3['default'])({}, prefix + '-slider-point-disabled', disabled), prefix + '-slider-point')
            })
          );
        }),
        !disabled && _react2['default'].createElement(_WindowEventHandler2['default'], {
          eventName: 'mousemove',
          callback: this.handleMouseMove
        }),
        !disabled && _react2['default'].createElement(_WindowEventHandler2['default'], {
          eventName: 'mouseup',
          callback: this.handleMouseUp
        })
      );
    }
  }]);
  return Points;
}(_react.PureComponent || _react.Component);

var _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.getLeft = function (point) {
    var _props2 = _this3.props,
        max = _props2.max,
        min = _props2.min;

    return (0, _common.getLeft)(point, max, min);
  };

  this.isLeftButton = function (e) {
    e = e || window.event;
    var btnCode = e.button;
    return btnCode === 0;
  };

  this.handleMouseDown = function (type, evt) {
    evt.preventDefault();
    if (_this3.isLeftButton(evt)) {
      _this3.left = evt.clientX;
      _this3.setState({ type: type, visibility: true });
      var value = _this3.props.value;


      if (type === 'start') {
        value = value[0];
      } else if (type === 'end') {
        value = value[1];
      }
      _this3.value = value;
      return false;
    }
  };

  this.getAbsMinInArray = function (array, point) {
    var abs = array.map(function (item) {
      return Math.abs(point - item);
    });
    var lowest = 0;
    for (var i = 1; i < abs.length; i++) {
      if (abs[i] < abs[lowest]) {
        lowest = i;
      }
    }
    return array[lowest];
  };

  this.left = null;

  this.handleMouseMove = function (evt) {
    var left = _this3.left;
    if (left !== null) {
      evt.preventDefault();
      var type = _this3.state.type;
      var _props3 = _this3.props,
          max = _props3.max,
          min = _props3.min,
          onChange = _props3.onChange,
          getClientWidth = _props3.getClientWidth,
          step = _props3.step,
          dots = _props3.dots,
          marks = _props3.marks,
          range = _props3.range;

      var newValue = (evt.clientX - left) / getClientWidth();
      newValue = (max - min) * newValue;
      newValue = Number(_this3.value) + Number(newValue);
      if (dots) {
        newValue = _this3.getAbsMinInArray((0, _keys2['default'])(marks), newValue);
      } else {
        newValue = Math.round(newValue / step) * step;
      }
      newValue = (0, _common.toFixed)(newValue, step);
      newValue = (0, _common.checkValueInRange)(newValue, max, min);
      var conf = _this3.state.conf;

      conf[type] = newValue;
      _this3.setState({ conf: conf });
      onChange && onChange(range ? [conf.start, conf.end] : newValue);
    }
  };

  this.handleMouseUp = function () {
    _this3.left = null;
    _this3.setState({ visibility: false });
  };
};

exports['default'] = Points;