"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); 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 _react = _interopRequireDefault(require("react")); var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener")); var _classnames = _interopRequireDefault(require("classnames")); var _warning = _interopRequireDefault(require("rc-util/lib/warning")); var _Steps = _interopRequireDefault(require("./Steps")); var _Marks = _interopRequireDefault(require("./Marks")); var _Handle = _interopRequireDefault(require("../Handle")); var utils = _interopRequireWildcard(require("../utils")); function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { 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 _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; } } function noop() {} function createSlider(Component) { var _a; return _a = /*#__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); _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(); }; _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); }; _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); } } }; _this.onBlur = function (e) { var onBlur = _this.props.onBlur; _this.onEnd(); if (onBlur) { onBlur(e); } }; _this.onMouseUp = function () { if (_this.handlesRefs[_this.prevMovedHandleIndex]) { _this.handlesRefs[_this.prevMovedHandleIndex].clickFocus(); } }; _this.onMouseMove = function (e) { if (!_this.sliderRef) { _this.onEnd(); return; } var position = utils.getMousePosition(_this.props.vertical, e); _this.onMove(e, position - _this.dragOffset); }; _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); }; _this.onKeyDown = function (e) { if (_this.sliderRef && utils.isEventFromHandle(e, _this.handlesRefs)) { _this.onKeyboard(e); } }; _this.onClickMarkLabel = function (e, value) { e.stopPropagation(); _this.onChange({ value: value }); _this.setState({ value: value }, function () { return _this.onEnd(true); }); }; _this.saveSlider = function (slider) { _this.sliderRef = slider; }; var step = props.step, max = props.max, min = props.min; var isPointDiffEven = isFinite(max - min) ? (max - min) % step === 0 : true; // eslint-disable-line (0, _warning.default)(step && Math.floor(step) === step ? isPointDiffEven : true, "Slider[max] - Slider[min] (".concat(max - min, ") should be a multiple of Slider[step] (").concat(step, ")")); _this.handlesRefs = {}; return _this; } (0, _createClass2.default)(ComponentEnhancer, [{ key: "componentDidMount", value: function componentDidMount() { // Snapshot testing cannot handle refs, so be sure to null-check this. this.document = this.sliderRef && this.sliderRef.ownerDocument; var _this$props2 = this.props, autoFocus = _this$props2.autoFocus, disabled = _this$props2.disabled; if (autoFocus && !disabled) { this.focus(); } } }, { 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: "getSliderStart", value: function getSliderStart() { var slider = this.sliderRef; var _this$props3 = this.props, vertical = _this$props3.vertical, reverse = _this$props3.reverse; var rect = slider.getBoundingClientRect(); if (vertical) { return reverse ? rect.bottom : rect.top; } return window.pageXOffset + (reverse ? rect.right : 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: "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() { var _this2 = this; if (!this.props.disabled) { Object.keys(this.handlesRefs).forEach(function (key) { if (_this2.handlesRefs[key] && _this2.handlesRefs[key].blur) { _this2.handlesRefs[key].blur(); } }); } } }, { key: "calcValue", value: function calcValue(offset) { var _this$props4 = this.props, vertical = _this$props4.vertical, min = _this$props4.min, max = _this$props4.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 sign = this.props.reverse ? -1 : +1; var pixelOffset = sign * (position - this.getSliderStart()); var nextValue = this.trimAlignValue(this.calcValue(pixelOffset)); return nextValue; } }, { key: "calcOffset", value: function calcOffset(value) { var _this$props5 = this.props, min = _this$props5.min, max = _this$props5.max; var ratio = (value - min) / (max - min); return Math.max(0, ratio * 100); } }, { key: "saveHandle", value: function saveHandle(index, handle) { this.handlesRefs[index] = handle; } }, { key: "render", value: function render() { var _classNames; var _this$props6 = this.props, prefixCls = _this$props6.prefixCls, className = _this$props6.className, marks = _this$props6.marks, dots = _this$props6.dots, step = _this$props6.step, included = _this$props6.included, disabled = _this$props6.disabled, vertical = _this$props6.vertical, reverse = _this$props6.reverse, min = _this$props6.min, max = _this$props6.max, children = _this$props6.children, maximumTrackStyle = _this$props6.maximumTrackStyle, style = _this$props6.style, railStyle = _this$props6.railStyle, dotStyle = _this$props6.dotStyle, activeDotStyle = _this$props6.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 : this.onTouchStart, onMouseDown: disabled ? noop : this.onMouseDown, onMouseUp: disabled ? noop : this.onMouseUp, onKeyDown: disabled ? noop : this.onKeyDown, onFocus: disabled ? noop : this.onFocus, onBlur: disabled ? noop : this.onBlur, style: style }, _react.default.createElement("div", { className: "".concat(prefixCls, "-rail"), style: _objectSpread(_objectSpread({}, maximumTrackStyle), railStyle) }), tracks, _react.default.createElement(_Steps.default, { prefixCls: prefixCls, vertical: vertical, reverse: reverse, 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 : this.onClickMarkLabel, vertical: vertical, marks: marks, included: included, lowerBound: this.getLowerBound(), upperBound: this.getUpperBound(), max: max, min: min, reverse: reverse }), children); } }]); return ComponentEnhancer; }(Component), _a.displayName = "ComponentEnhancer(".concat(Component.displayName, ")"), _a.defaultProps = _objectSpread(_objectSpread({}, Component.defaultProps), {}, { prefixCls: 'rc-slider', className: '', min: 0, max: 100, step: 1, marks: {}, handle: function handle(props) { var index = props.index, restProps = (0, _objectWithoutProperties2.default)(props, ["index"]); delete restProps.dragging; if (restProps.value === null) { return null; } return _react.default.createElement(_Handle.default, Object.assign({}, restProps, { key: index })); }, onBeforeChange: noop, onChange: noop, onAfterChange: noop, included: true, disabled: false, dots: false, vertical: false, reverse: false, trackStyle: [{}], handleStyle: [{}], railStyle: {}, dotStyle: {}, activeDotStyle: {} }), _a; }