wassname/slider
1
0
Fork 0
mirror of https://github.com/wassname/slider.git synced 2026-09-11 12:42:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjy Cui
2016-12-06 09:47:04 +08:00
parent 3676e86d32
commit ac4c969e46
10 changed files with 219 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/common.js
+199 -196
View File
@@ -21246,18 +21246,26 @@
props.onChange(changedValue);
};
Slider.prototype.onMouseMove = function onMouseMove(e) {
var position = getMousePosition(this.props.vertical, e);
this.onMove(e, position - this.dragOffset);
};
Slider.prototype.onTouchMove = function onTouchMove(e) {
if (isNotTouchEvent(e)) {
this.end('touch');
Slider.prototype.onMouseDown = function onMouseDown(e) {
if (e.button !== 0) {
return;
}
var position = getTouchPosition(this.props.vertical, e);
var position = getMousePosition(this.props.vertical, e);
if (!this.isEventFromHandle(e)) {
this.dragOffset = 0;
} else {
var handlePosition = getHandleCenterPosition(this.props.vertical, e.target);
this.dragOffset = position - handlePosition;
position = handlePosition;
}
this.onStart(position);
this.addDocumentEvents('mouse');
pauseEvent(e);
};
Slider.prototype.onMouseMove = function onMouseMove(e) {
var position = getMousePosition(this.props.vertical, e);
this.onMove(e, position - this.dragOffset);
};
@@ -21292,40 +21300,6 @@
});
};
Slider.prototype.onTouchStart = function onTouchStart(e) {
if (isNotTouchEvent(e)) return;
var position = getTouchPosition(this.props.vertical, e);
if (!this.isEventFromHandle(e)) {
this.dragOffset = 0;
} else {
var handlePosition = getHandleCenterPosition(this.props.vertical, e.target);
this.dragOffset = position - handlePosition;
position = handlePosition;
}
this.onStart(position);
this.addDocumentEvents('touch');
pauseEvent(e);
};
Slider.prototype.onMouseDown = function onMouseDown(e) {
if (e.button !== 0) {
return;
}
var position = getMousePosition(this.props.vertical, e);
if (!this.isEventFromHandle(e)) {
this.dragOffset = 0;
} else {
var handlePosition = getHandleCenterPosition(this.props.vertical, e.target);
this.dragOffset = position - handlePosition;
position = handlePosition;
}
this.onStart(position);
this.addDocumentEvents('mouse');
pauseEvent(e);
};
Slider.prototype.onStart = function onStart(position) {
var props = this.props;
props.onBeforeChange(this.getValue());
@@ -21374,35 +21348,30 @@
this.onChange({ bounds: nextBounds });
};
Slider.prototype.getValue = function getValue() {
var bounds = this.state.bounds;
return this.props.range ? bounds : bounds[1];
};
Slider.prototype.getSliderLength = function getSliderLength() {
var slider = this.refs.slider;
if (!slider) {
return 0;
Slider.prototype.onTouchMove = function onTouchMove(e) {
if (isNotTouchEvent(e)) {
this.end('touch');
return;
}
return this.props.vertical ? slider.clientHeight : slider.clientWidth;
var position = getTouchPosition(this.props.vertical, e);
this.onMove(e, position - this.dragOffset);
};
Slider.prototype.getSliderStart = function getSliderStart() {
var slider = this.refs.slider;
var rect = slider.getBoundingClientRect();
Slider.prototype.onTouchStart = function onTouchStart(e) {
if (isNotTouchEvent(e)) return;
return this.props.vertical ? rect.top : rect.left;
};
Slider.prototype.getPrecision = function getPrecision(step) {
var stepString = step.toString();
var precision = 0;
if (stepString.indexOf('.') >= 0) {
precision = stepString.length - stepString.indexOf('.') - 1;
var position = getTouchPosition(this.props.vertical, e);
if (!this.isEventFromHandle(e)) {
this.dragOffset = 0;
} else {
var handlePosition = getHandleCenterPosition(this.props.vertical, e.target);
this.dragOffset = position - handlePosition;
position = handlePosition;
}
return precision;
this.onStart(position);
this.addDocumentEvents('touch');
pauseEvent(e);
};
/**
@@ -21435,6 +21404,80 @@
return this._getPointsCache.points;
};
Slider.prototype.getPrecision = function getPrecision(step) {
var stepString = step.toString();
var precision = 0;
if (stepString.indexOf('.') >= 0) {
precision = stepString.length - stepString.indexOf('.') - 1;
}
return precision;
};
Slider.prototype.getSliderLength = function getSliderLength() {
var slider = this.refs.slider;
if (!slider) {
return 0;
}
return this.props.vertical ? slider.clientHeight : slider.clientWidth;
};
Slider.prototype.getSliderStart = function getSliderStart() {
var slider = this.refs.slider;
var rect = slider.getBoundingClientRect();
return this.props.vertical ? rect.top : rect.left;
};
Slider.prototype.getValue = function getValue() {
var bounds = this.state.bounds;
return this.props.range ? bounds : bounds[1];
};
Slider.prototype.addDocumentEvents = function addDocumentEvents(type) {
if (type === 'touch') {
// just work for chrome iOS Safari and Android Browser
this.onTouchMoveListener = (0, _addEventListener2.default)(document, 'touchmove', this.onTouchMove.bind(this));
this.onTouchUpListener = (0, _addEventListener2.default)(document, 'touchend', this.end.bind(this, 'touch'));
} else if (type === 'mouse') {
this.onMouseMoveListener = (0, _addEventListener2.default)(document, 'mousemove', this.onMouseMove.bind(this));
this.onMouseUpListener = (0, _addEventListener2.default)(document, 'mouseup', this.end.bind(this, 'mouse'));
}
};
Slider.prototype.calcOffset = function calcOffset(value) {
var _props2 = this.props,
min = _props2.min,
max = _props2.max;
var ratio = (value - min) / (max - min);
return ratio * 100;
};
Slider.prototype.calcValue = function calcValue(offset) {
var _props3 = this.props,
vertical = _props3.vertical,
min = _props3.min,
max = _props3.max;
var ratio = Math.abs(offset / this.getSliderLength());
var value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
return value;
};
Slider.prototype.calcValueByPos = function calcValueByPos(position) {
var pixelOffset = position - this.getSliderStart();
var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
return nextValue;
};
Slider.prototype.end = function end(type) {
this.removeEvents(type);
this.props.onAfterChange(this.getValue());
this.setState({ handle: null });
};
Slider.prototype.isEventFromHandle = function isEventFromHandle(e) {
var _this3 = this;
@@ -21447,17 +21490,89 @@
return value < props.min || value > props.max;
};
Slider.prototype.pushHandle = function pushHandle(bounds, handle, direction, amount) {
var originalValue = bounds[handle];
var currentValue = bounds[handle];
while (direction * (currentValue - originalValue) < amount) {
if (!this.pushHandleOnePoint(bounds, handle, direction)) {
// can't push handle enough to create the needed `amount` gap, so we
// revert its position to the original value
bounds[handle] = originalValue;
return false;
}
currentValue = bounds[handle];
}
// the handle was pushed enough to create the needed `amount` gap
return true;
};
Slider.prototype.pushHandleOnePoint = function pushHandleOnePoint(bounds, handle, direction) {
var points = this.getPoints();
var pointIndex = points.indexOf(bounds[handle]);
var nextPointIndex = pointIndex + direction;
if (nextPointIndex >= points.length || nextPointIndex < 0) {
// reached the minimum or maximum available point, can't push anymore
return false;
}
var nextHandle = handle + direction;
var nextValue = points[nextPointIndex];
var threshold = this.props.pushable;
var diffToNext = direction * (bounds[nextHandle] - nextValue);
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
// couldn't push next handle, so we won't push this one either
return false;
}
// push the handle
bounds[handle] = nextValue;
return true;
};
Slider.prototype.pushSurroundingHandles = function pushSurroundingHandles(bounds, handle, originalValue) {
var threshold = this.props.pushable;
var value = bounds[handle];
var direction = 0;
if (bounds[handle + 1] - value < threshold) {
direction = +1;
} else if (value - bounds[handle - 1] < threshold) {
direction = -1;
}
if (direction === 0) {
return;
}
var nextHandle = handle + direction;
var diffToNext = direction * (bounds[nextHandle] - value);
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
// revert to original value if pushing is impossible
bounds[handle] = originalValue;
}
};
Slider.prototype.removeEvents = function removeEvents(type) {
if (type === 'touch') {
this.onTouchMoveListener.remove();
this.onTouchUpListener.remove();
} else if (type === 'mouse') {
this.onMouseMoveListener.remove();
this.onMouseUpListener.remove();
}
};
Slider.prototype.trimAlignValue = function trimAlignValue(v, nextProps) {
var state = this.state || {};
var handle = state.handle,
bounds = state.bounds;
var _props2 = (0, _extends3.default)({}, this.props, nextProps || {}),
marks = _props2.marks,
step = _props2.step,
min = _props2.min,
max = _props2.max,
allowCross = _props2.allowCross;
var _props4 = (0, _extends3.default)({}, this.props, nextProps || {}),
marks = _props4.marks,
step = _props4.step,
min = _props4.min,
max = _props4.max,
allowCross = _props4.allowCross;
var val = v;
if (val <= min) {
@@ -21489,121 +21604,6 @@
return step !== null ? parseFloat(closestPoint.toFixed(this.getPrecision(step))) : closestPoint;
};
Slider.prototype.pushHandleOnePoint = function pushHandleOnePoint(bounds, handle, direction) {
var points = this.getPoints();
var pointIndex = points.indexOf(bounds[handle]);
var nextPointIndex = pointIndex + direction;
if (nextPointIndex >= points.length || nextPointIndex < 0) {
// reached the minimum or maximum available point, can't push anymore
return false;
}
var nextHandle = handle + direction;
var nextValue = points[nextPointIndex];
var threshold = this.props.pushable;
var diffToNext = direction * (bounds[nextHandle] - nextValue);
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
// couldn't push next handle, so we won't push this one either
return false;
}
// push the handle
bounds[handle] = nextValue;
return true;
};
Slider.prototype.pushHandle = function pushHandle(bounds, handle, direction, amount) {
var originalValue = bounds[handle];
var currentValue = bounds[handle];
while (direction * (currentValue - originalValue) < amount) {
if (!this.pushHandleOnePoint(bounds, handle, direction)) {
// can't push handle enough to create the needed `amount` gap, so we
// revert its position to the original value
bounds[handle] = originalValue;
return false;
}
currentValue = bounds[handle];
}
// the handle was pushed enough to create the needed `amount` gap
return true;
};
Slider.prototype.pushSurroundingHandles = function pushSurroundingHandles(bounds, handle, originalValue) {
var threshold = this.props.pushable;
var value = bounds[handle];
var direction = 0;
if (bounds[handle + 1] - value < threshold) {
direction = +1;
} else if (value - bounds[handle - 1] < threshold) {
direction = -1;
}
if (direction === 0) {
return;
}
var nextHandle = handle + direction;
var diffToNext = direction * (bounds[nextHandle] - value);
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
// revert to original value if pushing is impossible
bounds[handle] = originalValue;
}
};
Slider.prototype.calcOffset = function calcOffset(value) {
var _props3 = this.props,
min = _props3.min,
max = _props3.max;
var ratio = (value - min) / (max - min);
return ratio * 100;
};
Slider.prototype.calcValue = function calcValue(offset) {
var _props4 = this.props,
vertical = _props4.vertical,
min = _props4.min,
max = _props4.max;
var ratio = Math.abs(offset / this.getSliderLength());
var value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
return value;
};
Slider.prototype.calcValueByPos = function calcValueByPos(position) {
var pixelOffset = position - this.getSliderStart();
var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
return nextValue;
};
Slider.prototype.addDocumentEvents = function addDocumentEvents(type) {
if (type === 'touch') {
// just work for chrome iOS Safari and Android Browser
this.onTouchMoveListener = (0, _addEventListener2.default)(document, 'touchmove', this.onTouchMove.bind(this));
this.onTouchUpListener = (0, _addEventListener2.default)(document, 'touchend', this.end.bind(this, 'touch'));
} else if (type === 'mouse') {
this.onMouseMoveListener = (0, _addEventListener2.default)(document, 'mousemove', this.onMouseMove.bind(this));
this.onMouseUpListener = (0, _addEventListener2.default)(document, 'mouseup', this.end.bind(this, 'mouse'));
}
};
Slider.prototype.removeEvents = function removeEvents(type) {
if (type === 'touch') {
this.onTouchMoveListener.remove();
this.onTouchUpListener.remove();
} else if (type === 'mouse') {
this.onMouseMoveListener.remove();
this.onMouseUpListener.remove();
}
};
Slider.prototype.end = function end(type) {
this.removeEvents(type);
this.props.onAfterChange(this.getValue());
this.setState({ handle: null });
};
Slider.prototype.render = function render() {
var _this4 = this,
_classNames3;
@@ -21660,6 +21660,7 @@
value: v,
offset: offsets[i],
dragging: handle === i,
index: i,
key: i,
ref: 'handle-' + i
}));
@@ -24088,18 +24089,18 @@
return _this;
}
Handle.prototype.showTooltip = function showTooltip() {
this.setState({
isTooltipVisible: true
});
};
Handle.prototype.hideTooltip = function hideTooltip() {
this.setState({
isTooltipVisible: false
});
};
Handle.prototype.showTooltip = function showTooltip() {
this.setState({
isTooltipVisible: true
});
};
Handle.prototype.render = function render() {
var _props = this.props,
prefixCls = _props.prefixCls,
@@ -24111,7 +24112,8 @@
offset = _props.offset,
value = _props.value,
dragging = _props.dragging,
noTip = _props.noTip;
noTip = _props.noTip,
index = _props.index;
var style = vertical ? { bottom: offset + '%' } : { left: offset + '%' };
@@ -24135,7 +24137,7 @@
overlay: _react2.default.createElement(
'span',
null,
tipFormatter(value)
tipFormatter(value, index)
),
delay: 0,
transitionName: tipTransitionName
@@ -24160,7 +24162,8 @@
tipFormatter: _react2.default.PropTypes.func,
value: _react2.default.PropTypes.number,
dragging: _react2.default.PropTypes.bool,
noTip: _react2.default.PropTypes.bool
noTip: _react2.default.PropTypes.bool,
index: _react2.default.PropTypes.number
};
module.exports = exports['default'];
examples/common.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/custom-handles.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>custom-handles.js - example - rc-slider@5.3.5</title>
<title>custom-handles.js - example - rc-slider@5.4.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
<p>slider ui component for react</p>
</div>
examples/marks.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>marks.js - example - rc-slider@5.3.5</title>
<title>marks.js - example - rc-slider@5.4.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
<p>slider ui component for react</p>
</div>
examples/range.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>range.js - example - rc-slider@5.3.5</title>
<title>range.js - example - rc-slider@5.4.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
<p>slider ui component for react</p>
</div>
examples/slider.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>slider.js - example - rc-slider@5.3.5</title>
<title>slider.js - example - rc-slider@5.4.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
<p>slider ui component for react</p>
</div>
examples/v-marks.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-marks.js - example - rc-slider@5.3.5</title>
<title>v-marks.js - example - rc-slider@5.4.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
<p>slider ui component for react</p>
</div>
examples/v-range.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-range.js - example - rc-slider@5.3.5</title>
<title>v-range.js - example - rc-slider@5.4.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
<p>slider ui component for react</p>
</div>
examples/v-slider.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-slider.js - example - rc-slider@5.3.5</title>
<title>v-slider.js - example - rc-slider@5.4.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
<p>slider ui component for react</p>
</div>
index.html
+5 -5
View File
@@ -7,7 +7,7 @@
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<title>rc-slider@5.3.5 - slider ui component for react</title>
<title>rc-slider@5.4.0 - slider ui component for react</title>
<style>
@font-face {
font-family: octicons-anchor;
@@ -737,7 +737,7 @@
<body>
<div class="header">
<h1>rc-slider@5.3.5</h1>
<h1>rc-slider@5.4.0</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>
@@ -786,8 +786,8 @@
<span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">var</span> Rcslider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Rcslider</span> /&gt;</span>, container);</span></code></pre></div><h2>API<a id="user-content-api" name="api" class="anchor" aria-hidden="true" href="#api"><span class="octicon octicon-link"></span></a></h2><h3>props<a id="user-content-props" name="props" class="anchor" aria-hidden="true" href="#props"><span class="octicon octicon-link"></span></a></h3><table class="table table-bordered table-striped">
<span class="hljs-keyword">var</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> /&gt;</span>, container);</span></code></pre></div><h2>API<a id="user-content-api" name="api" class="anchor" aria-hidden="true" href="#api"><span class="octicon octicon-link"></span></a></h2><h3>props<a id="user-content-props" name="props" class="anchor" aria-hidden="true" href="#props"><span class="octicon octicon-link"></span></a></h3><table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">name</th>
@@ -891,7 +891,7 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
<td>tipFormatter</td>
<td>function or <code>null</code></td>
<td></td>
<td>Format the value of the tooltip if it shows. If <code>null</code> the tooltip will always be hidden.</td>
<td>Format the value of the tooltip if it shows. If <code>null</code> the tooltip will always be hidden. When given a function, the first argument will be the value and the second will be the index of the slider handle.</td>
</tr>
<tr>
<td>dots</td>