@@ -373,40 +283,55 @@ var Slider = React.createClass({
);
},
- renderHandle(offset) {
- var handleStyle = {
- left: offset
+ renderHandler(offset) {
+ const onStyle = {
+ left: offset,
};
- var prefixCls = this.props.prefixCls;
- var className = prefixClsFn(prefixCls, 'handle');
+ const prefixCls = this.props.prefixCls;
+ const className = prefixClsFn(prefixCls, 'handle');
- var handle =
;
+ let events = {};
+
+ let tooltipVisible;
+
+ if (this.state.dragging) {
+ tooltipVisible = true;
+ } else {
+ events = {
+ onMouseEnter: this.showTooltip.bind(this, true),
+ onMouseLeave: this.showTooltip.bind(this, false),
+ };
+ tooltipVisible = this.state.showTooltip;
+ }
+
+ const handle = (
);
if (this.props.marks.length > 0) {
return handle;
- } else {
- return (
-
{this.state.value}}
- delay={0}
- prefixCls={prefixClsFn(prefixCls, 'tooltip')}>
- {handle}
-
- );
}
+ return (
+
{this.state.value}}
+ delay={0}
+ prefixCls={prefixClsFn(prefixCls, 'tooltip')}>
+ {handle}
+
+ );
},
renderTrack(offset) {
- var style = {
- width: offset
+ const style = {
+ width: offset,
};
- var prefixCls = this.props.prefixCls;
- var trackClassName = prefixClsFn(prefixCls, 'track');
+ const prefixCls = this.props.prefixCls;
+ const trackClassName = prefixClsFn(prefixCls, 'track');
return (
@@ -414,37 +339,142 @@ var Slider = React.createClass({
},
render() {
- var state = this.state;
- 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 steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null;
- var sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null;
-
- var prefixCls = props.prefixCls;
- var disabled = props.disabled;
- var sliderClassName = {
+ const state = this.state;
+ const props = this.props;
+ const value = state.value;
+ const offset = this._calcOffset(value);
+ const track = this.props.isIncluded ? this.renderTrack(offset) : null;
+ const ons = this.renderHandler(offset);
+ const steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null;
+ const sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null;
+ const prefixCls = props.prefixCls;
+ const disabled = props.disabled;
+ const sliderClassName = {
[prefixCls]: 1,
[props.className]: !!props.className,
- [`${prefixCls}-disabled`]: disabled
+ [`${prefixCls}-disabled`]: disabled,
};
return (
+ onTouchStart={disabled ? noop : this.onTouchStart}
+ onMouseDown={disabled ? noop : this.onSliderMouseDown}>
{track}
- {handles}
+ {ons}
{steps}
{sliderMarks}
{this.props.children}
);
- }
+ },
+
+ showTooltip(show) {
+ this.setState({
+ showTooltip: show,
+ });
+ },
+
+ _trimAlignValue(v, propsArg) {
+ let val = v;
+ const props = propsArg || this.props;
+ const 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;
+ }
+
+ const valModStep = (val - props.min) % step;
+ let alignValue = val - valModStep;
+
+ if (Math.abs(valModStep) * 2 >= step) {
+ alignValue += (valModStep > 0) ? step : (-step);
+ }
+
+ return parseFloat(alignValue.toFixed(5));
+ },
+
+ _calcOffset(value) {
+ const ratio = (value - this.props.min) / (this.props.max - this.props.min);
+ return ratio * 100 + '%';
+ },
+
+ _calcValue(offset) {
+ const ratio = offset / this.getSliderLength();
+ return ratio * (this.props.max - this.props.min) + this.props.min;
+ },
+
+ _calValueByPos(position) {
+ const pixelOffset = position - this.getSliderStart();
+ // pixelOffset -= (this.state.onSize / 2);
+ const nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
+ this.setState({
+ value: nextValue,
+ });
+ return nextValue;
+ },
+
+ _getTouchPosition(e) {
+ const touch = e.touches[0];
+ return touch.pageX;
+ },
+
+ _triggerEvents(event, v) {
+ const props = this.props;
+ const hasMarks = props.marks && props.marks.length > 0;
+ if (props[event]) {
+ let data;
+ if (hasMarks) {
+ data = this.getIndex(v);
+ } else if (v === undefined) {
+ data = this.state.value;
+ } else {
+ data = v;
+ }
+ props[event](data);
+ }
+ },
+
+ _addDocumentEvents(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);
+ }
+ },
+
+ _removeEventons(type) {
+ if (type === 'touch') {
+ this.onTouchMoveListener.remove();
+ this.onTouchUpListener.remove();
+ } else if (type === 'mouse') {
+ this.onMouseMoveListener.remove();
+ this.onMouseUpListener.remove();
+ }
+ },
+
+ _start(position) {
+ this._triggerEvents('onBeforeChange');
+ this.startValue = this.state.value;
+ this.startPosition = position;
+ this.setState({
+ dragging: true,
+ });
+ },
+
+ _end(type) {
+ this._removeEventons(type);
+ this._triggerEvents('onAfterChange');
+ this.setState({
+ dragging: false,
+ showTooltip: false,
+ });
+ },
});
-module.exports = Slider;
+export default Slider;
diff --git a/src/index.js b/src/index.js
index a04f92d..bab7aa8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,2 @@
-'use strict';
module.exports = require('./Slider');
diff --git a/tests/index.spec.js b/tests/index.spec.js
index dd46fcc..96cfe7b 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -1,4 +1,3 @@
-'use strict';
var expect = require('expect.js');
var Slider = require('../index.js');
@@ -6,6 +5,7 @@ var React = require('react');
var TestUtils = React.addons.TestUtils;
var Simulate = TestUtils.Simulate;
var $ = require('jquery');
+require('../assets/index.less');
describe('rc-slider', function () {
this.timeout(5000);