'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); 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 _get2 = require('babel-runtime/helpers/get'); var _get3 = _interopRequireDefault(_get2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); exports['default'] = createSlider; var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _addEventListener = require('rc-util/lib/Dom/addEventListener'); var _addEventListener2 = _interopRequireDefault(_addEventListener); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _warning = require('warning'); var _warning2 = _interopRequireDefault(_warning); var _Steps = require('./Steps'); var _Steps2 = _interopRequireDefault(_Steps); var _Marks = require('./Marks'); var _Marks2 = _interopRequireDefault(_Marks); var _Handle = require('../Handle'); var _Handle2 = _interopRequireDefault(_Handle); var _utils = require('../utils'); var utils = _interopRequireWildcard(_utils); 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)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function noop() {} function createSlider(Component) { var _class, _temp; return _temp = _class = function (_Component) { (0, _inherits3['default'])(ComponentEnhancer, _Component); function ComponentEnhancer(props) { (0, _classCallCheck3['default'])(this, ComponentEnhancer); var _this = (0, _possibleConstructorReturn3['default'])(this, (ComponentEnhancer.__proto__ || Object.getPrototypeOf(ComponentEnhancer)).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, _warning2['default'])(step && Math.floor(step) === step ? isPointDiffEven : true, 'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)', max - min, step); _this.handlesRefs = {}; return _this; } (0, _createClass3['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 _props = this.props, autoFocus = _props.autoFocus, disabled = _props.disabled; if (autoFocus && !disabled) { this.focus(); } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { if ((0, _get3['default'])(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'componentWillUnmount', this)) (0, _get3['default'])(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'componentWillUnmount', this).call(this); this.removeDocumentEvents(); } }, { key: 'getSliderStart', value: function getSliderStart() { var slider = this.sliderRef; var _props2 = this.props, vertical = _props2.vertical, reverse = _props2.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, _addEventListener2['default'])(this.document, 'touchmove', this.onTouchMove); this.onTouchUpListener = (0, _addEventListener2['default'])(this.document, 'touchend', this.onEnd); } }, { key: 'addDocumentMouseEvents', value: function addDocumentMouseEvents() { this.onMouseMoveListener = (0, _addEventListener2['default'])(this.document, 'mousemove', this.onMouseMove); this.onMouseUpListener = (0, _addEventListener2['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 _props3 = this.props, vertical = _props3.vertical, min = _props3.min, max = _props3.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 _props4 = this.props, min = _props4.min, max = _props4.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 _props5 = this.props, prefixCls = _props5.prefixCls, className = _props5.className, marks = _props5.marks, dots = _props5.dots, step = _props5.step, included = _props5.included, disabled = _props5.disabled, vertical = _props5.vertical, reverse = _props5.reverse, min = _props5.min, max = _props5.max, children = _props5.children, maximumTrackStyle = _props5.maximumTrackStyle, style = _props5.style, railStyle = _props5.railStyle, dotStyle = _props5.dotStyle, activeDotStyle = _props5.activeDotStyle; var _get$call = (0, _get3['default'])(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'render', this).call(this), tracks = _get$call.tracks, handles = _get$call.handles; var sliderClassName = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-with-marks', Object.keys(marks).length), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, prefixCls + '-vertical', vertical), (0, _defineProperty3['default'])(_classNames, className, className), _classNames)); return _react2['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 }, _react2['default'].createElement('div', { className: prefixCls + '-rail', style: (0, _extends3['default'])({}, maximumTrackStyle, railStyle) }), tracks, _react2['default'].createElement(_Steps2['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, _react2['default'].createElement(_Marks2['default'], { className: 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), _class.displayName = 'ComponentEnhancer(' + Component.displayName + ')', _class.propTypes = (0, _extends3['default'])({}, Component.propTypes, { min: _propTypes2['default'].number, max: _propTypes2['default'].number, step: _propTypes2['default'].number, marks: _propTypes2['default'].object, included: _propTypes2['default'].bool, className: _propTypes2['default'].string, prefixCls: _propTypes2['default'].string, disabled: _propTypes2['default'].bool, children: _propTypes2['default'].any, onBeforeChange: _propTypes2['default'].func, onChange: _propTypes2['default'].func, onAfterChange: _propTypes2['default'].func, handle: _propTypes2['default'].func, dots: _propTypes2['default'].bool, vertical: _propTypes2['default'].bool, style: _propTypes2['default'].object, reverse: _propTypes2['default'].bool, minimumTrackStyle: _propTypes2['default'].object, // just for compatibility, will be deperecate maximumTrackStyle: _propTypes2['default'].object, // just for compatibility, will be deperecate handleStyle: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].arrayOf(_propTypes2['default'].object)]), trackStyle: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].arrayOf(_propTypes2['default'].object)]), railStyle: _propTypes2['default'].object, dotStyle: _propTypes2['default'].object, activeDotStyle: _propTypes2['default'].object, autoFocus: _propTypes2['default'].bool, onFocus: _propTypes2['default'].func, onBlur: _propTypes2['default'].func }), _class.defaultProps = (0, _extends3['default'])({}, Component.defaultProps, { prefixCls: 'rc-slider', className: '', min: 0, max: 100, step: 1, marks: {}, handle: function handle(_ref) { var index = _ref.index, restProps = (0, _objectWithoutProperties3['default'])(_ref, ['index']); delete restProps.dragging; if (restProps.value === null) { return null; } return _react2['default'].createElement(_Handle2['default'], (0, _extends3['default'])({}, restProps, { key: index })); }, onBeforeChange: noop, onChange: noop, onAfterChange: noop, included: true, disabled: false, dots: false, vertical: false, reverse: false, trackStyle: [{}], handleStyle: [{}], railStyle: {}, dotStyle: {}, activeDotStyle: {} }), _temp; } module.exports = exports['default'];