|
- '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'];
|