rc-slider
Advanced tools
Comparing version 1.3.1 to 1.4.0
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
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 rcUtil = require('rc-util'); | ||
var DomUtils = rcUtil.Dom; | ||
var _react = require('react'); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _rcTooltip = require('rc-tooltip'); | ||
var _rcTooltip2 = _interopRequireDefault(_rcTooltip); | ||
var _rcUtil = require('rc-util'); | ||
var _rcUtil2 = _interopRequireDefault(_rcUtil); | ||
function noop() {} | ||
@@ -24,3 +39,6 @@ | ||
function prefixClsFn(prefixCls) { | ||
var args = Array.prototype.slice.call(arguments, 1); | ||
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
args[_key - 1] = arguments[_key]; | ||
} | ||
return args.map(function (s) { | ||
@@ -32,5 +50,5 @@ return prefixCls + '-' + s; | ||
function getValueFromIndex(props) { | ||
var value; | ||
var value = undefined; | ||
var marksLen = props.marks.length; | ||
var index; | ||
var index = undefined; | ||
if ('index' in props) { | ||
@@ -48,20 +66,22 @@ index = props.index; | ||
var Slider = React.createClass({ | ||
var Slider = _react2['default'].createClass({ | ||
displayName: 'Slider', | ||
propTypes: { | ||
min: React.PropTypes.number, | ||
max: React.PropTypes.number, | ||
step: React.PropTypes.number, | ||
defaultValue: React.PropTypes.number, | ||
defaultIndex: React.PropTypes.number, | ||
value: React.PropTypes.number, | ||
index: React.PropTypes.number, | ||
marks: React.PropTypes.array, | ||
isIncluded: React.PropTypes.bool, | ||
className: React.PropTypes.string, | ||
disabled: React.PropTypes.bool, | ||
onBeforeChange: React.PropTypes.func, | ||
onChange: React.PropTypes.func, | ||
onAfterChange: React.PropTypes.func | ||
min: _react2['default'].PropTypes.number, | ||
max: _react2['default'].PropTypes.number, | ||
step: _react2['default'].PropTypes.number, | ||
defaultValue: _react2['default'].PropTypes.number, | ||
defaultIndex: _react2['default'].PropTypes.number, | ||
value: _react2['default'].PropTypes.number, | ||
index: _react2['default'].PropTypes.number, | ||
marks: _react2['default'].PropTypes.array, | ||
isIncluded: _react2['default'].PropTypes.bool, | ||
className: _react2['default'].PropTypes.string, | ||
prefixCls: _react2['default'].PropTypes.string, | ||
disabled: _react2['default'].PropTypes.bool, | ||
children: _react2['default'].PropTypes.any, | ||
onBeforeChange: _react2['default'].PropTypes.func, | ||
onChange: _react2['default'].PropTypes.func, | ||
onAfterChange: _react2['default'].PropTypes.func | ||
}, | ||
@@ -96,2 +116,4 @@ | ||
return { | ||
dragging: false, | ||
showTooltip: false, | ||
value: value | ||
@@ -113,117 +135,16 @@ }; | ||
getIndex: function getIndex() { | ||
var props = this.props; | ||
var value = this.state.value; | ||
if (props.marks.length === 0) { | ||
return Math.floor((value - props.min) / props.step); | ||
} else { | ||
var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5); | ||
return Math.round(value / unit); | ||
} | ||
}, | ||
_trimAlignValue: function _trimAlignValue(val, props) { | ||
props = props || this.props; | ||
var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step; | ||
if (val <= props.min) { | ||
val = props.min; | ||
} | ||
if (val >= props.max) { | ||
val = props.max; | ||
} | ||
var valModStep = (val - props.min) % step; | ||
var alignValue = val - valModStep; | ||
if (Math.abs(valModStep) * 2 >= step) { | ||
alignValue += valModStep > 0 ? step : -step; | ||
} | ||
return parseFloat(alignValue.toFixed(5)); | ||
}, | ||
_calcOffset: function _calcOffset(value) { | ||
var ratio = (value - this.props.min) / (this.props.max - this.props.min); | ||
return ratio * 100 + '%'; | ||
}, | ||
_calcValue: function _calcValue(offset) { | ||
var ratio = offset / this.getSliderLength(); | ||
return ratio * (this.props.max - this.props.min) + this.props.min; | ||
}, | ||
_calValueByPos: function _calValueByPos(position) { | ||
var pixelOffset = position - this.getSliderStart(); | ||
// pixelOffset -= (this.state.handleSize / 2); | ||
var nextValue = this._trimAlignValue(this._calcValue(pixelOffset)); | ||
// do not use setState | ||
this.state.value = nextValue; | ||
this.setState({ | ||
value: nextValue | ||
}); | ||
return nextValue; | ||
}, | ||
_getTouchPosition: function _getTouchPosition(e) { | ||
var touch = e.touches[0]; | ||
return touch.pageX; | ||
}, | ||
_triggerEvents: function _triggerEvents(event) { | ||
var props = this.props; | ||
var hasMarks = props.marks && props.marks.length > 0; | ||
if (props[event]) { | ||
props[event](hasMarks ? this.getIndex() : this.state.value); | ||
} | ||
}, | ||
_addEventHandles: function _addEventHandles(type) { | ||
if (type === 'touch') { | ||
// just work for chrome iOS Safari and Android Browser | ||
this._onTouchMoveListener = DomUtils.addEventListener(document, 'touchmove', this._onTouchMove); | ||
this._onTouchUpListener = DomUtils.addEventListener(document, 'touchend', this._onTouchUp); | ||
} else if (type === 'mouse') { | ||
this._onMouseMoveListener = DomUtils.addEventListener(document, 'mousemove', this._onMouseMove); | ||
this._onMouseUpListener = DomUtils.addEventListener(document, 'mouseup', this._onMouseUp); | ||
} | ||
}, | ||
_removeEventHandles: function _removeEventHandles(type) { | ||
if (type === 'touch') { | ||
this._onTouchMoveListener.remove(); | ||
this._onTouchUpListener.remove(); | ||
} else if (type === 'mouse') { | ||
this._onMouseMoveListener.remove(); | ||
this._onMouseUpListener.remove(); | ||
} | ||
}, | ||
_start: function _start(position) { | ||
this._triggerEvents('onBeforeChange'); | ||
this.startValue = this.state.value; | ||
this.startPosition = position; | ||
}, | ||
_end: function _end(type) { | ||
this._removeEventHandles(type); | ||
this._triggerEvents('onAfterChange'); | ||
}, | ||
_onMouseUp: function _onMouseUp() { | ||
onMouseUp: function onMouseUp() { | ||
this._end('mouse'); | ||
}, | ||
_onTouchUp: function _onTouchUp() { | ||
onTouchUp: function onTouchUp() { | ||
this._end('touch'); | ||
}, | ||
_onMouseMove: function _onMouseMove(e) { | ||
onMouseMove: function onMouseMove(e) { | ||
var position = e.pageX; | ||
this._handleMove(e, position); | ||
this.onMove(e, position); | ||
}, | ||
_onTouchMove: function _onTouchMove(e) { | ||
onTouchMove: function onTouchMove(e) { | ||
if (e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) { | ||
@@ -236,6 +157,6 @@ this._end('touch'); | ||
this._handleMove(e, position); | ||
this.onMove(e, position); | ||
}, | ||
_handleMove: function _handleMove(e, position) { | ||
onMove: function onMove(e, position) { | ||
pauseEvent(e); | ||
@@ -251,12 +172,45 @@ var props = this.props; | ||
var diffValue = diffPosition / this.getSliderLength() * (props.max - props.min); | ||
var newValue = this._trimAlignValue(this.startValue + diffValue); | ||
value = this._trimAlignValue(this.startValue + diffValue); | ||
value = newValue; | ||
if (newValue !== oldValue) { | ||
if (value !== oldValue && !('value' in props) && !('index' in props)) { | ||
this.setState({ value: value }); | ||
this._triggerEvents('onChange'); | ||
} | ||
if (value !== oldValue) { | ||
this._triggerEvents('onChange', value); | ||
} | ||
}, | ||
onTouchStart: function onTouchStart(e) { | ||
if (e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0) { | ||
return; | ||
} | ||
var position = this._getTouchPosition(e); | ||
var value = this._calValueByPos(position); | ||
this._triggerEvents('onChange', value); | ||
this._start(position); | ||
this._addDocumentEvents('touch'); | ||
pauseEvent(e); | ||
}, | ||
onSliderMouseDown: function onSliderMouseDown(e) { | ||
var position = e.pageX; | ||
var value = this._calValueByPos(position); | ||
this._triggerEvents('onChange', value); | ||
this._start(position); | ||
this._addDocumentEvents('mouse'); | ||
pauseEvent(e); | ||
}, | ||
getIndex: function getIndex(v) { | ||
var props = this.props; | ||
var value = v === undefined ? this.state.value : v; | ||
if (props.marks.length === 0) { | ||
return Math.floor((value - props.min) / props.step); | ||
} | ||
var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5); | ||
return Math.round(value / unit); | ||
}, | ||
getSliderLength: function getSliderLength() { | ||
@@ -278,24 +232,2 @@ var slider = this.refs.slider; | ||
handleTouchStart: function handleTouchStart(e) { | ||
if (e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0) { | ||
return; | ||
} | ||
var position = this._getTouchPosition(e); | ||
this._calValueByPos(position); | ||
this._triggerEvents('onChange'); | ||
this._start(position); | ||
this._addEventHandles('touch'); | ||
pauseEvent(e); | ||
}, | ||
handleSliderMouseDown: function handleSliderMouseDown(e) { | ||
var position = e.pageX; | ||
this._calValueByPos(position); | ||
this._triggerEvents('onChange'); | ||
this._start(position); | ||
this._addEventHandles('mouse'); | ||
pauseEvent(e); | ||
}, | ||
renderSteps: function renderSteps() { | ||
@@ -325,6 +257,6 @@ var props = this.props; | ||
elements[i] = React.createElement('span', { className: className, style: style, ref: 'step' + i }); | ||
elements[i] = _react2['default'].createElement('span', { className: className, style: style, ref: 'step' + i, key: 'step' + i }); | ||
} | ||
return React.createElement( | ||
return _react2['default'].createElement( | ||
'div', | ||
@@ -363,5 +295,5 @@ { className: stepClassName }, | ||
return React.createElement( | ||
return _react2['default'].createElement( | ||
'span', | ||
{ className: className, style: style }, | ||
{ className: className, style: style, key: i }, | ||
this.props.marks[i] | ||
@@ -382,3 +314,3 @@ ); | ||
return React.createElement( | ||
return _react2['default'].createElement( | ||
'div', | ||
@@ -390,4 +322,4 @@ { className: className }, | ||
renderHandle: function renderHandle(offset) { | ||
var handleStyle = { | ||
renderHandler: function renderHandler(offset) { | ||
var onStyle = { | ||
left: offset | ||
@@ -399,23 +331,38 @@ }; | ||
var handle = React.createElement('div', { className: className, | ||
var events = {}; | ||
var tooltipVisible = undefined; | ||
if (this.state.dragging) { | ||
tooltipVisible = true; | ||
} else { | ||
events = { | ||
onMouseEnter: this.showTooltip.bind(this, true), | ||
onMouseLeave: this.showTooltip.bind(this, false) | ||
}; | ||
tooltipVisible = this.state.showTooltip; | ||
} | ||
var handle = _react2['default'].createElement('div', _extends({ className: className | ||
}, events, { | ||
ref: 'handle', | ||
style: handleStyle }); | ||
style: onStyle })); | ||
if (this.props.marks.length > 0) { | ||
return handle; | ||
} else { | ||
return React.createElement( | ||
Tooltip, | ||
{ | ||
placement: 'top', | ||
overlay: React.createElement( | ||
'span', | ||
null, | ||
this.state.value | ||
), | ||
delay: 0, | ||
prefixCls: prefixClsFn(prefixCls, 'tooltip') }, | ||
handle | ||
); | ||
} | ||
return _react2['default'].createElement( | ||
_rcTooltip2['default'], | ||
{ | ||
placement: { points: ['bc', 'tc'] }, | ||
visible: tooltipVisible, | ||
overlay: _react2['default'].createElement( | ||
'span', | ||
null, | ||
this.state.value | ||
), | ||
delay: 0, | ||
prefixCls: prefixClsFn(prefixCls, 'tooltip') }, | ||
handle | ||
); | ||
}, | ||
@@ -431,3 +378,3 @@ | ||
return React.createElement('div', { className: trackClassName, ref: 'track', style: style }); | ||
return _react2['default'].createElement('div', { className: trackClassName, ref: 'track', style: style }); | ||
}, | ||
@@ -440,11 +387,8 @@ | ||
var props = this.props; | ||
var value = state.value; | ||
var offset = this._calcOffset(value); | ||
var track = this.props.isIncluded ? this.renderTrack(offset) : null; | ||
var handles = this.renderHandle(offset); | ||
var ons = this.renderHandler(offset); | ||
var steps = props.step > 1 || props.marks.length > 0 ? this.renderSteps() : null; | ||
var sliderMarks = props.marks.length > 0 ? this.renderMarks() : null; | ||
var prefixCls = props.prefixCls; | ||
@@ -454,9 +398,9 @@ var disabled = props.disabled; | ||
return React.createElement( | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: rcUtil.classSet(sliderClassName), ref: 'slider', | ||
onTouchStart: disabled ? noop : this.handleTouchStart, | ||
onMouseDown: disabled ? noop : this.handleSliderMouseDown }, | ||
{ className: _rcUtil2['default'].classSet(sliderClassName), ref: 'slider', | ||
onTouchStart: disabled ? noop : this.onTouchStart, | ||
onMouseDown: disabled ? noop : this.onSliderMouseDown }, | ||
track, | ||
handles, | ||
ons, | ||
steps, | ||
@@ -466,5 +410,114 @@ sliderMarks, | ||
); | ||
}, | ||
showTooltip: function showTooltip(show) { | ||
this.setState({ | ||
showTooltip: show | ||
}); | ||
}, | ||
_trimAlignValue: function _trimAlignValue(v, propsArg) { | ||
var val = v; | ||
var props = propsArg || this.props; | ||
var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step; | ||
if (val <= props.min) { | ||
val = props.min; | ||
} | ||
if (val >= props.max) { | ||
val = props.max; | ||
} | ||
var valModStep = (val - props.min) % step; | ||
var alignValue = val - valModStep; | ||
if (Math.abs(valModStep) * 2 >= step) { | ||
alignValue += valModStep > 0 ? step : -step; | ||
} | ||
return parseFloat(alignValue.toFixed(5)); | ||
}, | ||
_calcOffset: function _calcOffset(value) { | ||
var ratio = (value - this.props.min) / (this.props.max - this.props.min); | ||
return ratio * 100 + '%'; | ||
}, | ||
_calcValue: function _calcValue(offset) { | ||
var ratio = offset / this.getSliderLength(); | ||
return ratio * (this.props.max - this.props.min) + this.props.min; | ||
}, | ||
_calValueByPos: function _calValueByPos(position) { | ||
var pixelOffset = position - this.getSliderStart(); | ||
// pixelOffset -= (this.state.onSize / 2); | ||
var nextValue = this._trimAlignValue(this._calcValue(pixelOffset)); | ||
this.setState({ | ||
value: nextValue | ||
}); | ||
return nextValue; | ||
}, | ||
_getTouchPosition: function _getTouchPosition(e) { | ||
var touch = e.touches[0]; | ||
return touch.pageX; | ||
}, | ||
_triggerEvents: function _triggerEvents(event, v) { | ||
var props = this.props; | ||
var hasMarks = props.marks && props.marks.length > 0; | ||
if (props[event]) { | ||
var data = undefined; | ||
if (hasMarks) { | ||
data = this.getIndex(v); | ||
} else if (v === undefined) { | ||
data = this.state.value; | ||
} else { | ||
data = v; | ||
} | ||
props[event](data); | ||
} | ||
}, | ||
_addDocumentEvents: function _addDocumentEvents(type) { | ||
if (type === 'touch') { | ||
// just work for chrome iOS Safari and Android Browser | ||
this.onTouchMoveListener = _rcUtil.Dom.addEventListener(document, 'touchmove', this.onTouchMove); | ||
this.onTouchUpListener = _rcUtil.Dom.addEventListener(document, 'touchend', this.onTouchUp); | ||
} else if (type === 'mouse') { | ||
this.onMouseMoveListener = _rcUtil.Dom.addEventListener(document, 'mousemove', this.onMouseMove); | ||
this.onMouseUpListener = _rcUtil.Dom.addEventListener(document, 'mouseup', this.onMouseUp); | ||
} | ||
}, | ||
_removeEventons: function _removeEventons(type) { | ||
if (type === 'touch') { | ||
this.onTouchMoveListener.remove(); | ||
this.onTouchUpListener.remove(); | ||
} else if (type === 'mouse') { | ||
this.onMouseMoveListener.remove(); | ||
this.onMouseUpListener.remove(); | ||
} | ||
}, | ||
_start: function _start(position) { | ||
this._triggerEvents('onBeforeChange'); | ||
this.startValue = this.state.value; | ||
this.startPosition = position; | ||
this.setState({ | ||
dragging: true | ||
}); | ||
}, | ||
_end: function _end(type) { | ||
this._removeEventons(type); | ||
this._triggerEvents('onAfterChange'); | ||
this.setState({ | ||
dragging: false, | ||
showTooltip: false | ||
}); | ||
} | ||
}); | ||
module.exports = Slider; | ||
exports['default'] = Slider; | ||
module.exports = exports['default']; |
{ | ||
"name": "rc-slider", | ||
"version": "1.3.1", | ||
"version": "1.4.0", | ||
"description": "slider ui component for react", | ||
@@ -20,2 +20,6 @@ "keywords": [ | ||
}, | ||
"files": [ | ||
"assets/*.css", | ||
"lib" | ||
], | ||
"licenses": "MIT", | ||
@@ -28,9 +32,7 @@ "main": "./lib/index.js", | ||
"build": "rc-tools run build", | ||
"precommit": "rc-tools run precommit", | ||
"less": "rc-tools run less", | ||
"gh-pages": "rc-tools run gh-pages", | ||
"history": "rc-tools run history", | ||
"start": "node --harmony node_modules/.bin/rc-server", | ||
"publish": "rc-tools run tag", | ||
"pub": "rc-tools run pub", | ||
"lint": "rc-tools run lint", | ||
"karma": "rc-tools run karma", | ||
"saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs", | ||
@@ -44,3 +46,3 @@ "browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test", | ||
"rc-server": "3.x", | ||
"rc-tools": "3.x", | ||
"rc-tools": "4.x", | ||
"react": "^0.13.x", | ||
@@ -51,8 +53,8 @@ "node-dev": "2.x", | ||
"precommit": [ | ||
"precommit" | ||
"lint" | ||
], | ||
"dependencies": { | ||
"rc-tooltip": "^2.4.0", | ||
"rc-util": "^2.0.2" | ||
"rc-tooltip": "2.x", | ||
"rc-util": "2.x" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
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
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
23202
567
Updatedrc-tooltip@2.x
Updatedrc-util@2.x