ukelli-ui/core/range-selector/ranger-selector.js

ukelli-ui 是基于 React 的 UI 库，提供简约和功能齐全的组件，可高度定制的组件接口，灵活的配置，提供给开发者另一种开发思路，也致力于尝试不同的组件使用和开发方向。

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

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

var _basicHelper = require("basic-helper");

var _inputVerify = _interopRequireDefault(require("../form-control/input-verify"));

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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

/**
 * 拖动的选择控件
 *
 * @export
 * @class Ranger
 * @extends {Component}
 */
var Ranger =
/*#__PURE__*/
function (_Component) {
  _inherits(Ranger, _Component);

  function Ranger(props) {
    var _this;

    _classCallCheck(this, Ranger);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Ranger).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "handleWidth", 20);

    _defineProperty(_assertThisInitialized(_this), "movingHandle", function (e) {
      if (!_this.state.draping) return;
      var dragOriginX = _this.drapElemInfo.dragOriginX;
      var touches = e.changedTouches || e;
      var offsetX = touches[0] ? touches[0].pageX : touches.pageX;
      var moveOffset = _this.isRevert ? dragOriginX - offsetX : offsetX - dragOriginX;
      var currOffsetPer = Math.round(moveOffset / _this.rangerBodyWidth * 100 + _this.originalOffsetPercent);
      if (currOffsetPer < 0) currOffsetPer = 0;
      if (currOffsetPer > 100) currOffsetPer = 100;

      _this.changeValue(_this.percentToVal(currOffsetPer));
    });

    _defineProperty(_assertThisInitialized(_this), "dragEnd", function () {
      if (!_this.state.draping) return;
      var endX = _this.drapElemInfo.dragOriginX + _this.offsetPercent;
      _this.drapElemInfo = _objectSpread({}, _this.drapElemInfo, {
        dragOriginX: endX
      });

      _this.mouseMoved();

      _this.setEndPosition(_this.offsetPercent);

      _this.setState({
        draping: false
      });
    });

    _this.isControl = props.hasOwnProperty('value');
    var defaultValue = props.defaultValue || 0;
    var range = props.range;

    var _range = _slicedToArray(range, 2),
        min = _range[0],
        max = _range[1];

    var isRevert = min > max;

    if (isRevert) {
      var _ref = [min, max];
      max = _ref[0];
      min = _ref[1];
    }

    _this.isRevert = isRevert;
    _this.max = max;
    _this.min = min;

    var defaultPosition = _this.valToPercent(defaultValue);

    _this.originalOffsetPercent = defaultPosition;
    _this.offsetPercent = defaultPosition;
    _this.state = {
      stateValue: defaultValue,
      draping: false
    };
    _this.value = defaultValue;
    _this.drapElemInfo = {
      dragOriginX: 0,
      elemOrigonX: 0
    };
    return _this;
  }

  _createClass(Ranger, [{
    key: "shouldUpdateComponent",
    value: function shouldUpdateComponent(nextState, nextProps) {
      var isChange = this.isControl ? JSON.stringify(this.props) !== JSON.stringify(nextProps) : JSON.stringify(this.state) !== JSON.stringify(nextState);
      return isChange;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      setTimeout(function () {
        _this2.initData();
      }, 50);
    }
  }, {
    key: "initData",
    value: function initData() {
      var min = this.min,
          max = this.max;
      this.drapElemInfo.dragElem = this.handle;
      this.rangerBodyWidth = this.rangerContainer.offsetWidth;
      this.preUnitPixel = this.rangerBodyWidth / (max - min);
    }
  }, {
    key: "handleMouseDown",
    value: function handleMouseDown(e) {
      // e.preventDefault();
      // e.stopPropagation();
      var touches = e.changedTouches || e;
      this.dragOriginX = touches[0] ? touches[0].pageX : touches.pageX;
      this.drapElemInfo = _objectSpread({}, this.drapElemInfo, {
        dragOriginX: this.dragOriginX
      });
      this.setState({
        draping: true
      });
      this.mouseMoving();
    }
  }, {
    key: "mouseMoving",
    value: function mouseMoving() {
      document.addEventListener('mousemove', this.movingHandle, false);
      document.addEventListener('mouseup', this.dragEnd, false);
      document.addEventListener('touchmove', this.movingHandle, false);
      document.addEventListener('touchend', this.dragEnd, false);
    }
  }, {
    key: "mouseMoved",
    value: function mouseMoved() {
      document.removeEventListener('mousemove', this.movingHandle, false);
      document.removeEventListener('mouseup', this.dragEnd, false);
      document.removeEventListener('touchmove', this.movingHandle, false);
      document.removeEventListener('touchend', this.dragEnd, false);
    }
  }, {
    key: "percentToVal",
    value: function percentToVal(percent) {
      if (percent - 1 < -1) return;
      var basicUnit = this.props.basicUnit;
      var min = this.min,
          max = this.max;

      var _val = Math.floor(percent * (max - min) / 100 + min, 0) || 0;

      if (_val % basicUnit !== 0) _val += 1;
      return _val;
    }
  }, {
    key: "valToPercent",
    value: function valToPercent(val) {
      if (val - 1 < -1) return;
      var min = this.min,
          max = this.max;

      var _precent = +(0, _basicHelper.ToFixed)((val - min) * 100 / (max - min), 0) || 0;

      return _precent;
    }
  }, {
    key: "setEndPosition",
    value: function setEndPosition(offsetPercent) {
      this.originalOffsetPercent = offsetPercent; // this.setState({
      //   originalOffsetPercent: offsetPercent
      // });
    }
  }, {
    key: "changeValue",
    value: function changeValue(val) {
      var emitChangeEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
      if (!(0, _basicHelper.HasValue)(val) || val - 1 < -1) return;
      var _this$props = this.props,
          disabled = _this$props.disabled,
          onChange = _this$props.onChange;
      var stateValue = this.valueFilter();
      if (disabled) return;
      var min = this.min,
          max = this.max;
      if (val < min) val = min;
      if (val > max) val = max;

      if (stateValue !== val) {
        this.offsetPercent = this.valToPercent(val) || 0;
        this.value = val;
        if (emitChangeEvent) onChange(val);
        !this.isControl && this.setState({
          stateValue: val
        });
      }
    }
  }, {
    key: "plusAndLess",
    value: function plusAndLess(mark) {
      var basicUnit = this.props.basicUnit;
      var stateValue = this.valueFilter();
      var each = basicUnit;
      if (mark == '-') each = -each;
      if (this.isRevert) each = -each;

      var _val = stateValue + each;

      this.changeValue(_val, true);
      this.setEndPosition(this.valToPercent(_val));
    }
  }, {
    key: "valueFilter",
    value: function valueFilter() {
      return this.isControl ? this.props.value || 0 : this.state.stateValue || 0;
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var stateValue = this.valueFilter();
      var _this$props2 = this.props,
          disabled = _this$props2.disabled,
          precent = _this$props2.precent,
          range = _this$props2.range,
          withInput = _this$props2.withInput,
          basicUnit = _this$props2.basicUnit;
      var draping = this.state.draping;
      var handleStyle = this.isRevert ? {
        marginRight: -this.handleWidth / 2,
        right: "".concat(this.offsetPercent, "%")
      } : {
        marginLeft: -this.handleWidth / 2,
        left: "".concat(this.offsetPercent, "%")
      };

      var _value = precent ? (stateValue / 10).toFixed(1) : stateValue.toFixed(0);

      return _react["default"].createElement("div", {
        className: "uke-ranger ".concat(disabled ? 'disabled' : '', " ").concat(draping ? 'draping' : '', " ").concat(withInput ? 'with-input' : '')
      }, _react["default"].createElement("div", {
        className: "disabled-mask"
      }), _react["default"].createElement("div", {
        className: "ranger",
        onTouchStart: function onTouchStart(e) {
          return _this3.handleMouseDown(e);
        },
        onMouseDown: function onMouseDown(e) {
          return _this3.handleMouseDown(e);
        }
      }, _react["default"].createElement("div", {
        className: "all-process",
        ref: function ref(c) {
          if (c) _this3.rangerContainer = c;
        }
      }, _react["default"].createElement("div", {
        className: "active-process",
        style: {
          width: this.offsetPercent + '%'
        }
      }), _react["default"].createElement("div", {
        className: "handle",
        ref: function ref(h) {
          if (h) {
            _this3.handle = h;
            _this3.handleWidth = h.offsetWidth;
          }
        },
        style: handleStyle
      }, _react["default"].createElement("div", {
        className: "hide-value"
      }, _react["default"].createElement("span", {
        className: "text"
      }, _value, precent ? '%' : ''), _react["default"].createElement("span", {
        className: "caret"
      }))))), withInput ? _react["default"].createElement(_inputVerify["default"], {
        value: +stateValue,
        inputable: false,
        precent: precent,
        numRange: [0, range[1]],
        unit: basicUnit,
        onChange: function onChange(val) {
          _this3.plusAndLess(val - stateValue > 0 ? '+' : '-');
        }
      }) : null);
    }
  }]);

  return Ranger;
}(_react.Component);

exports["default"] = Ranger;

_defineProperty(Ranger, "propTypes", {
  /** 值改变的回调 */
  onChange: _propTypes["default"].func.isRequired,

  /** 默认值 */
  defaultValue: _propTypes["default"].number,

  /** 基础的单位 */
  basicUnit: _propTypes["default"].number,

  /** 是否禁用 */
  disabled: _propTypes["default"].bool,

  /** 是否百分比显示 */
  precent: _propTypes["default"].bool,

  /** 是否带有输入框 */
  withInput: _propTypes["default"].bool,

  /** 范围 */
  range: _propTypes["default"].arrayOf(_propTypes["default"].number)
});

_defineProperty(Ranger, "defaultProps", {
  basicUnit: 1,
  disabled: false,
  precent: false,
  withInput: true,
  range: [0, 10]
});