442 lines
15 KiB
JavaScript
442 lines
15 KiB
JavaScript
'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 _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 Math.max(0, 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.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']; |