mirror of
https://github.com/wassname/slider.git
synced 2026-09-26 14:20:18 +08:00
491 lines
12 KiB
React
491 lines
12 KiB
React
import React from 'react';
|
|
import Tooltip from 'rc-tooltip';
|
|
import rcUtil, {Dom as DomUtils} from 'rc-util';
|
|
|
|
function noop() {
|
|
}
|
|
|
|
function pauseEvent(e) {
|
|
e.cancelBubble = true;
|
|
e.returnValue = false;
|
|
if (e.stopPropagation) {
|
|
e.stopPropagation();
|
|
}
|
|
if (e.preventDefault) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
function prefixClsFn(prefixCls, ...args) {
|
|
return args.map((s)=> {
|
|
return prefixCls + '-' + s;
|
|
}).join(' ');
|
|
}
|
|
|
|
function getValueFromIndex(props) {
|
|
let value;
|
|
const marksLen = props.marks.length;
|
|
let index;
|
|
if ('index' in props) {
|
|
index = props.index;
|
|
} else {
|
|
index = props.defaultIndex;
|
|
}
|
|
if (marksLen > 0) {
|
|
value = ((props.max - props.min) / (marksLen - 1)) * (index);
|
|
value = value.toFixed(5) / 1;
|
|
}
|
|
return value;
|
|
}
|
|
|
|
const Slider = React.createClass({
|
|
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,
|
|
prefixCls: React.PropTypes.string,
|
|
disabled: React.PropTypes.bool,
|
|
children: React.PropTypes.any,
|
|
onBeforeChange: React.PropTypes.func,
|
|
onChange: React.PropTypes.func,
|
|
onAfterChange: React.PropTypes.func,
|
|
tipTransitionName: React.PropTypes.string,
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
defaultValue: 0,
|
|
marks: [],
|
|
isIncluded: true,
|
|
className: '',
|
|
prefixCls: 'rc-slider',
|
|
disabled: false,
|
|
defaultIndex: 0,
|
|
tipTransitionName: '',
|
|
};
|
|
},
|
|
|
|
getInitialState() {
|
|
const props = this.props;
|
|
let value = props.defaultValue;
|
|
if ('value' in props) {
|
|
value = props.value;
|
|
}
|
|
value = this._trimAlignValue(value);
|
|
const marksLen = props.marks.length;
|
|
if (marksLen > 0) {
|
|
value = getValueFromIndex(props);
|
|
}
|
|
return {
|
|
dragging: false,
|
|
showTooltip: false,
|
|
value: value,
|
|
};
|
|
},
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if ('value' in nextProps) {
|
|
this.setState({
|
|
value: nextProps.value,
|
|
});
|
|
} else if ('index' in nextProps) {
|
|
this.setState({
|
|
value: getValueFromIndex(nextProps),
|
|
});
|
|
}
|
|
},
|
|
|
|
onMouseUp(e) {
|
|
const m = e.target;
|
|
const handleDom = React.findDOMNode(this.refs.handle);
|
|
let showToolTip = false;
|
|
if (m === handleDom) {
|
|
showToolTip = true;
|
|
}
|
|
this._end('mouse', showToolTip);
|
|
},
|
|
|
|
onTouchUp() {
|
|
this._end('touch');
|
|
},
|
|
|
|
onMouseMove(e) {
|
|
const position = e.pageX || (e.clientX + document.documentElement.scrollLeft); // to compat ie8
|
|
this.onMove(e, position);
|
|
},
|
|
|
|
onTouchMove(e) {
|
|
if (e.touches.length > 1 || (e.type === 'touchend' && e.touches.length > 0)) {
|
|
this._end('touch');
|
|
return;
|
|
}
|
|
|
|
const position = this._getTouchPosition(e);
|
|
|
|
this.onMove(e, position);
|
|
},
|
|
|
|
onMove(e, position) {
|
|
pauseEvent(e);
|
|
const props = this.props;
|
|
const state = this.state;
|
|
|
|
let value = state.value;
|
|
const oldValue = value;
|
|
|
|
const diffPosition = position - this.startPosition;
|
|
|
|
const diffValue = diffPosition / this.getSliderLength() * (props.max - props.min);
|
|
value = this._trimAlignValue(this.startValue + diffValue);
|
|
|
|
if (value !== oldValue && !('value' in props) && !('index' in props)) {
|
|
this.setState({value: value});
|
|
}
|
|
if (value !== oldValue) {
|
|
this._triggerEvents('onChange', value);
|
|
}
|
|
},
|
|
|
|
onTouchStart(e) {
|
|
if (e.touches.length > 1 || (e.type.toLowerCase() === 'touchend' && e.touches.length > 0)) {
|
|
return;
|
|
}
|
|
|
|
const position = this._getTouchPosition(e);
|
|
const value = this._calValueByPos(position);
|
|
this._triggerEvents('onChange', value);
|
|
this._start(position);
|
|
this._addDocumentEvents('touch');
|
|
pauseEvent(e);
|
|
},
|
|
|
|
onSliderMouseDown(e) {
|
|
const position = e.pageX || (e.clientX + document.documentElement.scrollLeft); // to compat ie8
|
|
const value = this._calValueByPos(position);
|
|
this._triggerEvents('onChange', value);
|
|
this._start(position);
|
|
this._addDocumentEvents('mouse');
|
|
pauseEvent(e);
|
|
},
|
|
|
|
getIndex(v) {
|
|
const props = this.props;
|
|
const value = v === undefined ? this.state.value : v;
|
|
|
|
if (props.marks.length === 0) {
|
|
return Math.floor((value - props.min) / props.step);
|
|
}
|
|
const unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5);
|
|
return Math.round(value / unit);
|
|
},
|
|
|
|
getSliderLength() {
|
|
const slider = this.refs.slider;
|
|
if (!slider) {
|
|
return 0;
|
|
}
|
|
|
|
return slider.getDOMNode().clientWidth;
|
|
},
|
|
|
|
getSliderStart() {
|
|
const slider = this.refs.slider.getDOMNode();
|
|
const rect = slider.getBoundingClientRect();
|
|
|
|
return rect.left;
|
|
},
|
|
|
|
renderSteps() {
|
|
const props = this.props;
|
|
const marksLen = props.marks.length;
|
|
const stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
|
|
const unit = 100 / (stepNum - 1);
|
|
|
|
const prefixCls = props.prefixCls;
|
|
const stepClassName = prefixClsFn(prefixCls, 'step');
|
|
|
|
const elements = [];
|
|
for (let i = 0; i < stepNum; i++) {
|
|
const offset = unit * i + '%';
|
|
const style = {
|
|
left: offset,
|
|
};
|
|
let className = prefixClsFn(prefixCls, 'dot');
|
|
if (props.isIncluded) {
|
|
if (i <= this.getIndex()) {
|
|
className = prefixClsFn(prefixCls, 'dot', 'dot-active');
|
|
}
|
|
} else {
|
|
className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
|
|
}
|
|
|
|
elements[i] = (
|
|
<span className={className} style={style} ref={'step' + i} key={'step' + i}></span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={stepClassName}>
|
|
{elements}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
renderMark(i) {
|
|
const marks = this.props.marks;
|
|
const marksLen = marks.length;
|
|
const unit = 100 / (marksLen - 1);
|
|
const offset = unit * i;
|
|
|
|
const style = {
|
|
width: unit / 2 + '%',
|
|
};
|
|
|
|
if (i === marksLen - 1) {
|
|
style.right = -unit / 4 + '%';
|
|
} else {
|
|
style.left = i > 0 ? offset - unit / 4 + '%' : -unit / 4 + '%';
|
|
}
|
|
|
|
const prefixCls = this.props.prefixCls;
|
|
let className = prefixClsFn(prefixCls, 'mark-text');
|
|
|
|
if (this.props.isIncluded) {
|
|
if (i <= this.getIndex()) {
|
|
className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
|
|
}
|
|
} else {
|
|
className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'mark-text', 'mark-text-active') : className;
|
|
}
|
|
|
|
return (
|
|
<span className={className} style={style} key={i}>{this.props.marks[i]}</span>
|
|
);
|
|
},
|
|
|
|
renderMarks() {
|
|
const marks = this.props.marks;
|
|
const marksLen = marks.length;
|
|
const elements = [];
|
|
for (let i = 0; i < marksLen; i++) {
|
|
elements[i] = this.renderMark(i);
|
|
}
|
|
|
|
const prefixCls = this.props.prefixCls;
|
|
const className = prefixClsFn(prefixCls, 'mark');
|
|
|
|
return (
|
|
<div className={className}>
|
|
{elements}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
renderHandler(offset) {
|
|
const onStyle = {
|
|
left: offset,
|
|
};
|
|
|
|
const prefixCls = this.props.prefixCls;
|
|
const className = prefixClsFn(prefixCls, 'handle');
|
|
|
|
let events = {};
|
|
|
|
let tooltipVisible;
|
|
|
|
if (this.state.dragging) {
|
|
tooltipVisible = true;
|
|
} else {
|
|
events = {
|
|
onClick: this.showTooltip.bind(this, true),
|
|
onMouseEnter: this.showTooltip.bind(this, true),
|
|
onMouseLeave: this.showTooltip.bind(this, false),
|
|
};
|
|
tooltipVisible = this.state.showTooltip;
|
|
}
|
|
|
|
const handle = (<div className={className}
|
|
{...events}
|
|
ref="handle"
|
|
style={onStyle}></div>);
|
|
|
|
if (this.props.marks.length > 0) {
|
|
return handle;
|
|
}
|
|
return (
|
|
<Tooltip
|
|
placement={{points: ['bc', 'tc']}}
|
|
visible={tooltipVisible}
|
|
overlay={<span>{this.state.value}</span>}
|
|
delay={0}
|
|
transitionName={this.props.tipTransitionName}
|
|
prefixCls={prefixClsFn(prefixCls, 'tooltip')}>
|
|
{handle}
|
|
</Tooltip>
|
|
);
|
|
},
|
|
|
|
renderTrack(offset) {
|
|
const style = {
|
|
width: offset,
|
|
};
|
|
|
|
const prefixCls = this.props.prefixCls;
|
|
const trackClassName = prefixClsFn(prefixCls, 'track');
|
|
|
|
return (
|
|
<div className={trackClassName} ref="track" style={style}></div>
|
|
);
|
|
},
|
|
|
|
render() {
|
|
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,
|
|
};
|
|
|
|
return (
|
|
<div className={rcUtil.classSet(sliderClassName)} ref="slider"
|
|
onTouchStart={disabled ? noop : this.onTouchStart}
|
|
onMouseDown={disabled ? noop : this.onSliderMouseDown}>
|
|
{track}
|
|
{ons}
|
|
{steps}
|
|
{sliderMarks}
|
|
{this.props.children}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
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, showToolTip) {
|
|
this._removeEventons(type);
|
|
this._triggerEvents('onAfterChange');
|
|
this.setState({
|
|
dragging: false,
|
|
showTooltip: !!showToolTip,
|
|
});
|
|
},
|
|
});
|
|
|
|
export default Slider;
|