rc-slider
Advanced tools
Comparing version 1.2.10 to 1.3.0
'use strict'; | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
var React = require('react'); | ||
var Tooltip = require('rc-tooltip'); | ||
var DomUtils = require('rc-util').Dom; | ||
var rcUtil = require('rc-util'); | ||
var DomUtils = rcUtil.Dom; | ||
function noop() {} | ||
function pauseEvent(e) { | ||
e.cancelBubble = true; | ||
e.returnValue = false; | ||
if (e.stopPropagation) { | ||
@@ -30,4 +37,4 @@ e.stopPropagation(); | ||
step: React.PropTypes.number, | ||
value: React.PropTypes.number, | ||
index: React.PropTypes.number, | ||
defaultValue: React.PropTypes.number, | ||
defaultIndex: React.PropTypes.number, | ||
marks: React.PropTypes.array, | ||
@@ -47,8 +54,9 @@ isIncluded: React.PropTypes.bool, | ||
step: 1, | ||
value: 0, | ||
defaultValue: 0, | ||
marks: [], | ||
isIncluded: true, | ||
className: 'rc-slider', | ||
className: '', | ||
prefixCls: 'rc-slider', | ||
disabled: false, | ||
index: 0 | ||
defaultIndex: 0 | ||
}; | ||
@@ -59,6 +67,7 @@ }, | ||
var props = this.props; | ||
var value = this._trimAlignValue(props.value); | ||
var value = props.defaultValue; | ||
value = this._trimAlignValue(value); | ||
var marksLen = props.marks.length; | ||
if (marksLen > 0) { | ||
value = (props.max - props.min) / (marksLen - 1) * props.index; | ||
value = (props.max - props.min) / (marksLen - 1) * props.defaultIndex; | ||
value = value.toFixed(5); | ||
@@ -68,16 +77,6 @@ } | ||
return { | ||
value: value, | ||
active: props.disabled ? '' : value > props.min || props.index > 0 ? 'active' : '' | ||
value: value | ||
}; | ||
}, | ||
componentWillReceiveProps: function componentWillReceiveProps(newProps) { | ||
var value = newProps.value; | ||
this.state.value = this._trimAlignValue(value, newProps); | ||
}, | ||
getValue: function getValue() { | ||
return this.state.value; | ||
}, | ||
getIndex: function getIndex() { | ||
@@ -127,14 +126,14 @@ var props = this.props; | ||
_calValueByPos: function _calValueByPos(position, callback) { | ||
_calValueByPos: function _calValueByPos(position) { | ||
var pixelOffset = position - this.getSliderStart(); | ||
// pixelOffset -= (this.state.handleSize / 2); | ||
var nextValue = this._trimAlignValue(this._calcValue(pixelOffset)); | ||
this.setState({ value: nextValue, active: 'active' }, callback); | ||
// do not use setState | ||
this.state.value = nextValue; | ||
this.setState({ | ||
value: nextValue | ||
}); | ||
return nextValue; | ||
}, | ||
_getMousePosition: function _getMousePosition(e) { | ||
return e.pageX || e.clientX + document.documentElement.scrollLeft; | ||
}, | ||
_getTouchPosition: function _getTouchPosition(e) { | ||
@@ -158,5 +157,3 @@ var touch = e.touches[0]; | ||
this._onTouchUpListener = DomUtils.addEventListener(document, 'touchend', this._onTouchUp); | ||
} | ||
if (type === 'mouse') { | ||
} else if (type === 'mouse') { | ||
this._onMouseMoveListener = DomUtils.addEventListener(document, 'mousemove', this._onMouseMove); | ||
@@ -171,5 +168,3 @@ this._onMouseUpListener = DomUtils.addEventListener(document, 'mouseup', this._onMouseUp); | ||
this._onTouchUpListener.remove(); | ||
} | ||
if (type === 'mouse') { | ||
} else if (type === 'mouse') { | ||
this._onMouseMoveListener.remove(); | ||
@@ -181,12 +176,5 @@ this._onMouseUpListener.remove(); | ||
_start: function _start(position) { | ||
if (document.activeElement) { | ||
document.activeElement.blur(); | ||
} | ||
this._triggerEvents('onBeforeChange'); | ||
this.setState({ | ||
startValue: this.state.value, | ||
startPosition: position | ||
}); | ||
this.startValue = this.state.value; | ||
this.startPosition = position; | ||
}, | ||
@@ -196,3 +184,3 @@ | ||
this._removeEventHandles(type); | ||
this.setState(this._triggerEvents.bind(this, 'onAfterChange')); | ||
this._triggerEvents('onAfterChange'); | ||
}, | ||
@@ -209,3 +197,3 @@ | ||
_onMouseMove: function _onMouseMove(e) { | ||
var position = this._getMousePosition(e); | ||
var position = e.pageX; | ||
this._handleMove(e, position); | ||
@@ -216,2 +204,3 @@ }, | ||
if (e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) { | ||
this._end('touch'); | ||
return; | ||
@@ -227,3 +216,2 @@ } | ||
pauseEvent(e); | ||
// var position = this._getMousePosition(e); | ||
var props = this.props; | ||
@@ -235,6 +223,6 @@ var state = this.state; | ||
var diffPosition = position - state.startPosition; | ||
var diffPosition = position - this.startPosition; | ||
var diffValue = diffPosition / this.getSliderLength() * (props.max - props.min); | ||
var newValue = this._trimAlignValue(state.startValue + diffValue); | ||
var newValue = this._trimAlignValue(this.startValue + diffValue); | ||
@@ -244,3 +232,4 @@ value = newValue; | ||
if (newValue !== oldValue) { | ||
this.setState({ value: value, active: 'active' }, this._triggerEvents.bind(this, 'onChange')); | ||
this.setState({ value: value }); | ||
this._triggerEvents('onChange'); | ||
} | ||
@@ -266,3 +255,3 @@ }, | ||
handleTouchStart: function handleTouchStart(e) { | ||
if (this.props.disabled || e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) { | ||
if (e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0) { | ||
return; | ||
@@ -272,3 +261,4 @@ } | ||
var position = this._getTouchPosition(e); | ||
this.startPosition = position; | ||
this._calValueByPos(position); | ||
this._triggerEvents('onChange'); | ||
this._start(position); | ||
@@ -279,29 +269,8 @@ this._addEventHandles('touch'); | ||
handleMouseDown: function handleMouseDown() { | ||
var _this = this; | ||
return function (e) { | ||
if (_this.props.disabled) { | ||
return; | ||
} | ||
var position = _this._getMousePosition(e); | ||
_this._start(position); | ||
_this._addEventHandles('mouse'); | ||
pauseEvent(e); | ||
}; | ||
}, | ||
handleSliderMouseDown: function handleSliderMouseDown(e) { | ||
var _this2 = this; | ||
if (this.props.disabled) { | ||
return; | ||
} | ||
var position = this._getMousePosition(e); | ||
this._calValueByPos(position, function () { | ||
_this2._triggerEvents('onChange'); | ||
_this2._start(position); | ||
_this2._addEventHandles('mouse'); | ||
}); | ||
var position = e.pageX; | ||
this._calValueByPos(position); | ||
this._triggerEvents('onChange'); | ||
this._start(position); | ||
this._addEventHandles('mouse'); | ||
pauseEvent(e); | ||
@@ -316,3 +285,3 @@ }, | ||
var prefixCls = props.className; | ||
var prefixCls = props.prefixCls; | ||
var stepClassName = prefixClsFn(prefixCls, 'step'); | ||
@@ -361,3 +330,3 @@ | ||
var prefixCls = this.props.className; | ||
var prefixCls = this.props.prefixCls; | ||
var className = prefixClsFn(prefixCls, 'mark-text'); | ||
@@ -388,3 +357,3 @@ | ||
var prefixCls = this.props.className; | ||
var prefixCls = this.props.prefixCls; | ||
var className = prefixClsFn(prefixCls, 'mark'); | ||
@@ -404,15 +373,8 @@ | ||
var prefixCls = this.props.className; | ||
var prefixCls = this.props.prefixCls; | ||
var className = prefixClsFn(prefixCls, 'handle'); | ||
if (this.state.active) { | ||
className = prefixClsFn(prefixCls, 'handle', 'handle-active'); | ||
} | ||
var handle = React.createElement('div', { className: className, | ||
ref: 'handle', | ||
style: handleStyle, | ||
href: '#', | ||
onMouseDown: this.handleMouseDown, | ||
onTouchStart: this.handleTouchStart }); | ||
style: handleStyle }); | ||
@@ -443,3 +405,3 @@ if (this.props.marks.length > 0) { | ||
var prefixCls = this.props.className; | ||
var prefixCls = this.props.prefixCls; | ||
var trackClassName = prefixClsFn(prefixCls, 'track'); | ||
@@ -451,2 +413,4 @@ | ||
render: function render() { | ||
var _sliderClassName; | ||
var state = this.state; | ||
@@ -463,8 +427,11 @@ var props = this.props; | ||
var prefixCls = props.className; | ||
var sliderClassName = props.disabled ? prefixCls + ' ' + prefixClsFn(prefixCls, 'disabled') : prefixCls; | ||
var prefixCls = props.prefixCls; | ||
var disabled = props.disabled; | ||
var sliderClassName = (_sliderClassName = {}, _defineProperty(_sliderClassName, prefixCls, 1), _defineProperty(_sliderClassName, props.className, !!props.className), _defineProperty(_sliderClassName, prefixCls + '-disabled', disabled), _sliderClassName); | ||
return React.createElement( | ||
'div', | ||
{ className: sliderClassName, ref: 'slider', onMouseDown: this.handleSliderMouseDown }, | ||
{ className: rcUtil.classSet(sliderClassName), ref: 'slider', | ||
onTouchStart: disabled ? noop : this.handleTouchStart, | ||
onMouseDown: disabled ? noop : this.handleSliderMouseDown }, | ||
track, | ||
@@ -471,0 +438,0 @@ handles, |
{ | ||
"name": "rc-slider", | ||
"version": "1.2.10", | ||
"version": "1.3.0", | ||
"description": "slider ui component for react", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -98,3 +98,3 @@ # rc-slider | ||
<tr> | ||
<td>value</td> | ||
<td>defaultValue</td> | ||
<td>number</td> | ||
@@ -117,3 +117,3 @@ <td>0</td> | ||
<tr> | ||
<td>index</td> | ||
<td>defaultIndex</td> | ||
<td>number</td> | ||
@@ -120,0 +120,0 @@ <td>0</td> |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
20573
492
1