choerodon-ui/lib/rc-components/slider/common/createSlider.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

var _addEventListener = _interopRequireDefault(require("../../../_util/addEventListener"));

var _classnames = _interopRequireDefault(require("classnames"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _warning = _interopRequireDefault(require("../../../_util/warning"));

var _Steps = _interopRequireDefault(require("./Steps"));

var _Marks = _interopRequireDefault(require("./Marks"));

var _Handle = _interopRequireDefault(require("../Handle"));

var utils = _interopRequireWildcard(require("../utils"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

function createSlider(Component) {
  var _class, _temp;

  return _temp = _class =
  /*#__PURE__*/
  function (_Component) {
    (0, _inherits2["default"])(ComponentEnhancer, _Component);

    var _super = _createSuper(ComponentEnhancer);

    function ComponentEnhancer(props) {
      var _this;

      (0, _classCallCheck2["default"])(this, ComponentEnhancer);
      _this = _super.call(this, props);
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseDown", function (e) {
        if (e.button !== 0) {
          return;
        }

        var isVertical = _this.props.vertical;
        var position = utils.getMousePosition(isVertical, e);

        if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
          _this.dragOffset = 0;
        } else {
          var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
          _this.dragOffset = position - handlePosition;
          position = handlePosition;
        }

        _this.removeDocumentEvents();

        _this.onStart(position);

        _this.addDocumentMouseEvents();
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTouchStart", function (e) {
        if (utils.isNotTouchEvent(e)) return;
        var isVertical = _this.props.vertical;
        var position = utils.getTouchPosition(isVertical, e);

        if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
          _this.dragOffset = 0;
        } else {
          var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
          _this.dragOffset = position - handlePosition;
          position = handlePosition;
        }

        _this.onStart(position);

        _this.addDocumentTouchEvents();

        utils.pauseEvent(e);
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (e) {
        var _this$props = _this.props,
            onFocus = _this$props.onFocus,
            vertical = _this$props.vertical;

        if (utils.isEventFromHandle(e, _this.handlesRefs)) {
          var handlePosition = utils.getHandleCenterPosition(vertical, e.target);
          _this.dragOffset = 0;

          _this.onStart(handlePosition);

          utils.pauseEvent(e);

          if (onFocus) {
            onFocus(e);
          }
        }
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (e) {
        var onBlur = _this.props.onBlur;

        _this.onEnd(e);

        if (onBlur) {
          onBlur(e);
        }
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseUp", function () {
        if (_this.handlesRefs[_this.prevMovedHandleIndex]) {
          _this.handlesRefs[_this.prevMovedHandleIndex].clickFocus();
        }
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseMove", function (e) {
        if (!_this.sliderRef) {
          _this.onEnd();

          return;
        }

        var position = utils.getMousePosition(_this.props.vertical, e);

        _this.onMove(e, position - _this.dragOffset);
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTouchMove", function (e) {
        if (utils.isNotTouchEvent(e) || !_this.sliderRef) {
          _this.onEnd();

          return;
        }

        var position = utils.getTouchPosition(_this.props.vertical, e);

        _this.onMove(e, position - _this.dragOffset);
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (e) {
        if (_this.sliderRef && utils.isEventFromHandle(e, _this.handlesRefs)) {
          _this.onKeyboard(e);
        }
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveSlider", function (slider) {
        _this.sliderRef = slider;
      });
      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClickMarkLabel", function (e, value) {
        e.stopPropagation();

        _this.onChange({
          value: value
        });
      });

      if (process.env.NODE_ENV !== 'production') {
        var step = props.step,
            max = props.max,
            min = props.min;
        (0, _warning["default"])(step && Math.floor(step) === step ? (max - min) % step === 0 : true, 'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)', max - min, step);
      }

      _this.handlesRefs = {};
      return _this;
    }

    (0, _createClass2["default"])(ComponentEnhancer, [{
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        if ((0, _get2["default"])((0, _getPrototypeOf2["default"])(ComponentEnhancer.prototype), "componentWillUnmount", this)) (0, _get2["default"])((0, _getPrototypeOf2["default"])(ComponentEnhancer.prototype), "componentWillUnmount", this).call(this);
        this.removeDocumentEvents();
      }
    }, {
      key: "componentDidMount",
      value: function componentDidMount() {
        // Snapshot testing cannot handle refs, so be sure to null-check this.
        this.document = this.sliderRef && this.sliderRef.ownerDocument;
      }
    }, {
      key: "addDocumentTouchEvents",
      value: function addDocumentTouchEvents() {
        // just work for Chrome iOS Safari and Android Browser
        this.onTouchMoveListener = (0, _addEventListener["default"])(this.document, 'touchmove', this.onTouchMove);
        this.onTouchUpListener = (0, _addEventListener["default"])(this.document, 'touchend', this.onEnd);
      }
    }, {
      key: "addDocumentMouseEvents",
      value: function addDocumentMouseEvents() {
        this.onMouseMoveListener = (0, _addEventListener["default"])(this.document, 'mousemove', this.onMouseMove);
        this.onMouseUpListener = (0, _addEventListener["default"])(this.document, 'mouseup', this.onEnd);
      }
    }, {
      key: "removeDocumentEvents",
      value: function removeDocumentEvents() {
        /* eslint-disable no-unused-expressions */
        this.onTouchMoveListener && this.onTouchMoveListener.remove();
        this.onTouchUpListener && this.onTouchUpListener.remove();
        this.onMouseMoveListener && this.onMouseMoveListener.remove();
        this.onMouseUpListener && this.onMouseUpListener.remove();
        /* eslint-enable no-unused-expressions */
      }
    }, {
      key: "focus",
      value: function focus() {
        if (!this.props.disabled) {
          this.handlesRefs[0].focus();
        }
      }
    }, {
      key: "blur",
      value: function blur() {
        if (!this.props.disabled) {
          this.handlesRefs[0].blur();
        }
      }
    }, {
      key: "getSliderStart",
      value: function getSliderStart() {
        var slider = this.sliderRef;
        var rect = slider.getBoundingClientRect();
        return this.props.vertical ? rect.top : rect.left;
      }
    }, {
      key: "getSliderLength",
      value: function getSliderLength() {
        var slider = this.sliderRef;

        if (!slider) {
          return 0;
        }

        var coords = slider.getBoundingClientRect();
        return this.props.vertical ? coords.height : coords.width;
      }
    }, {
      key: "calcValue",
      value: function calcValue(offset) {
        var _this$props2 = this.props,
            vertical = _this$props2.vertical,
            min = _this$props2.min,
            max = _this$props2.max;
        var ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
        var value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
        return value;
      }
    }, {
      key: "calcValueByPos",
      value: function calcValueByPos(position) {
        var pixelOffset = position - this.getSliderStart();
        var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
        return nextValue;
      }
    }, {
      key: "calcOffset",
      value: function calcOffset(value) {
        var _this$props3 = this.props,
            min = _this$props3.min,
            max = _this$props3.max;
        var ratio = (value - min) / (max - min);
        return ratio * 100;
      }
    }, {
      key: "saveHandle",
      value: function saveHandle(index, handle) {
        this.handlesRefs[index] = handle;
      }
    }, {
      key: "render",
      value: function render() {
        var _classNames;

        var _this$props4 = this.props,
            prefixCls = _this$props4.prefixCls,
            className = _this$props4.className,
            marks = _this$props4.marks,
            dots = _this$props4.dots,
            step = _this$props4.step,
            included = _this$props4.included,
            disabled = _this$props4.disabled,
            vertical = _this$props4.vertical,
            min = _this$props4.min,
            max = _this$props4.max,
            children = _this$props4.children,
            maximumTrackStyle = _this$props4.maximumTrackStyle,
            style = _this$props4.style,
            railStyle = _this$props4.railStyle,
            dotStyle = _this$props4.dotStyle,
            activeDotStyle = _this$props4.activeDotStyle;

        var _get$call = (0, _get2["default"])((0, _getPrototypeOf2["default"])(ComponentEnhancer.prototype), "render", this).call(this),
            tracks = _get$call.tracks,
            handles = _get$call.handles;

        var sliderClassName = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-marks"), Object.keys(marks).length), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-vertical"), vertical), (0, _defineProperty2["default"])(_classNames, className, className), _classNames));
        return _react["default"].createElement("div", {
          ref: this.saveSlider,
          className: sliderClassName,
          onTouchStart: disabled ? _noop["default"] : this.onTouchStart,
          onMouseDown: disabled ? _noop["default"] : this.onMouseDown,
          onMouseUp: disabled ? _noop["default"] : this.onMouseUp,
          onKeyDown: disabled ? _noop["default"] : this.onKeyDown,
          onFocus: disabled ? _noop["default"] : this.onFocus,
          onBlur: disabled ? _noop["default"] : this.onBlur,
          style: style
        }, _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-rail"),
          style: (0, _objectSpread2["default"])({}, maximumTrackStyle, {}, railStyle)
        }), tracks, _react["default"].createElement(_Steps["default"], {
          prefixCls: prefixCls,
          vertical: vertical,
          marks: marks,
          dots: dots,
          step: step,
          included: included,
          lowerBound: this.getLowerBound(),
          upperBound: this.getUpperBound(),
          max: max,
          min: min,
          dotStyle: dotStyle,
          activeDotStyle: activeDotStyle
        }), handles, _react["default"].createElement(_Marks["default"], {
          className: "".concat(prefixCls, "-mark"),
          onClickLabel: disabled ? _noop["default"] : this.onClickMarkLabel,
          vertical: vertical,
          marks: marks,
          included: included,
          lowerBound: this.getLowerBound(),
          upperBound: this.getUpperBound(),
          max: max,
          min: min
        }), children);
      }
    }]);
    return ComponentEnhancer;
  }(Component), (0, _defineProperty2["default"])(_class, "displayName", "ComponentEnhancer(".concat(Component.displayName, ")")), (0, _defineProperty2["default"])(_class, "propTypes", (0, _objectSpread2["default"])({}, Component.propTypes, {
    min: _propTypes["default"].number,
    max: _propTypes["default"].number,
    step: _propTypes["default"].number,
    marks: _propTypes["default"].object,
    included: _propTypes["default"].bool,
    className: _propTypes["default"].string,
    prefixCls: _propTypes["default"].string,
    disabled: _propTypes["default"].bool,
    children: _propTypes["default"].any,
    onBeforeChange: _propTypes["default"].func,
    onChange: _propTypes["default"].func,
    onAfterChange: _propTypes["default"].func,
    handle: _propTypes["default"].func,
    dots: _propTypes["default"].bool,
    vertical: _propTypes["default"].bool,
    style: _propTypes["default"].object,
    minimumTrackStyle: _propTypes["default"].object,
    // just for compatibility, will be deperecate
    maximumTrackStyle: _propTypes["default"].object,
    // just for compatibility, will be deperecate
    handleStyle: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
    trackStyle: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
    railStyle: _propTypes["default"].object,
    dotStyle: _propTypes["default"].object,
    activeDotStyle: _propTypes["default"].object,
    autoFocus: _propTypes["default"].bool,
    onFocus: _propTypes["default"].func,
    onBlur: _propTypes["default"].func
  })), (0, _defineProperty2["default"])(_class, "defaultProps", (0, _objectSpread2["default"])({}, Component.defaultProps, {
    prefixCls: 'rc-slider',
    className: '',
    min: 0,
    max: 100,
    step: 1,
    marks: {},
    handle: function handle(_ref) {
      var index = _ref.index,
          restProps = (0, _objectWithoutProperties2["default"])(_ref, ["index"]);
      delete restProps.dragging;
      return _react["default"].createElement(_Handle["default"], (0, _extends2["default"])({}, restProps, {
        key: index
      }));
    },
    onBeforeChange: _noop["default"],
    onChange: _noop["default"],
    onAfterChange: _noop["default"],
    included: true,
    disabled: false,
    dots: false,
    vertical: false,
    trackStyle: [{}],
    handleStyle: [{}],
    railStyle: {},
    dotStyle: {},
    activeDotStyle: {}
  })), _temp;
}
//# sourceMappingURL=createSlider.js.map