Compare commits

...
6 Commits
Author SHA1 Message Date
Benjy Cui 6db366a0c5 bump 2.2.0 2015-11-14 10:02:14 +08:00
Benjy Cui 2a5f28c60e chore: remove deprecated withDots 2015-11-14 10:00:28 +08:00
Benjy Cui c4f3f5d20d chore: add example for onAfterChange 2015-11-14 09:56:54 +08:00
Benjy Cui 5e84fa0e1e fix: setState doesn't promise to run synchronously 2015-11-14 09:52:38 +08:00
Benjy Cui 8873210873 Merge pull request #35 from just-boris/master
feat: provide value for `onAfterChange` trigger
2015-11-14 09:38:10 +08:00
just-boris b96e4757ea provide slider value onAfterChange trigger 2015-11-14 02:37:37 +03:00
3 changed files with 18 additions and 39 deletions
+5 -7
View File
@@ -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
View File
@@ -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
View File
@@ -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,
};