mirror of
https://github.com/wassname/slider.git
synced 2026-09-10 12:38:09 +08:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6db366a0c5 | ||
|
|
2a5f28c60e | ||
|
|
c4f3f5d20d | ||
|
|
5e84fa0e1e | ||
|
|
8873210873 | ||
|
|
b96e4757ea |
+5
-7
@@ -7,31 +7,29 @@ var ReactDOM = require('react-dom');
|
||||
var Slider = require('rc-slider');
|
||||
var style = {width:400,margin:50};
|
||||
|
||||
function onChange(v) {
|
||||
console.log(v);
|
||||
}
|
||||
var log = console.log.bind(console);
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={style}>
|
||||
<p>基础滑块</p>
|
||||
<Slider onChange={onChange} tipTransitionName='rc-slider-tooltip-zoom-down' />
|
||||
<Slider onChange={log} tipTransitionName='rc-slider-tooltip-zoom-down' />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>基础滑块,step=20</p>
|
||||
<Slider step={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>基础滑块,step=20 带原点</p>
|
||||
<p>基础滑块,step=20 带圆点</p>
|
||||
<Slider dots step={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>双滑块</p>
|
||||
<Slider range min={10} max={90} defaultValue={[0, 30]} onChange={onChange} />
|
||||
<Slider range min={10} max={90} defaultValue={[0, 30]} onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>双滑块,step=20 </p>
|
||||
<Slider range dots step={20} defaultValue={[0, 30]} onChange={onChange} included={false} />
|
||||
<Slider range dots step={20} defaultValue={[0, 30]} onAfterChange={log} included={false} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>分段式滑块(包含关系)</p>
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rc-slider",
|
||||
"version": "2.1.0",
|
||||
"version": "2.2.0",
|
||||
"description": "slider ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
+12
-31
@@ -114,21 +114,9 @@ class Slider extends React.Component {
|
||||
if (value === oldValue) return;
|
||||
|
||||
if (!('value' in props) && !('index' in props)) {
|
||||
this.setState({[state.handle]: value});
|
||||
}
|
||||
|
||||
if (props.range) {
|
||||
// `this.state` will not be updated immediately after `this.setState`.
|
||||
// So, create a similar object.
|
||||
// const data = Object.assign({}, state, {[state.handle]: value});
|
||||
const data = {
|
||||
upperBound: state.upperBound,
|
||||
lowerBound: state.lowerBound,
|
||||
};
|
||||
data[state.handle] = value;
|
||||
this.triggerEvents('onChange', [data.lowerBound, data.upperBound]);
|
||||
} else {
|
||||
this.triggerEvents('onChange', value);
|
||||
this.setState({[state.handle]: value}, () => {
|
||||
this.triggerEvents('onChange', this.getValue());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,19 +167,14 @@ class Slider extends React.Component {
|
||||
handle: valueNeedChanging,
|
||||
recent: valueNeedChanging,
|
||||
[valueNeedChanging]: value,
|
||||
}, () => {
|
||||
this.triggerEvents('onChange', this.getValue());
|
||||
});
|
||||
}
|
||||
|
||||
if (this.props.range) {
|
||||
// const data = Object.assign({}, state, {[valueNeedChanging]: value});
|
||||
const data = {
|
||||
upperBound: state.upperBound,
|
||||
lowerBound: state.lowerBound,
|
||||
};
|
||||
data[valueNeedChanging] = value;
|
||||
this.triggerEvents('onChange', [data.lowerBound, data.upperBound]);
|
||||
} else {
|
||||
this.triggerEvents('onChange', value);
|
||||
}
|
||||
getValue() {
|
||||
const {lowerBound, upperBound} = this.state;
|
||||
return this.props.range ? [lowerBound, upperBound] : upperBound;
|
||||
}
|
||||
|
||||
getIndex(value) {
|
||||
@@ -318,14 +301,14 @@ class Slider extends React.Component {
|
||||
|
||||
end(type) {
|
||||
this.removeEventons(type);
|
||||
this.triggerEvents('onAfterChange');
|
||||
this.triggerEvents('onAfterChange', this.getValue());
|
||||
this.setState({handle: null});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {handle, upperBound, lowerBound} = this.state;
|
||||
const props = this.props;
|
||||
const {className, prefixCls, disabled, included, isIncluded, dots, withDots, range} = props;
|
||||
const {className, prefixCls, disabled, included, isIncluded, dots, range} = props;
|
||||
const {marks, step, max, min, tipTransitionName, children} = props;
|
||||
const marksLen = marks.length;
|
||||
|
||||
@@ -358,7 +341,7 @@ class Slider extends React.Component {
|
||||
const upperIndex = this.getIndex(upperBound);
|
||||
|
||||
let steps = null;
|
||||
if (marksLen > 0 || (step > 1 && (dots || withDots))) {
|
||||
if (marksLen > 0 || (step > 1 && dots)) {
|
||||
const stepsClassName = prefixCls + '-step';
|
||||
const stepNum = marksLen > 0 ? marksLen : Math.floor((max - min) / step) + 1;
|
||||
steps = (<Steps className={stepsClassName} stepNum={stepNum}
|
||||
@@ -413,7 +396,6 @@ Slider.propTypes = {
|
||||
onChange: React.PropTypes.func,
|
||||
onAfterChange: React.PropTypes.func,
|
||||
tipTransitionName: React.PropTypes.string,
|
||||
withDots: React.PropTypes.bool, // @Deprecated
|
||||
dots: React.PropTypes.bool,
|
||||
range: React.PropTypes.bool,
|
||||
};
|
||||
@@ -430,7 +412,6 @@ Slider.defaultProps = {
|
||||
prefixCls: 'rc-slider',
|
||||
disabled: false,
|
||||
tipTransitionName: '',
|
||||
withDots: false, // @Deprecated
|
||||
dots: false,
|
||||
range: false,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user