diff --git a/README.md b/README.md
index b1b1521..e67ce02 100644
--- a/README.md
+++ b/README.md
@@ -102,27 +102,15 @@ ReactDOM.render(, container);
| defaultValue |
- number |
- 0 |
- If range is `false`, this prop will set the initial position of the handle. |
-
-
- | defaultValues |
- [number, number] |
- [0, 0] |
- If range is `true`, this prop will set initial positions of handles respectively. |
+ number or [number, number] |
+ 0 or [0, 0] |
+ Set initial positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` |
| value |
- number |
+ number or [number, number] |
|
- If range is `false`, this prop will set the current position of the handle. |
-
-
- | values |
- [number, number] |
- |
- If range is `true`, this prop will set current positions of handles respectively. |
+ Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` |
| marks |
@@ -131,7 +119,7 @@ ReactDOM.render(, container);
Mark every step for the slider, it will ignore the `step` parameter if it has been defined. Does not work with `range` |
- | isIncluded |
+ included |
boolean |
true |
If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. |
@@ -161,10 +149,10 @@ ReactDOM.render(, container);
Set the animation for tooltip if it shows. |
- | withDots |
+ dots |
bool |
false |
- For linear slider, when the `step` value is greater than 1, you can set the `withDots` to `true` if you want to render the slider bar with dots. |
+ For linear slider, when the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider bar with dots. |
diff --git a/examples/simple.js b/examples/simple.js
index 7f588f8..32d738b 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -3,6 +3,7 @@
require('rc-slider/assets/index.less');
var React = require('react');
+var ReactDOM = require('react-dom');
var Slider = require('rc-slider');
var style = {width:400,margin:50};
@@ -10,7 +11,7 @@ function onChange(v) {
console.log(v);
}
-React.render(
+ReactDOM.render(
基础滑块
@@ -22,15 +23,15 @@ React.render(
分段式滑块(包含关系)
@@ -38,7 +39,7 @@ React.render(
, document.getElementById('__react-content'));
diff --git a/package.json b/package.json
index ca44490..993012b 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
"lint"
],
"dependencies": {
- "rc-tooltip": "2.x",
+ "rc-tooltip": "~3.0.4",
"rc-util": "2.x"
}
}
diff --git a/src/Marks.jsx b/src/Marks.jsx
index d4afefa..7a03023 100644
--- a/src/Marks.jsx
+++ b/src/Marks.jsx
@@ -1,14 +1,14 @@
import React from 'react';
import rcUtil from 'rc-util';
-const Marks = ({className, marks, index, isIncluded}) => {
+const Marks = ({className, marks, index, included}) => {
const marksLen = marks.length;
const unit = 100 / (marksLen - 1);
const markWidth = unit / 2 + '%';
const elements = [];
for (let i = 0; i < marksLen; i++) {
- const isActived = (isIncluded && i <= index) || (!isIncluded && i === index);
+ const isActived = (included && i <= index) || (!included && i === index);
const markClassName = rcUtil.classSet({
[className + '-text']: true,
[className + '-text-active']: isActived,
diff --git a/src/Slider.jsx b/src/Slider.jsx
index 9ea885e..e312fed 100644
--- a/src/Slider.jsx
+++ b/src/Slider.jsx
@@ -37,15 +37,16 @@ class Slider extends React.Component {
let upperBound;
let lowerBound;
if (props.range) {
- const values = (props.values || props.defaultValues);
- upperBound = this.trimAlignValue(values[1]);
- lowerBound = this.trimAlignValue(values[0]);
+ const value = (props.value || props.defaultValue || [0, 0]);
+ upperBound = this.trimAlignValue(value[1]);
+ lowerBound = this.trimAlignValue(value[0]);
} else if (props.marks.length > 0) {
upperBound = this.calcValueFromProps(props);
} else {
// Note: Maybe `value` is `0`.
// So, check the existence of `value` with `in`.
- const value = ('value' in props ? props.value : props.defaultValue);
+ const defaultValue = ('defaultValue' in props ? props.defaultValue : 0);
+ const value = ('value' in props ? props.value : defaultValue);
upperBound = this.trimAlignValue(value);
}
@@ -72,11 +73,11 @@ class Slider extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.range) {
- const values = nextProps.values;
- if (values) {
+ const value = nextProps.value;
+ if (value) {
this.setState({
- upperBound: values[1],
- lowerBound: values[0],
+ upperBound: value[1],
+ lowerBound: value[0],
});
}
} else if ('value' in nextProps) {
@@ -124,7 +125,12 @@ class Slider extends React.Component {
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 = 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);
@@ -154,11 +160,25 @@ class Slider extends React.Component {
this.startValue = value;
this.startPosition = position;
- const {upperBound, lowerBound} = this.state;
- const isUpperBoundCloser = Math.abs(upperBound - value) < Math.abs(lowerBound - value);
- let valueNeedChanging = (!this.props.range || isUpperBoundCloser) ? 'upperBound' : 'lowerBound';
- const isAtTheSamePoint = (upperBound === lowerBound);
- valueNeedChanging = isAtTheSamePoint ? this.state.recent : valueNeedChanging;
+ const state = this.state;
+ const {upperBound, lowerBound} = state;
+
+ let valueNeedChanging = 'upperBound';
+ if (this.props.range) {
+ const isLowerBoundCloser = Math.abs(upperBound - value) > Math.abs(lowerBound - value);
+ if (isLowerBoundCloser) {
+ valueNeedChanging = 'lowerBound';
+ }
+
+ const isAtTheSamePoint = (upperBound === lowerBound);
+ if (isAtTheSamePoint) {
+ valueNeedChanging = state.recent;
+ }
+
+ if (isAtTheSamePoint && (value !== upperBound)) {
+ valueNeedChanging = value < upperBound ? 'lowerBound' : 'upperBound';
+ }
+ }
this.setState({
handle: valueNeedChanging,
@@ -167,7 +187,12 @@ class Slider extends React.Component {
});
if (this.props.range) {
- const data = Object.assign({}, this.state, {[valueNeedChanging]: value});
+ // 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);
@@ -305,7 +330,7 @@ class Slider extends React.Component {
render() {
const {handle, upperBound, lowerBound} = this.state;
const props = this.props;
- const {className, prefixCls, disabled, isIncluded, withDots, range} = props;
+ const {className, prefixCls, disabled, included, isIncluded, dots, withDots, range} = props;
const {marks, step, max, min, tipTransitionName, children} = props;
const marksLen = marks.length;
@@ -319,7 +344,7 @@ class Slider extends React.Component {
const lowerOffset = this.calcOffset(lowerBound);
let track = null;
- if (isIncluded || range) {
+ if ((included && isIncluded) || range) {
const trackClassName = prefixCls + '-track';
track = ;
}
@@ -338,19 +363,19 @@ class Slider extends React.Component {
const upperIndex = this.getIndex(upperBound);
let steps = null;
- if (marksLen > 0 || (step > 1 && withDots)) {
+ if (marksLen > 0 || (step > 1 && (dots || withDots))) {
const stepsClassName = prefixCls + '-step';
const stepNum = marksLen > 0 ? marksLen : Math.floor((max - min) / step) + 1;
steps = ();
+ included={(included && isIncluded) || range} />);
}
let mark = null;
if (marksLen > 0) {
const markClassName = prefixCls + '-mark';
mark = ();
+ index={upperIndex} included={(included && isIncluded)} />);
}
return (
@@ -372,14 +397,19 @@ Slider.propTypes = {
min: React.PropTypes.number,
max: React.PropTypes.number,
step: React.PropTypes.number,
- defaultValue: React.PropTypes.number,
- defaultValues: React.PropTypes.arrayOf(React.PropTypes.number),
+ defaultValue: React.PropTypes.oneOfType([
+ React.PropTypes.number,
+ React.PropTypes.arrayOf(React.PropTypes.number),
+ ]),
defaultIndex: React.PropTypes.number,
- value: React.PropTypes.number,
- values: React.PropTypes.arrayOf(React.PropTypes.number),
+ value: React.PropTypes.oneOfType([
+ React.PropTypes.number,
+ React.PropTypes.arrayOf(React.PropTypes.number),
+ ]),
index: React.PropTypes.number,
marks: React.PropTypes.array,
- isIncluded: React.PropTypes.bool,
+ isIncluded: React.PropTypes.bool, // @Deprecated
+ included: React.PropTypes.bool,
className: React.PropTypes.string,
prefixCls: React.PropTypes.string,
disabled: React.PropTypes.bool,
@@ -388,7 +418,8 @@ Slider.propTypes = {
onChange: React.PropTypes.func,
onAfterChange: React.PropTypes.func,
tipTransitionName: React.PropTypes.string,
- withDots: React.PropTypes.bool,
+ withDots: React.PropTypes.bool, // @Deprecated
+ dots: React.PropTypes.bool,
range: React.PropTypes.bool,
};
@@ -396,16 +427,16 @@ Slider.defaultProps = {
min: 0,
max: 100,
step: 1,
- defaultValue: 0,
- defaultValues: [0, 0],
defaultIndex: 0,
marks: [],
- isIncluded: true,
+ isIncluded: true, // @Deprecated
+ included: true,
className: '',
prefixCls: 'rc-slider',
disabled: false,
tipTransitionName: '',
- withDots: false,
+ withDots: false, // @Deprecated
+ dots: false,
range: false,
};
diff --git a/src/Steps.jsx b/src/Steps.jsx
index ea7ec08..da2cdb0 100644
--- a/src/Steps.jsx
+++ b/src/Steps.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import rcUtil from 'rc-util';
-const Steps = ({className, stepNum, isIncluded, lowerIndex, upperIndex}) => {
+const Steps = ({className, stepNum, included, lowerIndex, upperIndex}) => {
const dotClassName = className.replace('step', 'dot');
const unit = 100 / (stepNum - 1);
@@ -10,8 +10,8 @@ const Steps = ({className, stepNum, isIncluded, lowerIndex, upperIndex}) => {
const offset = unit * i + '%';
const style = { left: offset };
- const isActived = (isIncluded && i <= upperIndex && i >= lowerIndex ) ||
- (!isIncluded && i === upperIndex);
+ const isActived = (included && i <= upperIndex && i >= lowerIndex ) ||
+ (!included && i === upperIndex);
const stepClassName = rcUtil.classSet({
[dotClassName]: true,
[dotClassName + '-active']: isActived,
diff --git a/tests/index.spec.js b/tests/index.spec.js
index b2b5057..57e6341 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -42,8 +42,8 @@ describe('rc-slider', function () {
expect(node.find('.rc-slider-track').length).to.be(1);
expect(slider.state.upperBound).to.be(0);
- var sliderWithDots = React.render(
- ,
+ var sliderWithDots = ReactDOM.render(
+ ,
div
);
var node1 = $(div);